Bootstrap（四）bootstrap的各种组件

 

其实，我觉得bootstrap的精髓在于对各种组件的合理调用，一些网页基本的组件，例如顶部导航栏，左侧导航栏，底部，弹窗等等。接下来研究一下各种实用的组件。首先，讲一下bootstrap中的怪异的属性。

• data-  这个前缀的话，是HTML5的新特性，用于自定义新的数据并存储。方便js对数据进行读取。

首先，我们来看一下bootstrap的组件之图标按钮。先看效果图：

左上角的按钮就是我们的图标按钮，接下来是代码：

<button class="btn btn-default">
		<span class="glyphicon glyphicon-star"></span>
		这是一个按钮
    </button>

首先，申明glyphicon，然后将star的样式加入。

下拉菜单样式，bootstrap对其进行了封装，样式和动画都有：

代码如下：

<div class="dropdown">
		<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
			下拉菜单
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu">
			<li>
				<a href="http://imooc.com">慕课网</a>
			</li>
			<li>
				<a href="http://imooc.com">慕课网</a>
			</li>
			<li>
				<a href="http://imooc.com">慕课网</a>
			</li>
			<li>
				<a href="http://imooc.com">慕课网</a>
			</li>
		</ul>
    </div>

可以看出，我们首先使用一个class为dropdown的div来约束当前的下拉菜单，内部的结构由两个结构组成，按钮和无序列表。

首先是按钮部分。其中，出现了一个我们曾经没有遇到的class属性：dropdown-toggle。其实，在当前的状态下，这个class属性并不会有太多的影响，但是当我们需要调用js来实现下拉动作时，这个可以与js交互（建议写上）。然后出现了一个同样没有遇到过的data-toggle属性。前面我们说过，data-前缀的是自定义的属性，用于存储数据，而data-toggle是bootstrap自定义的属性，用于绑定切换动画，标准的写法是：

<div class="dropdown">   <!-- 父元素 -->
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <!-- 子元素 -->

具体的含义目前有些混乱，后期明白了之后，会进行具体修改。

button后的span用于调用出caret样式，暨向下的箭头。

接下来的ul用于画出下拉菜单中的内容框。ul的dropdown-menu样式，用于约束下拉菜单的样式。

接下来是基本的控件样式：

可以看到，左边和右边各有一个灰色的框框，里面还包含有字符：

<div class="input-group">
    	<span class="input-group-addon">$</span>
		<input type="text" name="" class="form-control">
		<span class="input-group-addon">%</span>
    </div>

很容易想到，这里面，我们使用的是span标签，其中，我们对其约束的样式是input-group-addon样式，然后写入字符就可以了。当然，我们也可以只使用一个。

导航栏样式。接下来，是我们的导航栏。导航栏一般分为这么几种，顶部，边栏，底部。在每一种导航栏中，bootstrap也给出了具体的样式，例如pills，tabs等。

上图列举了三种导航栏：tabs类型导航栏，pills导航栏，和stacked垂直导航栏：

    <!-- 导航 -->
    <!-- 基本可切换导航 -->
    <div class="dropdown">
	<ul class="nav nav-tabs">
	    <li class="active" data-toggle="dropdown">
		<a href="http://www.imooc.com">慕课网</a>
	    </li>
	    <ul class="dropdown dropdown-menu">
		<li>
    		    <a href="http://imooc.com">慕课网</a>
                </li>
		<li>
                    <a href="http://imooc.com">慕课网</a>
		</li>
		<li>
                    <a href="http://imooc.com">慕课网</a>
		</li>
		<li>
	            <a href="http://imooc.com">慕课网</a>
                </li>
            </ul>
            <li>
                <a href="http://www.imooc.com">慕课网</a>
            </li>
            <li>
                <a href="http://www.imooc.com">慕课网</a>
            </li>
        </ul>
    </div>
    
    <br>
    <!-- 胶囊导航 -->
    <ul class="nav nav-pills">
        <li class="active">
	    <a href="http://www.imooc.com">慕课网</a>
	</li>
	<li>
	    <a href="http://www.imooc.com">慕课网</a>
	</li>
	<li>
	    <a href="http://www.imooc.com">慕课网</a>
	</li>
    </ul>
    <br>
    <!-- 垂直导航 -->
    <ul class="nav nav-pills nav-stacked col-md-2">
	<li class="active">
	    <a href="http://www.imooc.com">慕课网</a>
	</li>
	<li>
	    <a href="http://www.imooc.com">慕课网</a>
        </li>
        <li>
            <a href="http://www.imooc.com">慕课网</a>
        </li>
    </ul>

