元素之外，还可以使用其他标签元素，比如
不管使用什么标签，“.btn-group”容器里的标签元素需要带有类名“.btn” 。
从效果图上我们可以看出，按钮组四个角都是圆角（支持CSS3的浏览器），但有的小伙伴会问，我们平常制作网页时每个按钮都是带有圆角，而在按钮组中的按钮，除了第一个和最后一个具有边上的圆角之外，其他的按钮没有圆角，它是怎么实现的呢？其实实现方法非常简单：
2. 按钮工具栏
在富文本编辑器中，将按钮组分组排列在一起，比如说复制、剪切和粘贴一组；左对齐、中间对齐、右对齐和两端对齐一组，如下图所示：
实现原理主要是让容器的多个分组“btn-group”元素进行浮动，并且组与组之前保持5px的左外距。
按钮组大小设置
3. 嵌套分组
很多时候，我们常把下拉菜单和普通的按钮组排列在一起，实现类似于导航菜单的效果。如下所示：
使用的时候，只需要把当初制作下拉菜单的“dropdown”的容器换成“btn-group”，并且和普通的按钮放在同一级。
4. 垂直分组
前面看到的示例，按钮组都是水平显示的。但在实际运用当中，总会碰到垂直显示的效果。在Bootstrap框架中也提供了这样的风格。我们只需要把水平分组的“btn-group”类名换成“btn-group-vertical”即可。
5. 等分按钮
等分按钮的效果在移动端 上特别的实用。整个按钮组宽度是容器的100%，而按钮组里面的每个按钮平分整个容器宽度。例如，如果你按钮组里面有五个按钮，那么每个按钮是20%的宽度，如果有四个按钮，那么每个按钮是25%宽度，以此类推。“btn-group”上追加一个“btn-group-justified”类名.
运行效果如下：
特别声明 ：在制作等分按钮组时，请尽量使用
6. 按钮下拉菜单
按钮下拉菜单仅从外观上看和下拉菜单效果基本上是一样的。不同的是在普通的下拉菜单的基础上封装了按钮（.btn）样式效果。简单点说就是点击一个按钮，会显示隐藏的下拉菜单。
按钮下拉菜单其实就是普通的下拉菜单，只不过把“” 标签元素换成了“” 标签元素。唯一不同的是外部容器“div.dropdown”换成了“div.btn-group”。 如下所示：
按钮下拉菜单
7. 按钮的向下向上三角形
向下标签中添加一个“”标签元素，并且命名为“caret”:按钮下拉菜单
向上
按钮下拉菜单
三、导航
1. 基础样式
导航对于一位前端人员来说并不陌生。可以说导航是一个网站重要的元素组件之一，可以便于用户查找网站所提供的各项功能服务。导航的制作方法也是千奇百怪，五花八门。
在Bootstrap框架将导航独立出来成为一个导航组件，根据不同的版本，可以找到对应的源码：
Bootstrap框架中制作导航条主要通过“.nav”样式。默认的“.nav”样式不提供默认的导航样式，必须附加另外一个样式才会有效 ，比如“nav-tabs”、“nav-pills”之类。
2. 标签形tab导航
标签形导航，也称为选项卡导航。特别是在很多内容分块显示的时，使用这种选项卡来分组十分适合。
标签形导航是通过“nav-tabs”样式来实现。在制作标签形导航时需要在原导航“nav”上追加此类名，如：
运行的效果如下所示：
实现原理非常的简单，将菜单项（li）按块显示，并且让他们在同一水平上排列，然后定义非高亮菜单的样式和鼠标悬浮效果。
一般情况之下，选项卡教会有一个当前选中项。其实在Bootstrap框架也相应提供了。假设我们想让“Home”项为当前选中项，只需要在其标签上添加类名“class="active"”即可：
运行效果如下：
除了当前项之外，有的选项卡还带有禁用状态，实现这样的效果，只需要在标签项上添加“class="disabled"”即可：
运行效果如下：
注意 ：我们看到的选项卡效果，点击菜单项就可以切换内容，如果要实现这样的效果需要配合js插件。
3. 胶囊形(pills)导航
胶囊形（pills）导航听起来有点别扭，因为其外形看起来有点像胶囊形状。但其更像我们平时看到的大众形导航。当前项高亮显示，并带有圆角效果。其实现方法和“nav-tabs”类似，同样的结构，只需要把类名“nav-tabs”换成“nav-pills”
4. 垂直堆叠的导航
在实际运用当中，除了水平导航之外，还有垂直导航，就类似前面介绍的垂直排列按钮一样。制作垂直堆叠导航只需要在“nav-pills”的基础上添加一个“nav-stacked”类名即可：
运行效果如下：
垂直堆叠导航也具有分隔线的效果，只需要添加在导航项之间添加“即可：
如果在”nav-tabs”上添加“nav-stacked”是不是也能实现垂直的标签选项导航呢？答案是 ：在bootstrap V2.x版本可以，但在Bootstrap V3.x版本将这个效果取消了，可能作者觉得垂直选择项并不太常见，也不美观吧。
5. 自适应导航
1)使用 “btn-group-justified”制作的自适应按钮组是一样的。只不过在制作自适应导航时更换了另一个类名“nav-justified”。当然他需要和“nav-tabs”或者“nav-pills”配合在一起使用。
运行效果如下：
2)实现原理
6.导航加下拉菜单（二级导航）
很多时候，在Web页面中是离不开二级导航的效果。那么在Bootstrap框架中制作二级导航就更容易了。只需要将li当作父容器，使用类名“dropdown”，同时在li中嵌套另一个列表ul，使用前面介绍下拉菜单的方法就可以：
运行效果如下：
添加“这样的一个空标签就可以出现分隔线效果
7.面包屑式导航
面包屑(Breadcrumb)一般用于导航，主要是起的作用是告诉用户现在所处页面的位置（当前位置）。在Bootstrap框架中面包屑也是一个独立模块组件：
LESS版本：对应源文件breadcrumbs.less
使用方法：
首页 我的书 《图解CSS3》
第6章 导航条、分页导航
一、基础导航条
在Bootstrap框中，导航条和导航从外观上差别不是太多，但在实际使用中导航条要比导航复杂得多。我们先来看导航条中最基础的一个——基础导航条。
使用方法： “navbar-nav”“navbar”和“navbar-default”
原理分析： “.navbar”样式的主要功能就是设置左右padding和圆角等效果 ，但他和颜色相关的样式没有进行任何的设置。而导航条的颜色都是通过“.navbar-default”来进行控制. navbar-nav样式是在导航.nav的基础上重新调整了菜单项的浮动与内外边距。 同时也不包括颜色等样式设置，而颜色和其他样式是通过配合父容器“navbar-default”来一起实现
二、为导航条添加标题、二级菜单及状态
加入导航条标题
在Web页面制作中，常常在菜单前面都会有一个标题（文字字号比其它文字稍大一些），其实在Bootstrap框架也为大家做了这方面考虑，其通过“navbar-header”和“navbar-brand”来实现。
原理分析：
导航条状态、二级菜单
同样的，在基础导航条中对菜单提供了当前状态，禁用状态，悬浮状态等效果，而且也可以带有二级菜单的导航条，
三、带表单的导航条
有的导航条中会带有搜索表单，比如新浪微博的导航条：
大家看到了“navbar-left”让表单左浮动，更好实现对齐。在Bootstrap框架中，还提供了“navbar-right”样式，让元素在导航条靠右对齐。
四、导航条中的按钮、文本和链接
Bootstrap框架的导航条中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外，还可以使用其他元素。框架提供了三种其他样式：
但这三种样式在框架中使用时受到一定的限制，需要和navbar-brand、navbar-nav配合起来使用。而且对数量也有一定的限制，一般情况在使用一到两个不会有问题，超过两个就会有问题。
五、固定导航条
很多情况之一，设计师希望导航条固定在浏览器顶部或底部，这种固定式导航条的应用在移动端开发中更为常见。Bootstrap框架提供了两种固定导航条的方式：
实现原理：
存在bug及解决方法:
解决一：
body {
padding-top: 70px;/*有顶部固定导航条时设置*/
padding-bottom: 70px;/*有底部固定导航条时设置*/
}
因为固定导航条默认高度是50px，我们一般设置padding-top和padding-bottom的值为70px，当然有的时候还是需要具体情况具体分析。
解决二：
…
…
我是内容
在文件中添加下列样式代码：
.navbar-fixed-top ~ .content {
padding-top: 70px;
}
.navbar-fixed-bottom ~ .content {
padding-bottom: 70px;
}
六、响应式导航条
应用于当浏览器屏幕变小的时候。
使用方法：
保证在窄屏时需要折叠的内容必须包裹在带一个div内，并且为这个div加入collapse、navbar-collapse两个类名。最后为这个div添加一个class类名或者id名。
保证在窄屏时要显示的图标样式（固定写法）：
Toggle Navigation
并为button添加data-target=".类名/#id名"，究竞是类名还是id名呢？由需要折叠的div来决定。如：
窄屏时显示的图标代码段：
...
(2)也可以这么写，需要折叠的div代码段：
窄屏时要显示的图标：
...
七、反色导航条
反色导航条其实是Bootstrap框架为大家提供的第二种风格的导航条，与默认的导航条相比，使用方法并无区别，只是将navbar-deafult类名换成navbar-inverse。其变化只是导航条的背景色和文本做了修改。
八、分页导航
分页导航几乎在哪个网站都可见。好的分页导航能给用户带来更好的用户体验。在Bootstrap框架中提供了两种分页导航：
1. 带页码的分页导航
带页码的分页导航，可能是最常见的一种分页导航，特别是在列表页内容超多的时候，会给用户提供分页的导航方式。在Bootstrap框架为开发者提供不同的版本：
运行效果：
注意： 要禁用当前状态和禁用状态不能点击，我们还要依靠js来实现，或者将这两状态下的a标签换成span标签。
大小设置：
大小设置实现原理：
2. 翻页分页导航
Bootstrap框架除了提供带页码的分页导航之外还提供了翻页导航。这种分页导航常常在一些简单的网站上看到，比如说个人博客，杂志网站等。这种分页导航是看不到具体的页码，只会提供一个“上一页”和“下一页”的按钮。使用方法：
对齐样式设置：
状态样式设置：
九、标签
在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息，比如说在导航上添加了一个新导航项，可能就会加一个“new”标签，来告诉用户。这是新添加的导航项。
“.label”样式来实现高亮显示。
既然他是一个独立的组件，当然在不同的版本下有不同的文件：
颜色样式设置：
十、徽章
从某种意义上来说，徽章效果和前面介绍的标签效果是极其的相似。也是用来做一些提示信息使用。常出现的是一些系统发出的信息，比如你登录你的twitter后，如果你信息没有看，系统会告诉你有多少信息未读，如下图所示：
“badge”样式来实现。
对应的文件版本：
使用方法：num Inbox 42
第7章 其它内置组件
一、缩略图
缩略图在网站中最常用的地方就是产品列表页面，一行显示几张图片，有的在图片底下（左侧或右侧）带有标题、描述等信息。Bootstrap框架将这一部独立成一个模块组件。并通过“thumbnail”样式配合bootstrap的网格系统来实现。可以将产品列表页变得更好看。
使用方法： thumbnail ”样式配合bootstrap的网格系统 来实现。
可以让缩略图配合标题、描述内容，按钮等：
在仅有缩略图的基础上，添加了一个div名为“caption“的容器，在这个容器中放置其他内容，比如说标题，文本描述，按钮等：
二、警示框
在网站中，网页总是需要和用户一起做沟通与交流。特别是当用户操作上下文为用户提供一些有效的警示框，比如说告诉用户操作成功、操作错误、提示或者警告等。如下图所示：
（1）默认警示框
Bootstrap框架通过“alert“样式来实现警示框效果。在默认情况之下，提供了四种不同的警示框效果：“alert-success”样式，具体呈现的是背景、边框和文本都是绿色；“alert-info”样式，具体呈现的是背景、边框和文本都是浅蓝色；“alert-warning”样式，具体呈现的是背景、边框、文本都是浅黄色；“alert-danger”样式，具体呈现的是背景、边框和文本都是浅红色。
（2）可关闭的警示框
大家在平时浏览网页的时候，会发现一些警示框带有关闭按钮，用户一点击关闭按钮就能自动关闭显示的警示框（也就是让警示框隐藏不显示）。在Bootstrap框架中的警示框也具有这样的功能。
使用方法： “alert-dismissable”样式。class="close"类，实现警示框关闭按钮的样式。“data-dismiss="alert"”（因为可关闭警示框需要借助于Javascript来检测该属性，从而控制警示框的关闭）。
×
恭喜您操作成功！
×
请输入正确的密码
×
您已操作失败两次，还有最后一次机会
×
对不起，您输入的密码有误
（3）警示框的链接
有时候你可能想在警示框中加入链接地址，用来告诉用户跳到某一个地方或新的页面。而这个时候你又想让用户能明显的看出来这是链接地址。在Bootstrap框架中对警示框里的链接样式做了一个高亮显示处理。为不同类型的警示框内的链接进行了加粗处理，并且颜色相应加深。
实现方法：
三、进度条
在网页中，进度条的效果并不少见，比如一个评分系统，比如加载状态等。就如下图所示的一个评分系统，他就是一个简单的进度条效果：
（1）基本样式
Bootstrap框架中对于进度条提供了一个基本样式，一个100%宽度的背景色，然后个高亮的色表示完成进度。其实制作这样的进度条非常容易，一般是使用两个容器，外容器具有一定的宽度，并且设置一个背景颜色，他的子元素设置一个宽度，比如完成度是30%（也就是父容器的宽度比例值），同时给其设置一个高亮的背景色。
使用方法：
运行效果如下：
结构优化：
1、role属性作用：告诉搜索引擎这个div的作用是进度条。
（2）彩色进度条
Bootstrap框架中的进度条和警告信息框一样，为了能给用户一个更好的体验，也根据不同的状态配置了不同的进度条颜色。在此称为彩色进度条，其主要包括以下四种：
☑ progress-bar-info：表示信息进度条，进度条颜色为蓝色
☑ progress-bar-success：表示成功进度条，进度条颜色为绿色
☑ progress-bar-warning：表示警告进度条，进度条颜色为黄色
☑ progress-bar-danger：表示错误进度条，进度条颜色为红色
（3）条纹进度条
在Bootstrap框架中除了提供了彩色进度条之外，还提供了一种条纹进度条，这种条纹进度条采用CSS3的线性渐变来实现，并未借助任何图片。使用Bootstrap框架中的条纹进度条只需要在进度条的容器“progress”基础上增加类名“progress-striped”，当然，如果你要让你的进度条条纹像彩色进度一样，具有彩色效果，你只需要在进度条上增加相应的颜色类名，如前面的彩色进度条所讲。
（4）动态条纹进度条
使用方法： “progress progress-striped”两个类的基础上再加入“active”类名。如下代码：
实现原理：
了解CSS3的同学都知道，@keyframes仅仅是创建了一个动画效果，如果要让进度条真正的动起来，我们需要通过一定的方式调用@keyframes创建的动画“progress-bar-stripes”，并且通过一个事件触发动画生效。在Bootstrap框架中，通过给进度条容器“progress”添加一个类名“active”，并让文档加载完成就触“progress-bar-stripes”动画生效。
特别注意 ：要让条纹进度条动起来，就需要让“progress-striped”和“active”同时运用，不然条纹进度条是不具备动效效果。
（5）层叠进度条
Bootstrap框架除了提供上述几种进度条之外，还提供了一种层叠进度条，层叠进度条，可以将不同状态的进度条放置在一起，按水平方式排列。具体使用如下：
运行效果如下：
注意: 层叠进度条宽度之和不能大于100%，大于100%就会造成下面的不良效果.
（6）带Label的进度条
上面介绍的各种进度条，都仅仅是通过颜色进度向用户传递进度值。但实际中，有很多时候是需要在进度条中直接用相关的数值向用户传递完成的进度值，在Bootstrap就为大家考虑了这种使用场景。
实现方法：
四、媒体对象
在Web页面或者说移动页面制作中，常常看到这样的效果，图片居左（或居右），内容居右（或居左）排列，如下图所示：
（1）默认媒体对象
媒体对象一般是成组出现，而一组媒体对象常常包括以下几个部分：
☑ 媒体对像的容器：常使用“media”类名表示，用来容纳媒体对象的所有内容
☑ 媒体对像的对象：常使用“media-object”表示，就是媒体对象中的对象，常常是图片
☑ 媒体对象的主体：常使用“media-body”表示，就是媒体对像中的主体内容，可以是任何元素，常常是图片侧边内容
☑ 媒体对象的标题：常使用“media-heading”表示，就是用来描述对象的一个标题，此部分可选
在Bootstrap框架中还常常使用“pull-left”或者“pull-right”来控制媒体对象中的对象浮动方式。
div class="media">
全方位深刻详解CSS3模块知识，经典案例分析，代码同步调试，让网页穿上绚丽装备！
