胸怀万里世界， 放眼无限未来。这篇文章主要讲述Bootstrap实战 - 响应式布局相关的知识，希望能为你提供帮助。
一、介绍响应式布局就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
导航栏与轮播在大部分网站的头部占很高的比重，特别是导航栏，扮演着网站地图的角色。
在响应式布局中，要求导航栏能够根据终端屏幕大小显示不同的样式。
二、知识点 2.1 导航栏
官方解释：导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。
2.1.1 基础导航栏使用 Bootstrap 之前，习惯用 & lt; ul& gt; + & lt; li& gt; 来构造一个导航栏。

< !--代码部分--> < style> .navigation-past list-style: none; .navigation-past> li float: left; padding: 8px; .navigation-past> li> a text-decoration: none; color: #000; .active-past background: #E7E7E7; < /style> < ul class="navigation-past"> < !--选中--> < li class="active-past"> < a rel="nofollow" href="https://www.songbingjia.com/android/#"> Navigation First< /a> < /li> < li> < a rel="nofollow" href="https://www.songbingjia.com/android/#"> Navigation Second< /a> < /li> < li> < a rel="nofollow" href="https://www.songbingjia.com/android/#"> Navigation Third< /a> < /li> < li> < a rel="nofollow" href="https://www.songbingjia.com/android/#"> Navigation Fourth< /a> < /li> < li> < a rel="nofollow" href="https://www.songbingjia.com/android/#"> Navigation Fifth< /a> < /li> < /ul>

效果图：

文章图片

使用 Bootstrap 的话，便是在熟悉的这个构造上加上一些修饰即可。首先在 & lt; ul& gt; 外面套一层 & lt; div& gt; ，并加上样式 navbar navbar-default；然后给里面的 & lt; ul& gt; 加上样式 nav navbar-nav；最后，给选中的部分加上样式 active。一个最基本的 Bootstrap 导航便完成了。

< !--代码部分--> < div class="navbar navbar-default" role="navigation"> < ul class="nav navbar-nav"> < li class="active"> < a rel="nofollow" href="https://www.songbingjia.com/android/#"> Navigation First< /a> < /li> < li> < a rel="nofollow" href="https://www.songbingjia.com/android/#"> Navigation Second< /a> < /li> < li> < a rel="nofollow" href="https://www.songbingjia.com/android/#"> Navigation Third< /a> < /li> < li> < a rel="nofollow" href="https://www.songbingjia.com/android/#"> Navigation Fourth< /a> < /li> < li> < a rel="nofollow" href="https://www.songbingjia.com/android/#"> Navigation Fifth< /a> < /li> < /ul> < /div>

效果图：

文章图片

这里在最外层加了一个 role="navigation" 的属性，这里是 html5 的标签属性，目的是让标签语义化，方便屏幕阅读器对其进行识别，同时也是为了方便特殊人群浏览。
2.1.2 进阶的导航栏在浏览一些官方网站时，首先映入眼帘的是左上角鲜明的公司 LOGO 和夸张的轮播 ，Bootstrap 在导航中预留了 LOGO 的位置。使用方法是在外层 & lt; div& gt; 里面加一个样式 navbar-header 的 & lt; div& gt; ，这个 & lt; div& gt; 内再加一个样式 navbar-brand 的 & lt; a& gt; 元素。

< !--代码部分--> < div class="navbar navbar-default" role="navigation"> < div class="navbar-header"> < a rel="nofollow" href="https://www.songbingjia.com/android/#" class="navbar-brand"> LOGO< /a> < /div> < ul class="nav navbar-nav"> < li class="active"> < a rel="nofollow" href="https://www.songbingjia.com/android/#"> Navigation First< /a> < /li> < li> < a rel="nofollow" href="https://www.songbingjia.com/android/#"> Navigation Second< /a> < /li> < li> < a rel="nofollow" href="https://www.songbingjia.com/android/#"> Navigation Third< /a> < /li> < li> < a rel="nofollow" href="https://www.songbingjia.com/android/#"> Navigation Fourth< /a> < /li> < li> < a rel="nofollow" href="https://www.songbingjia.com/android/#"> Navigation Fifth< /a> < /li> < /ul> < /div>

效果图：

文章图片

有的时候一级导航是不够的，需要搭配二级导航展示更多的内容。使用方法：首先在需要加二级导航的 & lt; li& gt; 元素中添加样式 dropdown，& lt; a& gt; 元素中添加样式 dropdown-toggle 和属性 data-toggle="dropdown"；然后在 & lt; li& gt; 里面 & lt; a& gt; 下面在放一个 & lt; ul& gt; + & lt; li& gt; 组合，& lt; ul& gt; 标签添加样式 dropdown-menu。