第一个导航栏我们结合了下拉菜单和tabs导航栏样式（下拉菜单不会的往上翻看），其中需要注意的是，nav样式是导航栏的特有样式，nav-tabs，nav-pills是横向导航栏的样式，nav-stacked是垂直样式。

分页样式。bootstrap为用户提供了分页样式，有左右跳转，也有12345的分页样式。废话不多说，上图：

我们直接代码分析：

<nav>
    	<ul class="pager">
			<li class="previous">
				<a href="http://www.baidu.com">
					向左
				</a>
			</li>
			<li class="next">
				<a href="http://www.baidu.com">
					向右
				</a>
			</li>
    	</ul>
		<ul class="pagination">
			<li class="active">
				<a href="http://www.imooc.com">
					1
				</a>
			</li>
			<li>
				<a href="http://www.imooc.com">
					2
				</a>
			</li>
			<li>
				<a href="http://www.imooc.com">
					3
				</a>
			</li>
			<li>
				<a href="http://www.imooc.com">
					4
				</a>
			</li>
			<li>
				<a href="http://www.imooc.com">
					5
				</a>
			</li>
		</ul>
    </nav>

首先，我们用一个nav标签开头，这里有个说法，关于nav的。其实nav只适用于强调语义，并无实际的效果或是区别。要说帮助的话，就是有助于seo的优化。这里可以使用div来实现（可以不用nav，无关紧要）。

首先，第一个ul。我们可以看到其class是pager，是bootstrap为用户提供的一个分页样式，pager有两个具体的内容样式，一个previous，一个next，字面意思，前进后退。

第二个pagination，样式是12345的分页样式。

进度条样式。进度条是每一个网页都不可缺少的样式，也不没有form这么硬核，但是好像每个网站都会用到这个组件。bootstrap的整体风格很素，我比较喜欢，所以这个进度条很素很干净。接下来上图：

来来来，看代码：

<div class="progress">
		<div class="progress-bar progress-bar-striped" style="width: 60%;">
			60%
		</div>
    </div>

其实进度条只是一个包含样式的div（块），进度就是颜色填充的百分比。接下来分析一下具体的样式属性。

• progress样式   progress是声明当前外层div包裹的是进度条div，效果是一根长度布满全屏的灰色长条
• progress-bar 样式   第二层的div是对进度的修饰，progress-bar就是基本的进度条样式
• progress-bar-striped样式   第二层div的第二个样式，是使整个进度条的颜色渐变变化。

具体的颜色可以在第二层div的class中添加progress-bar-danger 等（相信大家对这些样式很熟了，触类旁通懂伐旁友）。

列表样式。列表可以说，是一个最最常用的组件了。幸运的是bootstrap给了我们快捷方式：

我们可以看到，有三行，每一行结束都有状态数字显示。直接上代码：

    <ul class="list-group col-md-4">
		<li class="list-group-item active">
			这是一个列表
			<span class="badge">
				14
			</span>
		</li>
		<li class="list-group-item disabled">
			这是一个列表
			<span class="badge">
				14
			</span>
		</li>
		<li class="list-group-item list-group-item-info">
			这是一个列表
			<span class="badge">
				14
			</span>
		</li>
    </ul>

首先，我们用一个ul来包裹全部内容，class是list-group（和form-group类似），字面意思很好理解，里面的li标签的class更好理解了，群组内的额条目，所以是list-group-item。关于状态数字显示，我们调用一个span（大家应该有所了解了什么是span），class为badge，字面意思，标记，徽章。

面板样式。面板是美化一个界面的重要组件，先看效果：

我知道很丑，但是作为一个菜鸟而言，这个面板已经很好看了，三个部分，head，body，footer。代码：

<div class="panel panel-primary">
		<div class="panel-heading text-center">
			弹出层！
		</div>
		<div class="panel-body text-center">
			这是面板的具体内容
		</div>
		<div class="panel-footer text-center">
			这是面板的注脚
		</div>
    </div>

首先老样子，先声明panel的div，然后规定panel的样式为primary。先是头部，panel-heading，text-center文字居中；接下来是panel-body；最后是panel-footer。