bootstrap开发网页之导航栏（下拉菜单 响应式）

最新推荐文章于 2026-06-30 10:58:38 发布
原创 最新推荐文章于 2026-06-30 10:58:38 发布 · 9k 阅读 · 11 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
笔记

当前文章被收录于：

笔记
30 篇文章 0 人学习
订阅专栏 查看详情
这篇博客介绍了如何使用Bootstrap开发响应式网页，特别是导航栏部分。当浏览器窗口尺寸减小到一定程度时，导航栏的选项会隐藏，并显示一个三横线的下拉按钮，以保持页面在不同设备上的良好显示效果。 
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>现代浏览器博物馆</title>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 


    <style>
    body {padding-top: 70px;}
    </style>
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
  			<div class="container">
  				<div class="navbar-header">
  					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
  						<span class="sr-only">Toggle navigation</span>
  						<span class="icon-bar"></span>
  						<span class="icon-bar"></span>
  						<span class="icon-bar"></span>
  					</button>
  					<a href="#" class="navbar-brand">现代浏览器博物馆</a>
  				</div>
  				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  					<ul class="nav navbar-nav">
  						<li class="active"><a href="#">综述</a></li>
  						<li><a href="#">简述</a></li>
  						<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">特点<span class="caret"></span></a>
                          <ul class="dropdown-menu">
                          <li><a href="#">Chrome</a></li>
                          <li><a href="#">Firefox</a></li>
                          <li><a href="#">Opera</a></li>
                          <li><a href="#">Safari</a></li>
                          <li><a href="#">IE</a></li>
                          <li class="divider"></li>
                          </ul>
  						</li>
  				     	<li><a href="#">关于</a></li>
  		</ul>
  	</div>
  </div>
</nav>
  </body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>现代浏览器博物馆</title>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 


    <style>
    body {padding-top: 70px;}  
    </style>
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body> 
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
   <div class="container">
   <div class="navbar-header">
   <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
   <span class="sr-only">Toggle navigation</span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>

   </button>

 <button></button>内的是一个响应式，当浏览器视窗小于某一值得时候，导航栏内的选项会隐藏，用一个三横的按钮方框代替。

   <a href="#" class="navbar-brand">现代浏览器博物馆</a> navbar-brand 铭牌，也就是在导航框内不被隐藏的。
   </div>
   <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 注意的是应该保证button内的data-target的值和下面在小窗口中隐藏的导航内容的div中的id的值一样！！！
   <ul class="nav navbar-nav">
   <li class="active"><a href="#">综述</a></li>
   <li><a href="#">简述</a></li>

   <li class="dropdown">

                          <a href="#" class="dropdown-toggle" data-toggle="dropdown">特点<span class="caret"></span></a>

                          <ul class="dropdown-menu">
                          <li><a href="#">Chrome</a></li>
                          <li><a href="#">Firefox</a></li>
                          <li><a href="#">Opera</a></li>
                          <li><a href="#">Safari</a></li>
                          <li><a href="#">IE</a></li>
                          <li class="divider"></li>
                          </ul> 这是一个下拉框，包裹在一个导航栏中。<span class="caret"></span>是一个下三角图标。 下拉框是放在了dropdown容器中。
   </li>
         <li><a href="#">关于</a></li>
   </ul>
   </div>
  </div>
</nav>
  </body>

</html>

下面是效果图的截屏···