< !--代码部分--> < div class="navbar navbar-default" role="navigation"> < div class="navbar-header"> < a rel="nofollow" href="https://www.songbingjia.com/android/#" class="navbar-brand"> LOGO< /a> < /div> < ul class="nav navbar-nav"> < li class="active"> < a rel="nofollow" href="https://www.songbingjia.com/android/#"> Navigation First< /a> < /li> < li> < a rel="nofollow" href="https://www.songbingjia.com/android/#"> Navigation Second< /a> < /li> < li> < a rel="nofollow" href="https://www.songbingjia.com/android/#"> Navigation Third< /a> < /li> < li> < a rel="nofollow" href="https://www.songbingjia.com/android/#"> Navigation Fourth< /a> < /li> < li class="dropdown"> < a rel="nofollow" href="https://www.songbingjia.com/android/#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Navigation Fifth < ul class="dropdown-menu"> < li> < a rel="nofollow" href="https://www.songbingjia.com/android/#"> Sub-Navigation First< /a> < /li> < li> < a rel="nofollow" href="https://www.songbingjia.com/android/#"> Sub-Navigation Second< /a> < /li> < li> < a rel="nofollow" href="https://www.songbingjia.com/android/#"> Sub-Navigation Third< /a> < /li> < /ul> < /a> < /li> < /ul> < /div>

效果图：

文章图片

这里又出现新的属性 aria-haspopup="true" aria-expanded="false"，同样的，这也是 HTML5 新加的属性，这里引用 Segmentfault 社区姜中秋的回答。
aria-haspopup: true 表示点击的时候会出现菜单或是浮动元素；false 表示没有 pop-up 效果。aria-expanded: 表示展开状态。默认为 undefined, 表示当前展开状态未知。其它可选值：true 表示元素是展开的；false 表示元素不是展开的。
平常所见到的下拉框一般都有一个向下的箭头符号 ▼，同样的，在 Bootstrap 中也支持这一效果，只不过需要引入她自带的字体库 Glyphicons 字体图标。
官方介绍：Bootstrap 包括 250 多个来自 Glyphicon Halflings 的字体图标。Glyphicons Halflings 一般是收费的，但是他们的作者允许 Bootstrap 免费使用。为了表示感谢，希望你在使用时尽量为Glyphicons添加一个 友情链接。
使用方法：新建一个 & lt; span& gt; 元素，然后在里面加上样式 glyphicon glyphicon-triangle-bottom。
Glyphicons 字体图标使用示例：

< !--代码部分--> < li class="dropdown"> < a rel="nofollow" href="https://www.songbingjia.com/android/#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Navigation Fifth < span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"> < /span> < ul class="dropdown-menu"> < li> < a rel="nofollow" href="https://www.songbingjia.com/android/#"> Sub-Navigation First< /a> < /li> < li> < a rel="nofollow" href="https://www.songbingjia.com/android/#"> Sub-Navigation Second< /a> < /li> < li> < a rel="nofollow" href="https://www.songbingjia.com/android/#"> Sub-Navigation Third< /a> < /li> < /ul> < /a> < /li>

效果图：

文章图片

注意：

• Glyphicons 字体图标和文本之间添加一个空格，不然会影响样式（padding）的正确显示。
• 服务器需要正确添加相应的 MIME 类型，否则加载字体会报 404 错误。

另外这里的箭头也可以使用 Bootstrap 自带的样式 caret 来实现，这里的箭头是用 CSS 实现了，使用方法：& lt; span class="caret"& gt; & lt; /span& gt; 。
2.1.3 响应式导航栏在手机端浏览网站的时候常看到几个横线（≡）组成的导航向导，Bootstrap 作为一个移动设备优先也是支持这样的需求的，响应式导航的使用的方法比较固定，首先在导航标题 & lt; div class="navbar-header"& gt; 内加上一段固定写法的代码；然后在需要在小屏时折叠的 & lt; ul& gt; 元素外包一层样式 collapse navbar-collapse 的 & lt; div& gt; 元素，并给这个元素加上任意名称的 ID，例如：id="navigation-collapse"；最后在响应式按钮 & lt; button& gt; 元素上加上 data-target 属性指向要折叠的内容 id，例如：data-target="#navigation-collapse"。

