Bootstrap 下拉菜单dropdown、按钮组btn-group、导航元素nav、导航栏navbar

最近Bootstrap有点让我糊涂，在使用过程中，下拉菜单(dropdown)、按钮组(btn-group)、导航元素(nav)、导航栏(navbar)容易混淆，遂用闲暇时间琢磨琢磨（本文基于Bootstrap3）。

这几者个人理解有点递进的意思：

下拉菜单(dropdown)可以用在后3个中，组合起来可以称呼为：“按钮下拉菜单”或“导航下拉菜单”；

按钮与导航之间没有“合作使用”价值，所以没有什么联系；

导航元素(nav)，一般以导航栏(navbar)的子元素出现，作为导航栏(navbar)的一部分。

组件分类及常用属性整理的表格如下：

Bootstrap组件名	父元素常用类名	子元素常用类名	控制元素的属性
下拉菜单	.dropdown	.dropdown-menu	data-toggle="dropdown"
按钮组	.btn-group	.btn	data-toggle="dropdown"
导航元素	.nav / .nav-tabs	.dropdown / .active	data-toggle="dropdown"
导航栏	.navbar	.nav / .navbar-header	data-toggle="dropdown"

此表可以简单的看出：下拉菜单(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框架对于一些效果实现的方式处理的很精致，也很值得我们去学习。知其然也要知其所以然，框架在熟练使用的同时也要明白其背后的运行机理。