Bootstrap响应式组件详解（⼀）：导航条电脑上的效果：
⼿机上的效果：
隐藏了Brand右边的原本内容，整合到了右边的按钮⾥⾯，点击按钮后的效果：
源代码（要先引⽤bootstrap才可⽤）：
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
导航页源码<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></          <ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></          <ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
代码详解（最好⽤浏览器⼀边审查元素⼀边看）：
1.<nav class="navbar navbar-default">
标识这是⼀个导航条，具有navbar和navbar-default的样式，导航条宽度根据屏幕宽度变化。
【其实就是⼀个带背景⾊的导航条边框，具体长什么样可以新建⼀个<nav class="navbar navbar-default"></nav>看看，想单独看某⼀种样式的效果也可以⽤同样的⽅法】
2.<div class="container-fluid">
Bootstrap 需要为页⾯内容和栅格系统包裹⼀个.container容器来⽀持响应式布局。container类⽤于固定宽度并⽀持响应式布局的容器。container-fluid类⽤于 100% 宽度，占据全部视⼝（viewport）的容器。
【这⾥的导航条没有固定宽度那就⽤container-fluid类】
3.<div class="navbar-header">
审查元素后可知其响应电脑和⼿机的区别在于：
a.调整内外边距让内容放在合适的位置
b.响应电脑会让该div左浮
【float:left 该样式还有⼀个特点就是让该div变成了⾏内元素，该div不占⼀⾏了，它的宽度由内容定，它的内容根据代码可知是⼀个button标签加上⼀个a标签，由于响应电脑时那个button被隐藏了，所以最终该div的宽度就是由a标签决定，对应电脑效果图⾥⾯的那
个“Brand”，因为只占⼀⾏的⼀⼩部分空间，所以那个“Brand”右边还可以放其他元素，适合电脑观看】
c.响应⼿机的时候不左浮
【因为⼿机屏幕较⼩，⼀⾏不能放太多东西，所以这时候该div就不左浮了，此时该div为块级元素占⼀⾏，内容为button标签加上⼀个a标签，a标签左浮，对应⼿机效果图左边的那个“Brand”；button在⼿机端会显⽰且右浮动，对应⼿机效果图右边的那个按钮】
研究左浮动的例⼦：
<div >没有浮动</div>
<div >左浮动</div>
<div >没有浮动</div>
4.<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
响应电脑的时候该button会被隐藏
【@media (min-width: 768px) .navbar-toggle {display: none;}  】
响应⼿机的时候会显⽰
【button结合它⾥⾯的四个span标签⼀起看就对应⼿机效果图右边那个按钮的样⼦，⾸先button标签通过margin和padding调整好了位置，注意button没有设置宽⾼，宽⾼是由它的内容决定的；第⼀个span是给屏幕阅读器阅读的，⽅便残障⼈⼠阅读⽹站，该span说明这是⼀个Toggle navigation切换导航，并通过 .sr-only 类(只给屏幕阅读器读的类)让其在视觉上表现出隐藏的效果（宽⾼只有1*1）；剩下三个span对应按钮⾥⾯的三条横线，原理：改span为块级元素，宽⾼22*2，背景⾊为灰⾊，第⼀条横线⽆外边距，第⼆和第三条横线有向上为4px的外边距，所以分布得均匀，感觉也好看。】
这⾥的data-toggle="collapse"实现了折叠插件效果，折叠的内容是data-target="#bs-example-navbar-collapse-1"，点击该button就可以将该id对应的内容展开显⽰了。具体的原理要研究Bootstrap插件和Bootstrap.js
这⾥的aria-expanded="false"就是告诉屏幕阅读器这个collapse折叠是没有展开的，当点击button后就变成aria-expanded="true"，告诉屏幕阅读器这个collapse折叠是没有展开了，注意的是这些aria-*属性都是⽤来描述⽹页的，并不能通过改变它的值来使页⾯样式发⽣改变。
】
5.<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
响应电脑时会显⽰出来【对应电脑效果图“Brand”右边的部分，⾥⾯的内容是ul + form + ul ，第⼀个ul及其li左浮动，form左浮动，第⼆个ul右浮动，就可以显⽰出效果图⼀⾏排列的样⼦了】
响应⼿机的时候会隐藏【当点击按钮的时候会展开显⽰⾥⾯的内容，实现原理是在点击按钮的时候给该div加上in类让它display:block；就显⽰出来了，⾥⾯的内容是ul + form + ul，没有修改它们的类，原有的类就有媒体查询，在响应⼿机的时候，取消它们的浮动，把他们都变成块级元素（包括ul⾥⾯的li）就可以实现⼿机效果图⼀⾏接着⼀⾏的效果了】
6.<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
分层来看，最⾥⾯是span，sr-only说明是给屏幕阅读器看的，(current)说明这是当前选中的页⾯，看效果图就发现选中的那个Link背景⾊会深⼀点；外⾯⼀层是a标签，⽂本为Link，放在导航条⽅便跳转；最外层是包裹a标签的li，值得注意的是它的active类不是⽤来实现背景⾊加深的，是⽤来⽅便标签选择器到a标签(.active>a)，然后再给这个位置的a标签加深颜⾊，更有意义的作⽤应该是点击选中某个a标签就会让包裹被选中的a标签的li带上active类，这样.active>a就总是能够到被选中的a标签了，然后对它的样式进⾏改变也⽅便。不过实现这样的效果直接⽤JS不⽤active类也可以的样⼦。
7.<li class="dropdown">
下拉菜单
在响应电脑的时候，下拉菜单左浮动，宽度由内容决定；响应⼿机的时候，取消左浮动，块级元素逐⾏显⽰；
响应电脑的时候，下拉菜单紧紧粘贴下拉按钮下⾯是因为⽤了⼦元素绝对定位，⽗元素相对定位的技术，不记得可以去复习⼀下，顺带也复习⼀下浮动元素与⾮浮动元素混合出现的时候是怎么排版的。
】
8.<span class="caret"></span></a>
效果图中“Dropdown”右边的倒三⾓
9.<li role="separator" class="divider"></li>
下拉菜单中的分割线，原理：背景⾊为灰⾊，⾼度为1px
10.<input type="text" class="form-control" placeholder="Search">
响应电脑的时候，输⼊框的宽度为默认的auto（默认宽度auto对不同标签不⼀样，像块级元素div，auto就是100%⽗元素；像⾏内元素span，auto就是0；输⼊框的默认宽度随浏览器的不同⽽不同，⾕歌的话是22个字符，174.4px，其实看上去有点⼩）。
响应⼿机的时候宽度是width:100%，所以就占⼀⾏了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。