Bootstrap响应式组件详解（一）：导航条

例子选自https://v3.bootcss.com/components/#navbar的第一个实例

电脑上的效果：

 

手机上的效果：

隐藏了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"></span></a>
          <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"></span></a>
          <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 style=" background-color: pink; ">没有浮动</div>
<div style=" float: left;background-color: yellow; ">左浮动</div>
<div style=" background-color: pink; ">没有浮动</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的外边距，所以分布得均匀，感觉也好看。】

【关于HTML5 新增的 data-*自定义属性：http://www.runoob.com/tags/att-global-data.html

关于Bootstrap中的data-[*] 属性：https://blog.csdn.net/summerxiachen/article/details/79475961

https://v3.bootcss.com/javascript/#modals

这里的data-toggle="collapse"实现了折叠插件效果，折叠的内容是data-target="#bs-example-navbar-collapse-1"，点击该button就可以将该id对应的内容展开显示了。具体的原理要研究Bootstrap插件和Bootstrap.js

关于增强可访问性的无障碍网页应用属性aria-*：https://blog.csdn.net/initialdmg/article/details/53083411

http://www.zhangxinxu.com/wordpress/?p=2277

这里的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">

下拉菜单

【https://v3.bootcss.com/components/#dropdowns

http://caibaojian.com/bootstrap/javascript.html#dropdowns

在响应电脑的时候，下拉菜单左浮动，宽度由内容决定；响应手机的时候，取消左浮动，块级元素逐行显示；

响应电脑的时候，下拉菜单紧紧粘贴下拉按钮下面是因为用了子元素绝对定位，父元素相对定位的技术，不记得可以去复习一下，顺带也复习一下浮动元素与非浮动元素混合出现的时候是怎么排版的。

】

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%，所以就占一行了。