最近Bootstrap有点让我糊涂，在使用过程中，下拉菜单(dropdown)、按钮组(btn-group)、导航元素(nav)、导航栏(navbar)容易混淆，遂用闲暇时间琢磨琢磨（本文基于Bootstrap3）。
这几者个人理解有点递进的意思：
下拉菜单(dropdown)可以用在后3个中，组合起来可以称呼为：“按钮下拉菜单”或“导航下拉菜单”；
按钮与导航之间没有“合作使用”价值，所以没有什么联系；
导航元素(nav)，一般以导航栏(navbar)的子元素出现，作为导航栏(navbar)的一部分。
组件分类及常用属性整理的表格如下：
此表可以简单的看出：下拉菜单(dropdown)可以作为导航元素(nav)的子元素出现，导航元素(nav)又可作为导航栏(navbar)的子元素出现，层层嵌套。而控制元素(data-toggle)均可以在这些组件使用。
分别分析：
1. 下拉菜单(dropdown)：
<div class="dropdown"><button type="button" class="btn dropdown-toggle" data-toggle="dropdown">主题 <span class="caret"></span></button><ul class="dropdown-menu"><li role="presentation"><a href="#">HTML</a></li><li role="presentation"><a href="#">css</a></li><li role="presentation"><a href="#">Javascript</a></li><li role="presentation"><a href="#">Bootstrap</a></li></ul></div>
.dropdown-menu初始状态为display: none; 通过点击button按钮触发data-toggle="dropdown"，从而显示dropdown-menu，我们可以看到，data-toggle实际上是为父元素添加了一个"open"类，所以我们的.dropdown与.dropdown-menu的层级嵌套只能有一级。
2. 按钮组(btn-group)：
<div class="btn-group"><button type="button" class="btn btn-default">按钮 1</button><button type="button" class="btn btn-default">按钮 2</button><div class="btn-group"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">主题<span class="caret"></span></button><ul class="dropdown-menu"><li><a href="#">HTML</a></li><li><a href="#">css</a></li><li><a href="#">Javascript</a></li><li><a href="#">Bootstrap</a></li></ul></div></div>
按钮组主要用于将按钮对齐放在一起，值得一提的是：dropdown-menu不是必须与dropdown配合使用，但必须与data-toggle=“dropdown”配合使用。
还有一个细节挺有意思，按钮组只有两边的按钮出现了圆角效果。它们是同级元素，又没有单独的类，并且元素个数也不确定，这是怎么做到的呢？好奇的我找了下源代码，看到后不禁吓一跳，这css的伪元素运用的如此巧妙，巧妙见下图：
此外，btn-group里仍然可以嵌套btn-group，内层btn-group及其子元素在外层btn-group的圆角控制更为复杂些，这里就不再赘述，有兴趣的同学可以看下源码。
3. 导航元素(nav)：
<ul class="nav nav-tabs"><li><a href="#">Android</a></li><li class="active"><a href="#">IOS</a></li><li><a href="#">Java</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="#">HTML</a></li><li><a href="#">css</a></li><li><a href="#">Bootstrap</a></li></ul></li></ul>
导航的应用率很高，几乎每个网站都有涉及，相当于网站目录的作用。来看看Bootstrap提供的导航样式(.nav-tabs)是如何设定的。
.nav类没有设置什么独特的样式，倒是 .nav-tabs为整行设置了1像素的底部边框，导航的子元素li均左浮动。开始的时候不理解子元素li标签设置-1像素下外边距的用意，为什么a标签又设置1像素的透明边框，当看到.active类时才明白其中的用意：
.active中，子元素li的border有了颜色，但下边框仍为透明，而-1像素，正是把父元素高度减一，子元素底部透明边框正好将父元素(.nav-tabs)边框覆盖，这就形成了右图活动单元的样式。妙哉妙哉！（胶囊式导航(nav-pills)是为活动单元设置了独立的背景色，用法异曲同工）。
将下拉菜单(dropdown)作为导航元素(nav)的子元素即可形成导航下拉菜单。
我发现在Bootstrap中，ul和li标签的布局应用十分广泛，毕竟这样页面的逻辑层次更加分明，也利于搜索引擎优化。在bootstrap.css中也是大量使用了类似“ xxxx > li”的子类选择器，这也就要求我们在用Bootstrap时，不可随意使用div布局。
4. 导航栏(navbar)：（列举响应式导航栏）
<nav class="navbar navbar-default" role="navigation"><div class="container-fluid"> <div class="navbar-header"><a class="navbar-brand" href="#">web前端</a><button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#boxs"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button></div><div class="collapse navbar-collapse" id="boxs"><ul class="nav navbar-nav"><li class="active"><a href="#">HTML</a></li><li><a href="#">css</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Javascript <b class="caret"></b></a><ul class="dropdown-menu"><li><a href="#">jQuery</a></li><li><a href="#">Bootstrap</a></li><li><a href="#">Vue</a></li><li><a href="#">React</a></li><li><a href="#">Angular</a></li></ul></li></ul></div></div></nav>
到这里，我的混淆感已经烟消云散。此例，在导航栏(navbar)中，导航元素(nav)和下拉菜单(dropdown)都得到了完美的呈现。响应式导航栏在不同的分辨率有不同的呈现，并且在不改变布局的情况下，改变导航元素的显示方式等等，这些是如何实现的呢？
导航栏(navbar)的布局中，主要分为两大块div.navbar-header和div.collapse。div.navbar-header，div.collapse内部的li元素，都只在屏幕分辨率大于等于768px时左浮动，这就解释了为什么在小屏导航元素不并排显示了。
而汉堡按钮在小于768分辨率时才显示。
进入重点：
此列：响应式的导航栏在小屏幕有两个点击下拉的效果，一个是点击汉堡按钮出现一级导航元素，另一个则是点击一级导航元素中的“javascript”出现二级导航元素，后者是通过下拉菜单(dropdown)实现的，不必多说，而前者就不一样了：
再看汉堡导航这里，有个data-toggle="collapse"和 “data-target='#boxs' ”。(data-toggle用于告诉 JavaScript 需要对按钮做什么，data-target指示要切换到哪一个元素。)很显然，这个“#boxs”是指向导航元素。
点击汉堡按钮，导航栏多出了一个.in的class，从而使导航元素显示，同时还出现了aria-expanded="true"(aria-expanded:表示展开状态。默认为undefined, 表示当前展开状态未知。其它可选值：true表示元素是展开的；false表示元素不是展开的) (展开时的动画效果)。于是乎响应式导航栏就实现了。
Bootstrap框架对于一些效果实现的方式处理的很精致，也很值得我们去学习。知其然也要知其所以然，框架在熟练使用的同时也要明白其背后的运行机理。