标签
#学习笔记 #bootstrap #响应式
手把手教你用WF100DPZ数字压力传感器搞定I2C/SPI通信（附完整寄存器解析）
weixin_28285943的博客
03-09 307
本文详细解析了WF100DPZ数字压力传感器的I2C与SPI通信驱动方法，涵盖硬件连接、寄存器配置、数据读取流程及常见问题排查。该传感器内置24位ADC和出厂校准，通过实战代码演示了如何稳定获取高精度压力与温度数据，帮助开发者快速集成到嵌入式项目中。
蓝色天空Bootstrap响应式整站模板设计与实战
weixin_35949153的博客
10-09 1091
Bootstrap由Twitter团队开发并开源，其核心理念是“移动优先”与“响应式设计”。通过预设的CSS类库和JavaScript组件，开发者无需从零编写样式代码，即可快速构建跨设备兼容的网页界面。它采用Sass预处理器构建，支持高度定制化，并提供栅格系统、表单控件、导航组件等丰富UI模块，极大提升了前端开发效率。
bootstrap学习使用（导航条、下拉菜单、轮播、栅格布局等）
01-19
本文算是bootstrap学习使用的年底大总结，供大家参考，具体内容如下 bootstrap框架 BootStrap学习从现在开始，前端开发框架Bootstrap，可大大简化网站开发过程，从而深受广大开发者的喜欢。 <!DOCTYPE html> <html lang=zh-cn><!-- 语言设置 --> <head> <meta charset=utf-8> <meta http-equiv=X-UA-Compatible content=IE=edge> <meta name=viewport content=width=device-width, ini
基于matlab/simulink的三相异步电机变频调速的矢量控制仿真模型
基于matlab/simulink的三相异步电机变频调速的矢量控制仿真模型
bootstrap搭建后台管理页面
热门推荐
NeoYang的专栏
03-03 3万+
bootstrap搭建后台管理页面管理页面主体包括4部分，顶部导航栏，左侧导航栏，中间正文页和底部的页脚。其中左侧和顶部使用的是bootstrap的导航和下拉菜单组件，主体页面为了演示方便，使用了iframe框架。
Bootstrap响应式组件详解（一）：导航条
duang_ang的博客
02-21 6953
例子选自https://v3.bootcss.com/components/#navbar的第一个实例 电脑上的效果：   手机上的效果： 隐藏了Brand右边的原本内容，整合到了右边的按钮里面，点击按钮后的效果：   源代码（要先引用bootstrap才可用）： &lt;nav class="navbar navbar-default"&gt; &lt;div c...
YOLO系列目标检测工具实战指南与性能优化
最新发布
weixin_33739646的博客
06-30 411
目标检测是计算机视觉中的核心技术，YOLO(You Only Look Once)系列算法因其高效的实时检测能力成为工业界首选方案。其核心原理是通过单次前向传播同时预测边界框和类别，大幅提升推理速度。在工程实践中，环境配置、数据标注和模型训练是三大关键环节。本文重点解析基于PyTorch的YOLO工具链，包括支持Docker容器化的免环境训练方案、具备智能预标注功能的标注工具，以及涵盖YOLOv3到v8全系列的模型仓库。针对实际部署场景，特别探讨了TensorRT加速和ONNX量化等优化技术，帮助开发者在边
Bootstrap-栅格布局实例
柒青衿的博客
12-20 7221
下面是某管理系统的Bootstrap实现 XXXXX系统 body { padding-top: 50px; padding-bottom: 40px; color: #5a5a5a; } /* 下面是左侧导航栏的代码 */ .sidebar {
django学习-武沛齐教程【day4】
麟麟菜菜子的博客
09-03 1460
django学习-武沛齐教程【day4】
Bootstrap 4将导航栏项目向右对齐
xfxf996的博客
08-11 3871
How do I align a navbar item to right? 如何将导航栏项目右对齐？ I want to have the login and register to the
Bootstrap
shshbsu的博客
04-01 348
一、什么事Bootstrap Bootstrap是一个用于快速开发 Web 应用程序和网站的前端框架。基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，提供了优雅的HTML和CSS规范，由动态CSS语言Less写成。 <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> ...
探索响应式设计之宝——Bootstrap期末作品实战
gitblog_09729的博客
10-28 469
探索响应式设计之宝——Bootstrap期末作品实战 去发现同类优质开源项目:https://gitcode.com/ Bootstrap作为前端开发领域中的一款明星级框架，以其强大的响应式设计能力和简洁直观的组件库而受到广泛欢迎。今天，我们有幸向大家推荐一款特别的开源项目：“Bootstrap期末作品资源”，这是一份珍贵的学习和实践资料，适合每一位希望掌握Bootstrap精髓的开发者。 项目技...
用BootStrap实现一个导航栏
weixin_42199230的博客
09-11 916
导航栏 人员管理 顺丰科技 顺丰...
Bootstrap 组件
武林半侠的博客
06-01 1072
Bootstrap 组件   1.字体图标 Bootstrap3与Bootstrap2的最大差异在于使用了font文件来替代图片，用于显示图标，这些font图片称为Glyphicons--象形文字图标。 可以使用或标签来配合使用，具体如下： //使用小图标 glyphicon glyphicon-star"> glyphicon glyphicon-star"> //也可以结合按钮
学习周记4——关于Bootstrap的学习
qq_48999927的博客
03-30 283
Bootstrap简介 Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 有以下几个特点： 移动设备优先 浏览器支持 容易上手：只要具备 HTML 和 CSS 的基础知识、 响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。 Bootstrap网格系统 ...
【Bootstrap】bootstrap入门之栅格布局、弹性布局、组件类_02
青春木鱼的博客
10-24 5592
Boot最重要的3个知识：手写媒体查询@media；栅格布局；scss。栅格布局，把所有的布局看做一行，用列数来表示每一个块占据宽度的大小，一行一共12列。栅格系统分为行.row和列.col,行必须包裹列。可以是一行包多列，也可以写多行包多列。
【无标题】
m0_68082784的博客
03-14 166
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*
轮播图0000
Liudonghao2002的博客
04-18 93
<!doctype html> <html lang="zh-CN"> <head> <!-- 必须的 meta 标签 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap 的 CSS 文件 --> <!-.
bookstrap
Yakamoz___的博客
03-15 130
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">
架构师之前端架构bootstrap(二)---------(最小系统)最顶部导航栏强制靠边的布局
对酒当歌，人生几何
04-02 301
1.前言. 如题. 2.代码. [code="java"] Bootstrap 可视化布局系统 [url=#]网站名[/url] [ur...
Boot——组件（上）
Luo3255069063的博客
03-13 852
组件
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值