Bootstrap中响应式布局的相关知识点有哪些
这篇文章主要讲解了“Bootstrap中响应式布局的相关知识点有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Bootstrap中响应式布局的相关知识点有哪些”吧！
为汾阳等地区用户提供了全套网页设计制作服务，及汾阳网站建设行业解决方案。主营业务为网站设计制作、成都网站制作、汾阳网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！
知识点
1 导航栏
官方解释：导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。
1.1 基础导航栏
使用 Bootstrap 之前，习惯用
Navigation First
Navigation Second
Navigation Third
Navigation Fourth
Navigation Fifth
效果图：
使用 Bootstrap 的话，便是在熟悉的这个构造上加上一些修饰即可。首先在 ，并加上样式
navbar navbar-default；然后给里面的
加上样式
nav navbar-nav；最后，给选中的部分加上样式
active。一个最基本的 Bootstrap 导航便完成了。
Navigation First
Navigation Second
Navigation Third
Navigation Fourth
Navigation Fifth
效果图：
这里在最外层加了一个 role="navigation" 的属性，这里是 HTML5 的标签属性，目的是让标签语义化，方便屏幕阅读器对其进行识别，同时也是为了方便特殊人群浏览。
1.2 进阶的导航栏
在浏览一些官方网站时，首先映入眼帘的是左上角鲜明的公司 LOGO 和夸张的轮播 ，Bootstrap 在导航中预留了 LOGO 的位置。使用方法是在外层 里面加一个样式
navbar-header 的
，这个
内再加一个样式
navbar-brand 的
元素。
LOGO
效果图：
有的时候一级导航是不够的，需要搭配二级导航展示更多的内容。使用方法：首先在需要加二级导航的 dropdown，dropdown-toggle 和属性 data-toggle="dropdown"；然后在 dropdown-menu。
LOGO
效果图：
这里又出现新的属性 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添加一个 友情链接。
使用方法：新建一个 glyphicon glyphicon-triangle-bottom。
Glyphicons 字体图标使用示例：
Navigation Fifth
Sub-Navigation First
Sub-Navigation Second
Sub-Navigation Third
效果图：
注意：
另外这里的箭头也可以使用 Bootstrap 自带的样式 caret 来实现，这里的箭头是用 CSS 实现了，使用方法：
1.3 响应式导航栏
在手机端浏览网站的时候常看到几个横线（≡）组成的导航向导，Bootstrap 作为一个移动设备优先也是支持这样的需求的，响应式导航的使用的方法比较固定，首先在导航标题
图片轮播是网站的重要组成部分之一，常用来放活动广告或企业宣传图，有时也叫做“幻灯片”，Bootstrap 中的轮播效果是由 JavaScript 插件 Carousel 来实现的。
