其实，我觉得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。