< !--代码部分--> < div class="navbar navbar-default" role="navigation"> < div class="navbar-header"> < !--以下为固定写法，用到的时候复制粘贴即可--> < button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navigation-collapse"> < span class="sr-only"> Toggle Navigation< /span> < span class="icon-bar"> < /span> < span class="icon-bar"> < /span> < span class="icon-bar"> < /span> < /button> < a rel="nofollow" href="https://www.songbingjia.com/android/#" class="navbar-brand"> LOGO< /a> < /div> < div class="collapse navbar-collapse" id="navigation-collapse"> < ul class="nav navbar-nav"> < li class="active"> < a rel="nofollow" href="https://www.songbingjia.com/android/#"> Navigation First< /a> < /li> < li> < a rel="nofollow" href="https://www.songbingjia.com/android/#"> Navigation Second< /a> < /li> < li> < a rel="nofollow" href="https://www.songbingjia.com/android/#"> Navigation Third< /a> < /li> < li> < a rel="nofollow" href="https://www.songbingjia.com/android/#"> Navigation Fourth< /a> < /li> < li class="dropdown"> < a rel="nofollow" href="https://www.songbingjia.com/android/#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Navigation Fifth < span class="caret"> < /span> < ul class="dropdown-menu"> < li> < a rel="nofollow" href="https://www.songbingjia.com/android/#"> Sub-Navigation First< /a> < /li> < li> < a rel="nofollow" href="https://www.songbingjia.com/android/#"> Sub-Navigation Second< /a> < /li> < li> < a rel="nofollow" href="https://www.songbingjia.com/android/#"> Sub-Navigation Third< /a> < /li> < /ul> < /a> < /li> < /ul> < /div> < /div>

效果图：

文章图片

2.2 轮播
图片轮播是网站的重要组成部分之一，常用来放活动广告或企业宣传图，有时也叫做“幻灯片”，Bootstrap 中的轮播效果是由 javascript 插件 Carousel 来实现的。
2.2.1 基础轮播轮播的使用方法也是相对固定的，特殊场景按需求修改即可。需要注意的是需要给最外层 & lt; div& gt; 元素加上一个 id，并在小圆点出指向这个 id。

< !--代码部分--> < div id="my-banner" class="carousel"> < !--放置小圆点，点击可以切换轮播--> < ol class="carousel-indicators"> < !--加上样式active表示默认显示的轮播，data-slide-to="0"属性表示显示轮播的顺序--> < li data-target="#my-banner" data-slide-to="0" class="active"> < /li> < li data-target="#my-banner" data-slide-to="1"> < /li> < /ol> < !--这里放置轮播显示的图片--> < div class="carousel-inner"> < !--加上样式active表示默认显示的图片--> < div class="item active"> < img src="http://img.readke.com/220604/0445162021-6.jpg" > < /div> < div class="item"> < img src="http://img.readke.com/220604/04451A4Q-7.jpg" > < /div> < /div> < /div>

效果图：

文章图片

2.2.2 进阶的轮播一个完整的轮播应具有自动播放、点击切换、悬浮停止、外加说明文字功能，别担心，这些 Bootstrap 通通都有！
2.2.2.1 自动播发最外层 & lt; div& gt; 元素添加属性 data-ride="carousel" 和样式 slide（使轮播播放更平滑），如：& lt; div id="my-banner" class="carousel slide" data-ride="carousel"& gt; 。此时轮播的自动播放时间为 5 秒（默认），如想改变此值设置属性 data-interval="你想要的值"，如我想要 3 秒（3000 ms）轮播一次则设置 data-interval="3000"。另外轮播是默认悬浮停止播放的（data-pause="hover"），如想禁止悬浮播放设置属性 data-pause="false" 即可。
2.2.2.2 添加文字【Bootstrap实战 - 响应式布局】在轮播图片 & lt; img& gt; 元素下面添加样式 carousel-caption 的 & lt; div& gt; ，里面存放文字便可正确显示在轮播上面。

< !--代码部分--> < div class="carousel-caption"> < h5> 夜里总是下雨< /h5> < /div>

2.2.2.3 点击切换在轮播图片下面放置两个 & lt; a& gt; 元素，href 指向轮播 id，添加属性 data-slide="prev/next 向前/向后"。

< !--代码部分--> < !--< a> 元素的href指向轮播id--> < a rel="nofollow" class="left carousel-control" href="https://www.songbingjia.com/android/#my-banner" data-slide="prev" role="button"> < span class="glyphicon glyphicon-chevron-left"> < /span> < /a> < a rel="nofollow" class="right carousel-control" href="https://www.songbingjia.com/android/#my-banner"data-slide="next" role="button"> < span class="glyphicon glyphicon-chevron-right"> < /span> < /a>

轮播代码示例：

