用 Bootstrap4 制作响应式网页二(导航菜单)
ccwgpt 2025-07-21 13:15 4 浏览 0 评论
上文已经介绍安装框架的过程，本文接下来制作一个导航菜单。
导航菜单设计左右结构，左边放logo,右边放菜单链接。
下面是 html部分的整体代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>用Bootstrap4制作电脑手机响应式网页</title>
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/css/style.css"><!-- 在昨天的基础上多添加一个样式文件 -->
<script defer type="text/javascript" src="/js/jquery-3.5.1.min.js"></script>
<script defer type="text/javascript" src="/js/bootstrap.min.js"></script>
</head>
<body>
<header> <!-- header 作为导航菜单的容器 -->
<div class="container"> <!-- container 限定我们的内容居中 -->
<div class="navbar navbar-dark navbar-expand-lg"> <!-- 这部分导航左边logo区域 -->
<a class="navbar-brand" href="#">
<img src="/images/logo.png" /> Logo
</a>
<!-- button 按钮为隐藏，切换到手机端时显示到右边下拉按钮 3个div 形成3条横线 -->
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navmenu">
<div class="mt-1"></div>
<div class="mt-1"></div>
<div class="mt-1"></div>
</button>
<!-- 导航菜单部分，pc上居右显示 ml-auto -->
<div id="navmenu" class="navbar-collapse collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link active" href="#">首页</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">菜单一</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">菜单二</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">菜单三</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">菜单四</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">菜单五</a>
</li>
</ul>
</div>
</div>
</div>
</header>
</body>
</html>style.css部分：
header{background-color: #7952b3;}
header .navbar-brand img{height: 30px;border-radius: 50%;}
header .navbar-dark .navbar-toggler,header .navbar-dark .navbar-toggler:focus,header .navbar-dark .navbar-toggler:hover{border: none;padding: 0;outline: none;}
header .navbar-dark .navbar-toggler div{width:25px;height: 4px;background-color: #fff;}给 header 添加一个背景色 #7952b3
以上是完整代码，初学者可复制代码尝试一下。
相关推荐
- ForkJoinPool的了解与使用（fork-join）
-
ForkJoinPool是一个强大的Java类，用于处理计算密集型任务。使用ForkJoinPool分解计算密集型任务并并行执行它们以获得更好的Java应用程序性能。它的工作原理是将任务分解为更小的子...
- Netty 时间轮源码解析（时间轮java实现）
-
定时任务在中间件和业务系统中有很多应用，比如：注册中心中定期上报状态的心跳机制。RPC框架中定期扫描请求列表移除超时请求。延迟队列提交未来时间的任务。业务系统每日凌晨跑批处理或报表任务。Java原...
- Autodesk基于Mesos的通用事件系统架构
-
【编者按】本文由AutodeskCloud软件架构师OlivierPaugam撰写，解释了如何集合Mesos、Kafka、RabbitMQ、Akka、Splunk、Librato、EC2等基础设施...
- 全局视角看技术-Java多线程演进史
-
作者：京东科技文涛全文较长共6468字，语言通俗易懂，是一篇具有大纲性质的关于多线程的梳理，作者从历史演进的角度讲了多线程相关知识体系，让你知其然知其所以然。前言2022年09月22日，JDK19发...
- 为什么应该使用Dapr来构建事件驱动的微服务?
-
微服务架构从本质上来说是分布式的。构建微服务总是会遇到极具挑战性的问题，比如说弹性服务调用、分布式事务处理、按需扩容以及严格一次(exactly-once)的消息处理。将微服务放在Kubernet...
- WEB前端开发学习流程（web前端开发简明教程）
-
相对web后端开发来说,web前端开发对大部分初学编程者比较友好，而且入门门槛低，就业范围广。是大部分转行学IT的一个首选方向。web前端开发工程师，主要进行网站浏览器的开发、优化、布局的工作。在了解...
- 《s24z 编程指南》大纲(AI 提示词)
-
由于AIGC的迅速发展，本教程《s24z编程指南》，尝试用如下方法：准备《编程指南》的大纲，按章节划分，每小节由相关知识点和文字组成。每次将一小部分文本，以提示词的形式，送入Kimi或Ch...
- 有哪些常用的Python后端开发框架?
-
以下为你介绍一些常用的Python后端开发框架，包含各自的特点、适用场景与示例代码：Flask特点：轻量级、灵活，核心代码简洁，几乎不强制开发者使用特定的工具和库，开发者可按需添加扩展。适用场景...
- 数学分析的结构（数学分析的结构方法）
-
一、基础结构层实数系统与集合论数学分析的根基建立在实数连续之上，通过集合论（如公理化集合论）定义数学对象的抽象结构。例如，实数集的完备性公理是数学分析区别于其他数学分支的关键特征。此外，点集拓扑学（如...
- 新手在学习Web前端时需要学习的内容汇总
-
Web前端开发因为入行门槛低，是很多人转行IT开发行业的首选，但想要成为一名合格的Web前端开发工程师同样要具备过硬的专业技能，而且想要学成后高薪快速的就业，过硬的技术是基本条件。那么，新手小白学习W...
- 基于 Kotlin KMP 实现 HarmonyOS 与 Android 双平台 SDK 开发实践
-
背景随着鸿蒙平台的进一步发展，大家的态度也逐渐从观望转向实际投入，越来越多的公司开始考虑将自家应用迁移到鸿蒙平台。但是这一过程并非想象中的那么简单，尤其对于已经存在很多年的大型项目来说，直接投入大量人...
- 爱奇艺 App 中台技术实践（爱奇艺 app 中台技术实践在哪）
-
本文来自爱奇艺研究员在ArchSummit全球架构师峰会上的演讲整理,将为大家分享爱奇艺打造移动中台的过程。爱奇艺移动中台的建设过程可分为组件解耦、组件定制化和平台化，未来会利用平台发现、沉淀和复...
- 软件开发|同样的功能需求，为什么有的软件公司报价高?有的低?
-
最近有个朋友问我：同样的功能需求，为什么有的公司报价高？有的公司报价低？其实，有很多创业的朋友，在寻找技术开发公司的时候，经常会遇到这个困惑，一样的功能需求，不同的公司有不同的报价，有的差别还很大，那...
- 零基础要怎么学习Web前端?Web前端学习路径分享
-
Web前端因为薪资高、入行门槛低，成为很多人转行进入IT行业的首选。对于零基础的人来说，学习之前一定要想清楚为什么而学习Web前端，给自己一个清晰的定位，摆正心态。如果还不清楚学习路线，可以参考千锋武...
- MICROCHIP/微芯 KSZ9031RNXIA 以太网芯片
-
特征o适用于IEEE802.3应用的单片10/100/1000Mbps以太网收发器oGMII/MII标准接口，3.3V/2.5V/1.8V容错I/Oo自动协商以自动选择最高链路连接速度（10/10...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- 框架图 (58)
- flask框架 (53)
- quartz框架 (51)
- abp框架 (47)
- jpa框架 (47)
- springmvc框架 (49)
- 分布式事务框架 (65)
- scrapy框架 (56)
- shiro框架 (61)
- 定时任务框架 (56)
- java日志框架 (61)
- JAVA集合框架 (47)
- mfc框架 (52)
- abb框架断路器 (48)
- ui自动化框架 (47)
- beego框架 (52)
- java框架spring (58)
- grpc框架 (65)
- tornado框架 (48)
- 前端框架bootstrap (54)
- ppt框架 (48)
- 内联框架 (52)
- cad怎么画框架 (58)
- ssm框架实现登录注册 (49)
- oracle字符串长度 (48)