< !--代码部分--> < div id="my-banner" class="carousel slide" data-ride="carousel" data-interval="3000" data-pause="false"> < !--放置小圆点，点击可以切换轮播--> < ol class="carousel-indicators"> < !--加上样式active表示默认显示的轮播，data-slide-to="0"属性表示显示轮播的顺序--> < li data-target="#my-banner" data-slide-to="0" class="active"> < /li> < li data-target="#my-banner" data-slide-to="1"> < /li> < /ol> < !--这里放置轮播显示的图片--> < div class="carousel-inner"> < !--加上样式active表示默认显示的图片--> < div class="item active"> < img src="http://img.readke.com/220604/0445162021-6.jpg" > < div class="carousel-caption"> < h5> 夜里总是下雨< /h5> < /div> < /div> < div class="item"> < img src="http://img.readke.com/220604/04451A4Q-7.jpg" > < div class="carousel-caption"> < h5> 后除提醒君の世界< /h5> < /div> < /div> < /div> < !--< a> 元素的href指向轮播id--> < a rel="nofollow" class="left carousel-control" href="https://www.songbingjia.com/android/#my-banner" data-slide="prev" role="button"> < span class="glyphicon glyphicon-chevron-left"> < /span> < /a> < a rel="nofollow" class="right carousel-control" href="https://www.songbingjia.com/android/#my-banner"data-slide="next" role="button"> < span class="glyphicon glyphicon-chevron-right"> < /span> < /a> < /div>

效果图：

文章图片

三、实战试着组合栅格系统 + 导航栏 + 轮播布局一个响应式页面。
电脑端效果图：

文章图片

移动端效果图：

文章图片

其实实现这样一个效果很简单，首先看一下栅格参数如何在多种屏幕设备上工作的。

文章图片

在新闻和资讯的盒子上同时加上样式 col-xs-*，col-sm-* 和 col-md-*，小屏时（屏幕宽度 ＜ 992px）col-xs-*，col-sm-* 生效，col-md-* 失效；大屏时（屏幕宽度 ≥ 992px）col-md-* 生效，col-xs-*，col-sm-* 失效。例如：& lt; div class="col-xs-12 col-sm-12 col-md-6"& gt; 新闻& lt; /div& gt; & lt; div class="col-xs-12 col-sm-12 col-md-6"& gt; 资讯& lt; /div& gt; 。
演示地址：https://mazey.cn/bootstrap-blueprints/lesson-second-navigation/index.html，源码地址：https://github.com/mazeyqian/bootstrap-blueprints/tree/master/lesson-second-navigation。
版权声明
本博客所有的原创文章，作者皆保留版权。转载必须包含本声明，保持本文完整，并以超链接形式注明作者后除和本文原始地址：https://blog.mazey.net/2575.html
（完）

推荐阅读

• 

  第一次使用微波炉要清洗吗，微波炉清洗完可以直接用吗
• 

  副科级相当于什么军衔
• 

  【WordPress】提升网站打开速度，图片优化神器ShortPixel Image Optimizer使用教程
• 

  网上报税下载哪个app etax网上报税哪里下载，网上报税用什么软件
• 

  林内即享热水器代码是什么故障,出现这故障是什么原因
• 

  罗勒酱是什么酱 罗勒酱是什么
• 

  哪些娱乐圈八卦你听了觉得难以置信？
• 

  血管|秋冬输液能通血管？医生根本没推荐过！这个害死人的“秘方”别再信了
• 

  屏幕跳到最下方
• 

  玩吧app怎么加好友 关于在玩吧APP中添加好友的图文教程
• 

  伊万格琳娜·艾格洛蒲露丝伊万格丽娜
• 

  庆东锅炉锅炉面板显示16故障怎么解决,只要注意好这几点就行
• 

  水星MW310R，水星MW310R怎么样水星MW310R好吗
• 

  卡片相机一般用哪种三脚架比较好？
• 

  爱上了比自己大16岁的已婚大叔,是否是不好的结局？
• 

  vue-cli|vue-cli rem自适应 px to rem
• 

  聊聊springboot项目全局异常处理那些事儿
• 

  司机抱小孩开车算违章吗 司机抱着小孩开车怎么处罚
• 

  鲁滨逊漂流记与格列佛游记的不同
• 

  车载导航系统刷机方法有哪些

• #yyds干货盘点#PHP实现定时任务hellogerard/jobby实例
• #yyds干货盘点# 阿里四面（kafka何时如何删除Topic（））
• 笔记2
• win7系统如何一键修好 一键修好系统之家Win7系统的办法
• 安装系统 装win7系统无法识别电脑硬盘 重装系统之家Win7系统后无法识别硬盘的应对措施
• win7系统如何开蓝牙 Win7系统Lenovo笔记本打开蓝牙技巧的设置办法
• win7系统telnet服务 更改新萝卜家园Win7系统telnet服务路径的窍门
• win7系统文件名乱码 深度技术Win7系统U盘中的文件名乱码且无法删掉怎样处理？
• win7系统初始化失败 win7笔记本无法运行游戏提示应用程序初始化失败的原因与应对办法