@EncyKe 2016-04-29T02:01:55.000000Z 字数 25625 阅读 8117

Bootstrap【基础篇】

前端 CSS

Bootstrap【基础篇】

一、简介

1. 官网

v.2：支持广泛浏览器，兼容性包袱，功能不够激进，代码不够简洁；v.2.中文文档。
v.3：放弃IE 7&FF 3.x；v.3.中文文档。

2. 特点

移动优先的前端响应式框架；
以极少量的代码实现多终端的页面适配；
可以帮助解决低端浏览器不支持CSS3的问题；
解决了不同分辨率上网页布局的展示；

3. 方法

下载至本地或引用CDN；
框架

bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
├── js/
│ ├── bootstrap.js
│ ├── bootstrap.min.js
└── img/
├── glyphicons-halflings.png
└── glyphicons-halflings-white.png

4. 注意

class命名不可与Bootstrap默认的有冲突；
jQuery必须在Bootstrap之前引用；
对IE 8和9需引入respond.js（因其不支持媒介查询）；
需把respond.js与网站部署在同一域下；

5. 模板

1) html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap的HTML标准模板</title>   
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <!--你自己的样式文件 -->
        <link href="css/your-style.css" rel="stylesheet">        
        <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <h1>Hello, world!</h1>
        <!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
        <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
    </body>
</html>

2) normalize.css

html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}
body {
  margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}
audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
[hidden],
template {
  display: none;
}
a {
  background: transparent;
}
a:active,
a:hover {
  outline: 0;
}
abbr[title] {
  border-bottom: 1px dotted;
}
b,
strong {
  font-weight: bold;
}
dfn {
  font-style: italic;
}
h1 {
  margin: .67em 0;
  font-size: 2em;
}
mark {
  color: #000;
  background: #ff0;
}
small {
  font-size: 80%;
}
sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}
sup {
  top: -.5em;
}
sub {
  bottom: -.25em;
}
img {
  border: 0;
}
svg:not(:root) {
  overflow: hidden;
}
figure {
  margin: 1em 40px;
}
hr {
  height: 0;
  -moz-box-sizing: content-box;
       box-sizing: content-box;
}
pre {
  overflow: auto;
}
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font: inherit;
  color: inherit;
}
button {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}
button[disabled],
html input[disabled] {
  cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}
input {
  line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
input[type="search"] {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
  -webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
fieldset {
  padding: .35em .625em .75em;
  margin: 0 2px;
  border: 1px solid #c0c0c0;
}
legend {
  padding: 0;
  border: 0;
}
textarea {
  overflow: auto;
}
optgroup {
  font-weight: bold;
}
table {
  border-spacing: 0;
  border-collapse: collapse;
}
td,
th {
  padding: 0;
}
@media print {
  * {
    color: #000 !important;
    text-shadow: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
  select {
    background: #fff !important;
  }
  .navbar {
    display: none;
  }
  .table td,
  .table th {
    background-color: #fff !important;
  }
  .btn > .caret,
  .dropup > .btn > .caret {
    border-top-color: #000 !important;
  }
  .label {
    border: 1px solid #000;
  }
  .table {
    border-collapse: collapse !important;
  }
  .table-bordered th,
  .table-bordered td {
    border: 1px solid #ddd !important;
  }
}

二、排版

1. 文本

1) 标题

A 标题

Bootstrap：<h1>~<h6>。

a. 重置margin-top和margin-bottom的值， h1~h3重置后的值都是20px；h4~h6重置后的值都是10px；
b. 所有标题的行高都是1.1（也就是font-size的1.1倍）,而且文本颜色和字体都继承父元素的颜色和字体；
c. 固定不同级别标题字体大小，h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px；

B 非标题元素

Bootstrap：定义了.h1~.h6六个类名，为了让非标题元素和标题使用相同的样式。
使用方法：<div class="h1">Bootstrap标题一</div>

C 副标题

Bootstrap：使用了<small>标签来制作副标题。

a. 行高都是1，而且设置了font-weight: normal成常规效果（不加粗），同时颜色被设置为灰色（#999）。
b. 由于<small>内的文本字体在h1~h3内，其大小都设置为当前字号的65%；而在h4~h6内的字号都设置为当前字号的75%。

使用方法：<h1>Bootstrap标题一<small>我是副标题</small></h1>

2) 段落

Bootstrap：为正文文本设置了一个全局的文本样式。

a. 全局文本字号为14px；
b. 行高为1.42857143，大约是20px；
c. 颜色为深灰色（#333）；
d. 字体为"Helvetica Neue", Helvetica, Arial, sans-serif。该设置都定义在<body>元素上，由于这几个属性都是继承属性，所以Web页面中文本（包括段落p元素）如无重置都会具有这些样式效果。

为了让段落p元素之间具有一定的间距，特意设置了p元素的margin值（默认情况之下，p元素具有一个上下外边距，并且保持一个行高的高度），即段后间距。

3) 强调

Bootstrap：对一些重要的希望突出强调的部分文本做了一些轻量级的处理。

A 强调块状段落

其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。

使用方法：由p.lead实现：
<p class="lead">突出段落。</p>

B 颜色强调内联文本

Bootstrap：除了使用标签<strong>、<em>等说明正文某些字词、句子的重要性。还定义了一套通过颜色来表示强调类名：

.text-muted：提示，使用浅灰色（#999）；
.text-primary：主要，使用蓝色（#428bca）；
.text-success：成功，使用浅绿色(#3c763d)；
.text-info：通知信息，使用浅蓝色（#31708f）；
.text-warning：警告，使用黄色（#8a6d3b）；
.text-danger：危险，使用褐色（#a94442）；

4) 粗体

Bootstrap：使用<b>和<strong>标签让文本直接加粗。

5) 斜体

Bootstrap：除了给元素设置样式font-style: italic实现之外，还可以通过使用标签<em>或<i>来实现。

6) 对齐

Bootstrap：通过定义四个类名来控制文本的对齐风格：

.text-left：左对齐
.text-center：居中对齐
.text-right：右对齐
.text-justify：两端对齐

2. 列表

Bootstrap根据平时的使用情形提供了六种形式的列表，对于无序和有序列表，只是在margin上做了一些调整。

1) 无序列表

2) 有序列表

3) 去点列表

去除默认的列表样式的风格。同时，列表默认的左边内距也清零了。

使用方法：ul.list-unstyled

4) 内联列表

把垂直列表换成水平列表，去掉项目符号（编号），保持水平显示。可以说内联列表就是为制作水平导航而生。

使用方法：ul.list-inline

5) 定义列表

Bootstrap只是调整了定义列表的行距，外边距和字体加粗效果。

6) 水平定义列表（响应式）

水平定义列表就像内联列表一样，给定义列表实现水平显示效果。
此处添加了一个媒体查询。也就是说，只有屏幕大于768px的时候，.dl-horizontal才具有水平定义列表效果。其实现主要方式：
a. 将dt设置了一个左浮动，并且设置宽度为160px；
b. 将dd设置一个margin-left: 180px，达到水平的效果；
c. 当标题宽度超过160px时，将会显示三个省略号；

使用方法：dl.dl-horizontal

3. 代码

Bootstrap：提供了三种代码风格：
a. <code>：一般是针对于单个单词或单个句子的代码；
b. <pre>：一般是针对于多行代码（也就是成块的代码）；
c. <kbd>:一般是表示用户要通过键盘输入的内容。

注意：
a. 不管使用哪种代码风格，在代码中碰到小于号（<）要使用硬编码<来替代，大于号(>)使用>来替代。
b. 对<pre>代码块风格，标签前面留多少个空格，在显示效果中就会留多少个空格。在编写HTML标签时就该控制好。
c. 有时候<pre>代码太多，不想让其占有太大的页面篇幅，就要控制代码块的大小，只需要使用pre.pre-scrollable，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。

4. 表格

Bootstrap：提供1种基础样式和4种附加样式以及1个支持响应式的表格。

.table：基础表格；
.table-striped：斑马线表格；
.table-bordered：带边框的表格；
.table-hover：鼠标悬停高亮的表格；
.table-condensed：紧凑型表格；
.table-responsive：响应式表格；

HTML：表格结构

<table>
    <thead>
        <tr>
            <th>表格标题</th>
            …
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>表格单元格</td>
            …
        </tr>
         …
    </tbody>
</table>

0) 行元素tr

Bootstrap：为<tr>提供了五种不同的行元素类名，每种类名控制了行的不同背景颜色。
此处输入图片的描述
使用方法：

<tr class="active">
    <td>…</td>
</tr>

1) 基础表格

a. 给表格设置了margin-bottom: 20px以及设置单元内距；
b. 在thead底部设置了一个2px的浅灰实线；
c. 每个单元格顶部设置了一个1px的浅灰实线；

示例：

使用方法：<table class="table table-striped"></table>

2) 斑马线表格

与基础表格相比，仅是在tbody隔行有一个浅灰色的背景色。对于IE8以及其以下浏览器，没有背景条纹效果。

示例：

使用方法：<table class="table table-striped"></table>

3) 带边框的表格；

这种表格效果使所有单元格具有一条1px的边框。

示例：

使用方法：<table class="table table-bordered"></table>

4) 鼠标悬停高亮的表格

当鼠标悬停在表格的行上面有一个高亮的背景色，当你鼠标悬浮在某一单元格上时，单元格所在行的背景色都会变成浅灰色。

示例：

使用方法：<table class="table table-hover"></table>

5) 紧凑型表格

单元格没内距或者内距较其他表格的内距更小。Bootstrap中紧凑型的表格与基础表格差别不大，因为只是将单元格的内距由8px调至5px。

示例：

使用方法：<table class="table table-condensed"></table>

6) 响应式表格

响应式表格效果表现为：当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时，表格底部水平滚动条就会消失。

示例：
（宽屏效果）

（窄屏效果）

使用方法：<table class="table table-responsive"></table>

特别提示：
a. 基础表格以外的5种表格均是在基础表格的基础上添加类名的；
b. 除了.active之外，其他四个类名和.table-hover配合使用时，Bootstrap针对这几种样式也做了相应的悬浮状态的样式设置，所以如果需要给tr元素添加其他颜色样式时，在.table-hover表格中也要做相应的调整；

5. 表单

HTML：表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。

Bootstrap：并未对表单做太多的定制性效果设计，仅仅对表单内的fieldset、legend、label标签进行了定制。主要将这些元素的margin、padding和border还有input、select、textarea等进行了细化设置。

Bootstrap定制组件效果：
a. 宽度变成了100%；
b. 设置了一个浅灰色（#ccc）的边框；
c. 具有4px的圆角；
d. 设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化；
e. 设置了placeholder的颜色为#999；

使用方法：
对组件添加类名.form-control

1) 水平表单

Bootstrap：默认表单是垂直显示风格，但很多时候我们需要的水平表单风格（标签居左，表单控件居右）。

示例：

form-horizontal主要有以下几个作用：
a. 设置表单控件padding和margin值；
b. 改变form-group的表现形式，类似于网格系统的row；

使用方法：
a. form.form-horizontal；
b. 配合Bootstrap框架的网格系统使用；

2) 内联表单

使用方法：
a. form.form-inline
b. 若要在input前面添加label时，会导致input换行显示。若必须添加这样的一个label且不想让input换行，需要将label标签也放在容器form-group中。
即form>div.form-group>(label.sr-only+input.form-control)。label.sr-only表示标签没显示就是这个样式将标签隐藏了。

示例：

3) 控件：输入框input

使用方法：input.form-contol，type属性必须。

<form role="form">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div>
</form>

4) 控件：下拉选择框select

HTML：多行选择设置multiple属性的值为multiple。
使用方法：

<select multiple class="form-control">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>

5) 控件：文本域textarea

HTML：设置rows可定义其高度，设置cols可以设置其宽度。但若设置textarea.form-control，则无需设置cols属性。

因为Bootstrap框架中的form-control样式的表单控件宽度为100%或auto。

6) 控件：复选框checkbox和单选择按钮radio

Bootstrap：checkbox和radio有点特殊，Bootstrap针对他们做了一些特殊化处理，主要是checkbox和radio与label标签配合使用会出现一些小问题（最头痛的是对齐问题）。
使用方法：

checkbox和radio均用label包起来；
checkbox和label放在一个.checkbox容器内；
radio和label放在一个.radio容器内；

<form role="form">
    <div class="checkbox">
        <label>
            <input type="checkbox" value="">
            记住密码
        </label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>
            喜欢
        </label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">
            不喜欢
        </label>
    </div>
</form>

* 水平排列：

使用方法：

水平排列checkbox：使用label.checkbox-inline；
水平排列radio：使用label.radio-inline；

7) 控件

A 控件大小

Bootstrap：提供了两个不同的类名，用来控制表单控件的高度。这两个类名是：

input-sm：让控件比正常大小更小；
input-lg：让控件比正常大小更大；
这两个类适用于表单中的input，textarea和select控件。

input-sm和input-lg仅对控件高度做了处理。但往往很多时候，我们需要控件宽度也要做一定的变化处理。这个时候就要借住Bootstrap框架的网格系统。

B 控件焦点状态

焦点状态：表示可以输入或选择东西；

使用方法：由伪类:focus来实现。需要给控件添加类名form-control。

注意：在Bootstrap框架中，file、radio和checkbox控件在焦点状态下的效果也与普通的input控件不太一样。

C 控件禁用状态

禁用状态：表示不可以输入或选择东西；

使用方法：添加属性disabled。需要给控件添加类名form-control。

D 控件验证状态

验证状态：告知操作是否正确等。

.has-warning：警告状态（黄色）；
.has-error：错误状态（红色）；
.has-success：成功状态（绿色）；

使用方法：只需在form-group容器上对应添加状态类名即可。

验证状态icon

icon都居右。在Bootstrap的小图标都是使用@font-face来制作（后面的内容中将会着重用一节内容来介绍）。

使用方法：
a. 在对应的状态下添加类名has-feedback，此类名要与has-error、has-warning和has-success在一起。
b. 再在相应位置添加：

<span class="glyphiconglyphicon-warning-sign form-control-feedback">
</span>

E 表单提示信息

使用方法：用span.help-block包含提示信息，置于控件底部。

水平显示：
在v2.x版本中还提供了一个行内提示信息，其使用了类名help-inline。一般让提示信息显示在控件的后面，也就是同一水平显示。如果你想在v3.x版本也有这样的效果，你可以添加这段代码：

.help-inline{
  display:inline-block;
  padding-left:5px;
  color: #737373;
}

6. 图片

Bootstrap：对于图像的样式风格提供以下几种风格：

img-responsive：响应式图片，主要针对于响应式设计；
img-rounded：圆角图片；
img-circle：圆形图片；
img-thumbnail：缩略图片；

注意：
a. 图片大小：由于样式没有对图片做大小上的样式限制，所以在实际使用的时候，需要通过其他的方式来处理图片大小。比如说控制图片容器大小。（注意不可以通过css样式直接修改img图片的大小，这样操作就不响应了）
b. 对于圆角图片和圆形图片效果，因为是使用了CSS3的圆角样式来实现的，所以注意对于IE8以及其以下版本不支持，是没有圆角效果的。

7. 图标

图标是指Web制作中常看到的小icon图标，Bootstrap框架中也为大家提供了近200个不同的icon图片，而这些图标都是使用CSS3的@font-face属性配合字体来实现的icon效果。

示例：

图标名称目录

使用方法：所有icon都是以glyphicon-前缀的类名开始，然后后缀表示图标的名称。

注意：除了使用glyphicon.com提供的图标之外，还可以使用第三方为Bootstrap框架设计的图标字体，如Font Awesome等。

三、栅格布局

Bootstrap：宽度平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。

使用方法：
a. div.container>div.row>div.col_(设备宽度代号)_(栏数)>内容；
b. div.col_(设备宽度代号)_(栏数)以padding撑开，第一以及最后一个元素设置负的margin，抵消padding影响；
c. div.col_(设备宽度代号)_(栏数)：Bootstrap框架的网格系统中有四种基本类型(超小屏-768px-小屏- 992px-中屏-1220px-大屏)：
此处输入图片的描述

工作原理：

a. 最外边框，带有一大片白色区域，就是相当于浏览器的可视区域。
b. 1是div.container。对不同分辨率，其宽度也不同：自动、750px、970px和1170px。
c. 2是将div.row平分了12等份，也就是列。每个列都有一个padding-left:15px(粉色部分)和一个padding-right:15px(紫色部分)。这样也导致了第一个列的padding-left和最后一列的padding-right占据了总宽度的30px，从而致使页面不美观，当然，如果你需要留有一定的间距，这个做法是不错的。
d. 3就是div.row,其定义了margin-left和margin-right值为-15px，用来抵消第一个列的左内距和最后一列的右内距。
e. 将行与列给合在一起就能看到4的效果。也就是我们期望看到的效果，第一列和最后一列与div.container之间没有间距。

1. 列偏移

有的时候，我们不希望相邻的两个列紧靠在一起，但又不想使用margin或者其他的技术手段来。这个时候就可以使用列偏移offset功能来实现。
使用方法：在要偏移的地方插入div.col-md-offset-*(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。

2. 列排序

列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。
使用方法：col-md-push-*和col-md-pull-* (其中星号代表移动的列组合数)。

3. 列嵌套

Bootstrap框架的网格系统还支持列的嵌套。可以在一个div.col-*-*中添加一个或者多个div.row，然后在这个行容器中插入div.col-*-*（像前面介绍的一样使用列）。

四、组件

注意： Bootstrap已高度组件化，不要随意尝试重新开发；

1. 按钮

HTML：按钮通常使用下面代码来实现：input[type="submit"]、input[type="button"]、input[type="reset"]、<button>。

Bootstrap：按钮除了使用<button>标签元素之外，还可以使用<input type="submit">、<a>、<div>和<span>标签等，还可以使用在其他的标签元素上，但一定必须添加类名btn。

注意：虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格，但为避免浏览器兼容性问题，强烈建议使用button或a标签来制作按钮。

示例：
定制：http://getbootstrap.com/css/#buttons

1) 基本按钮

Bootstrap：v3.x版本的基本按钮和v2.x版本的基本按钮一样，都是通过类名btn来实现。

不同的是在v3.x版本要简约很多，去除了v2.x版本中的大量的CSS3中的部分特效，比如说文本阴影text-shadow、渐变背景background-image、边框阴影box-shadow等。
Bootstrap考虑了不同浏览器的解析差异，进行了比较安全的兼容性处理，使按钮效果在不同的浏览器中所呈现的效果基本相同。

使用方法：<button class="btn" type="button">我是一个基本按钮</button>。

2) 默认按钮

默认按钮的风格就是在基础按钮的风格的基础上修改了按钮的背景颜色、边框颜色和文本颜色。

使用方法：<button class="btn btn-default"></button>

3) 其它风格

使用方法：
此处输入图片的描述

4) 按钮大小

在Bootstrap框架中控制按钮的大小都是通过修改按钮的padding、line-height、font-size和border-radius几个属性。

使用方式：
此处输入图片的描述

5) 块状按钮

按钮宽度充满整个父容器width:100%，且这个按钮不会有任何的padding和margin值。

使用方法：使用btn-block。

6) 按钮状态

A 活动状态

Bootstrap：按钮的状态效果主要分为两种：活动状态和禁用状态。其活动状态主要包括按钮的悬浮状态:hover，点击状态:active和焦点状态:focus几种。

B 禁用状态

Bootstrap：与input等表单控件一样，按钮也具有禁用状态的设置。

禁用状态与其他状态按钮相比，就是背景颜色的透明度做了一定的处理，opcity的值从100%调整为65%。

使用方法：
方法一：在标签中添加disabled属性；
方法二：在元素标签中添加类名disabled；

主要区别：
.disabled样式不会禁止按钮的默认行为，比如说提交和重置行为等。如果想要让这样的禁用按钮也能禁止按钮的默认行为，则需要通过JavaScript这样的语言来处理。对于a.disable禁用按钮，其链接行为是无法禁止。
而在元素标签中添加disabled属性的方法是可以禁止元素的默认行为的。

7) 按钮组

在按钮组中的按钮，除了第一个和最后一个具有边上的圆角之外，其他的按钮没有圆角。

使用方法：
a. 按钮组和下拉菜单组件一样，需要依赖于button.js插件才能正常运行。不过可直接只调用bootstrap.js文件。因为这个文件已集成了button.js插件功能。
b. HTML结构中使用一个div.btn-group，把多个按钮放到这个容器中。按钮不管使用什么标签，div.btn-group中的标签元素需要带有类名.btn。

8) 按钮工具栏

每一div.btn-group元素都将浮动，并且组与组之前保持5px的左外距。

使用方法：将div.btn-group放在一个div.btn-toolbar中，且要在btn-toolbar上清除浮动。

大小设置：
Bootstrap：类似按钮的btn-lg、btn-sm和btn-xs，按钮组的大小调整：

.btn-group-lg：大按钮组；
.btn-group-sm：小按钮组；
.btn-group-xs：超小按钮组；
注意：需要在.btn-group上追加。

9) 嵌套分组

Bootstrap：常把下拉菜单和普通的按钮组排列在一起，实现类似于导航菜单的效果。
使用方法：把下拉菜单的dropdown的容器换成btn-group，并且和普通的按钮放在同一级：div.btn-group>(button.btn.btn-default.dropdown-toggle+ul.dropdown-menu>li)

10) 垂直分组

把水平分组的btn-group类名换成btn-group-vertical即可实现垂直分组。

与水平分组的区别：
a. 水平分组按钮第一个按钮左上角和左下角具有圆角以及最后一个按钮右上角和右下角具有圆角；
b. 垂直分组按钮第一个按钮左上角和右上角具有圆角以及最后一个按钮左下角和右下角具有圆角；

11) 等分分组

Bootstrap：等分按钮组的效果在移动端上特别的实用。整个按钮组宽度是容器的100%，而按钮组里面的每个按钮平分整个容器宽度。等分按钮组也常被称为是自适应分组按钮。

使用方法：只需在按钮组btn-group上追加一个btn-group-justified类名。

注意：在制作等分按钮组时，请尽量使用<a>标签元素来制作按钮，因为使用<button>标签元素时，使用display:table在部分浏览器下支持并不友好。

12) 向下向上三角形

使用方法：

向下三角形：button>span.caret；
向上三角形：div.btn-group.dropup>button>span.caret；

2. 下拉菜单

在使用Bootstrap框架的下拉菜单时，必须调用Bootstrap框架提供的bootstrap.js文件。
若使用的是未编译版本，可直接调dropdown.js的文件；也可可以统一调用压缩好的bootstrap.min.js文件：

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

注意：因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件，所以在使用bootstrap.min.js之前一定要先加载jquery.min.js才会生效果。

使用方法：次序很重要：
a. 使用一个<div class="dropdown"></div>包裹了整个下拉菜单元素；
b. 使用一个<button class="dropdown-toggle" type="button" data-toggle="dropdown"></button>做为父菜单，其data-toggle属性必须和最外容器类名一致；
c. 下拉菜单项使用一个ul.dropdown-menu；
即，div.dropdown>(button.dropdown-toggle+ul.dropdown-menu>li)；

1) 菜单分割线

使用方法：空的li.divider可实现下拉分隔线的功能。

2) 菜单标题

使用方法：在li.dropdown-header中添加标题文本，可让分组更明显。

3) 对齐方式

Bootstrap：下拉菜单默认是左对齐，若要让下拉菜单相对于父容器右对齐方法如下：
使用方法：
a. 在ul.dropdown-menu上添加一个pull-right或者dropdown-menu-right；
b. 再为.dropdown添加float:leftcss；

与此同时，还有一个类名刚好与
.dropdown-menu-right相反的类名.dropdown-menu-left，其效果就是让下拉菜单与父容器左边对齐，其实就是默认效果。

4) 菜单项状态

下拉菜单项的默认的状态有悬浮状态:hover，焦点状态:focus，当前状态.active和禁用状态.disabled。后两种状态使用方法只需要在对应的菜单项上添加对应的类名。

5) 上弹菜单

使用方法：
在.btn-group上添加.dropup（当然，如果是普通向上弹出菜单，你只需要在.dropdown类名基础上追加.dropup类名即可）。

3. 标签

Bootstrap：在导航上常会添加一个新导航项，比如一个高亮显示的“New”标签，来告诉用户。这是新添加的导航项。

使用方法：在使用span这样的行内标签：
<h3>Example heading <span class="label label-default">New</span></h3>
标签内没有内容时，可以借助CSS3的:empty伪元素将其隐藏：

.label:empty {
    display: none;
}

颜色样式：和按钮元素button类似，label样式也提供了多种颜色：

label-deafult：默认标签，深灰色
label-primary：主要标签，深蓝色
label-success：成功标签，绿色
label-info：信息标签，浅蓝色
label-warning：警告标签，橙色
label-danger：错误标签，红色

4. 徽章

Bootstrap：徽章效果和前面介绍的标签效果是极其的相似。也是用来做一些提示信息使用。常出现的是一些系统发出的信息，如：未读信息条数。

使用方法：<a href="#">Inbox <span class="badge">42</span></a>
同样也可使用:empty伪元素，当没有内容的时候隐藏。

注意：不过和标签组件不一样的是：在徽章组件中没有提供多种颜色风格的效果。

5. 缩略图

Bootstrap：缩略图在网站中最常用的地方就是产品列表页面，通过thumbnail样式配合bootstrap的网格系统来实现。

使用方法：

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="" alt="">
            </a>
        </div>
    …
    </div>
</div>

在仅有缩略图的基础上，添加了一个div.caption容器，在这个容器中放置其他内容，比如说标题，文本描述，按钮等。

6. 警示框

a. 成功警示框：告诉用用户操作成功，在alert样式基础上追加alert-success样式，具体呈现的是背景、边框和文本都是绿色；
b. 信息警示框：给用户提供提示信息，在alert样式基础上追加alert-info样式，具体呈现的是背景、边框和文本都是浅蓝色；
c. 警告警示框：提示用户小心操作（提供警告信息），在alert样式基础上追加alert-warning样式，具体呈现的是背景、边框、文本都是浅黄色；
d. 错误警示框：提示用户操作错误，在alert样式基础上追加alert-danger样式，具体呈现的是背景、边框和文本都是浅红色。
以上均需添加role="alert"。

使用方法：通过alert样式来实现警示框效果。

可关闭警示框：
a. 在默认的警示框里面添加一个关闭按钮<button class="close" type="button" data-dismiss="alert">×</button>；
b. 需要在基本警示框基础上添加alert-dismissable样式；
c. 在button标签中加入class="close"类，实现警示框关闭按钮的样式；
d. 要确保关闭按钮元素上设置了自定义属性：data-dismiss="alert"（因为可关闭警示框需要借助于js来检测该属性，从而控制警示框的关闭）；

警示框中的链接
Bootstrap框架是通过给警示框加的链接添加一个a.alert-link，通过“alert-link”样式给链接提供高亮显示。

7. 媒体对象

Bootstrap：左边居左（或居右），内容居右（或居左）排列，常常称为媒体对象。媒体对象一般是成组出现，而一组媒体对象常常包括以下几个部分：
a. 媒体对像的容器：常使用.media类名表示，用来容纳媒体对象的所有内容；
b. 媒体对像的对象：常使用.media-object表示，就是媒体对象中的对象，常常是图片；
c. 媒体对象的主体：常使用.media-body表示，就是媒体对像中的主体内容，可以是任何元素，常常是图片侧边内容；
d. 媒体对象的标题：常使用.media-heading表示，就是用来描述对象的一个标题，此部分可选；
除了上面四个部分之外，在Bootstrap框架中还常常使用pull-left或者pull-right来控制媒体对象中的对象浮动方式。
即，div.media>(a.pull-*>img.media-object+div.media-body>h*.media-heading)

媒体对象列表
HTML：在很多时候，我们还会碰到一个列表，每个列表项都和媒体对象长得差不多，如评论列表。
使用方法：针对上图的媒体对象列表效果，Bootstrap框架提供了一个列表展示的效果，可用ul.media-list>li.media。

8. 进度条

Bootstrap：对于进度条提供一个100%宽度的背景色，然后个高亮的色表示完成进度。。

使用方法：div.progress>div.progress-bar样式。其中progress用来设置进度条的容器样式，而progress-bar用于限制进度条的进度。

<div class="progress">
    <div class="progress-bar" style="width:40%">
    </div>
</div>

优化代码：
虽然这样实现了基本进度条效果，但对于残障人员浏览网页有点困难，所以我们可以将结构做得更好些（语义化更友好些）：

<div class="progress">
    <div class="progress-bar" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
        <span class="sr-only">
            40% Complete
        </span>
    </div>
</div>

a. role属性作用：告诉搜索引擎这个div的作用是进度条；
b. aria-valuenow="40"属性作用：当前进度条的进度为40%；
c. aria-valuemin="0"属性作用：进度条的最小值为0%；
d. aria-valuemax="100"属性作用：进度条的最大值为100%；

1) 彩色进度条

Bootstrap：提供彩色进度条，其主要包括以下四种：
a. progress-bar-info：表示信息进度条，进度条颜色为蓝色；
b. progress-bar-success：表示成功进度条，进度条颜色为绿色；
c. progress-bar-warning：表示警告进度条，进度条颜色为黄色；
d. progress-bar-danger：表示错误进度条，进度条颜色为红色；

使用方法：div.progress>div.progress-bar.对应的类名。

2) 条纹进度条

Bootstrap：提供一种条纹进度条，这种条纹进度条采用CSS3的线性渐变来实现。条纹进度条和彩色进度条可以混合使用。
使用方法：div.progress+.progress-striped>div.progress-bar.对应的类名

3) 动态条纹进度条

使用方法：在进度条div.progress+.progress-striped两个类的基础上再加入active类名。

4) 层叠进度条

Bootstrap：提供了一种层叠进度条，可以将不同状态的进度条放置在一起，按水平方式排列。支持彩色和条纹交错，但总计不可超过100%。

5) 带数字的进度条

使用方法：直接在div中设置数值即可：

<div class="progress">
    <div class="progress-bar progress-bar-success"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div>
</div>

注意：有一种特殊情形，当进度条处于开始位置，也就是进度条的值为0%时，内容并不能撑开一定的宽度，即进度条不具有颜色。而Bootstrap v3.2有这一样式，但v3.1.1版本是不具有的。

9. 列表组

Bootstrap：可用列表组制作列表清单、垂直导航等效果，也可以配合其他的组件制作出更漂亮的组件。

1) 基础列表组

HTML：基础列表组，看上去就是去掉了列表符号的列表项，并且配上一些特定的样式。
Bootstrap：基础列表组主要包括两个部分：
a. list-group：列表组容器，可以是ul，ol或者div元素；
b. list-group-item：列表项，可以是li和div元素；

2) 带徽章的列表组

Bootstrap：其实就是将框架中的徽章组件和基础列表组结合在一起的一个效果。

使用方法：只需要在list-group-item中添加徽章组件badge。

3) 带链接的列表组

使用方法：用div.list-group替换ul.list-group，而用a.list-group-item替换li.list-group-item，这样就可以达到块状hover的效果。

4) 自定义列表组

Bootstrap：在链接列表组的基础上新增了两个样式：

list-group-item-heading：用来定义列表项头部样式；
list-group-item-text：用来定义列表项主要内容；

5) 列表项的状态设置

使用方法：在列表组中只需要在对应的列表项中添加类名：

active：表示当前状态；
disabled：表示禁用状态；

6) 多彩列表组

使用方法：可以使用下列几个类名定义不同背景色的列表项：

list-group-item-success：成功，背景色绿色；
list-group-item-info：信息，背景色蓝色；
list-group-item-warning：警告，背景色为黄色；
list-group-item-danger：错误，背景色为红色；
如果你想给列表项添加什么背景色，只需要在list-group-item基础上增加对应的类名。

10. 面板

Bootstrap：面板(Panels)是新增组件，其主要作用就是用来处理一些其他组件无法完成的功能。

1) 基础面板

基础面板非常简单，就是一个div.panel，产生一个具有边框的文本显示块。由于panel不控制主题颜色，所以在panel的基础上增加一个控制颜色的主题panel-default，另外在里面添加了一个div.panel-body来放置面板主体内容。
使用方法：

<div class="panel panel-default">
    <div class="panel-body">我是一个基础面板，带有默认主题样式风格</div>
</div>

2) 带有头和尾的面板

Bootstrap：为丰富面板的功能，特意为面板增加“面板头部”和“页面尾部”的效果：

panel-heading：用来设置面板头部样式；
panel-footer：用来设置面板尾部样式；

3) 彩色面板

面板的主题样式包括以下几种主题样式：

这几个样式只是改变了面板的背景色、文本和边框颜色。

使用方法：只需要在panel的类名基础上增加自己需要的类名。

panel-primary：重点蓝；
panel-success：成功绿；
panel-info：信息蓝；
panel-warning：警告黄；
panel-danger：危险红；

4) 面板中嵌套表格/列表

Bootstrap：可以把面板理解为一个区域，在panel-body放置需要的内容，可能是图片、表格或者列表等。

优化代码：
在实际应用运中，表格/列表和面板边缘可以不需要有任何的间距。但由于panel-body设置了一个padding：15px的值，为了实现这样的效果。我们在实际使用的时候需要把table或ul提取到panel-body外面：

<div class="panel panel-default">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">…</div>
    <table class="table table-bordered">…</table>
    <div class="panel-footer">作者：大漠</div>
</div>

五、导航 & 导航条

Bootstrap：制作导航条主要通过.nav样式。默认的.nav样式不提供导航样式，必须附加另外一个样式才会有效。

1. 标签导航

标签导航，即选项卡导航。特别是在很多内容分块显示时，使用这种选项卡来分组十分适合。

使用方法：
a. ul.nav.nav-tabs
b. 当前选中项：li.active"
有的选项卡还带有禁用状态，只需添加class="disabled"即可。

2. 胶囊导航

胶囊导航听起来有点别扭，因为其外形看起来有点像胶囊形状。但其更像我们平时看到的大众形导航。当前项高亮显示，并带有圆角效果。

使用方法：ul.nav.nav-pills

3. 垂直堆叠导航

垂直堆叠导航与胶囊形导航相比，主要是让导航项不浮动，让其垂直排列，然后给相邻导航项留有一定的间距。

使用方法：ul.nav.nav-pills.nav-stacked

垂直堆叠导航分割线：<li class=”nav-divider”></li>

注意：nav-tabs对nav-stacked在v2.x版本可以，但v3.x版本无此效果。

4. 自适应导航

自适应导航指的是导航占据容器全部宽度，而且菜单项可以像表格的单元格一样自适应宽度。

使用方法：ul.nav-justified.nav-tabs/.nav-pills

5. 二级导航（含下拉菜单）

使用方法：只需将li.dropdown当作父容器，嵌套另一个列表ul，使用前面介绍下拉菜单的方法即可。

6. 面包屑式导航（当前位置）

面包屑(Breadcrumb)一般用于导航，主要是起的作用是告诉用户现在所处页面的位置（当前位置）。以斜杠“/”分隔符。

使用方法：ol.breadcrumb

实现原理：
Bootstrap是使用li+li:before实现li与li之间的分隔符，所以这种方案在IE低版本不支持。

7. 基础导航条

导航条(navbar)相比导航(nav)，有一个背景色、而且导航条可以是纯链接（类似导航），也可以是表单，还有就是表单和导航一起结合等多种形式。在实际使用中导航条要比导航复杂得多。
.navbar样式的主要功能就是设置左右padding和圆角等效果，但他和颜色相关的样式没有进行任何的设置。

使用方法：
a. 制作列表ul.nav.navbar-nav；
b. 在列表外部添加一个div.navbar.navbar-default；
即div.navbar.navbar-default>ul.nav.navbar-nav

8. 导航条的标题、二级菜单&状态

使用方法：
标题：div.navbar-header>a.navbar-brand；
状态：悬浮:hover，焦点:focus，活动active，禁用disabled；

9. 导航条中的表单

Bootstrap：提供了navbar-form使导航条中带有搜索表单。

使用方法：div.navbar.navbar-default.navbar-form；
另有navbar-left让表单左浮动，navbar-right让元素在导航条靠右浮动对齐。
注意：浮动对齐只有当浏览器视窗宽度大于768px生效。

10. 导航条中的按钮、文本和链接

Bootstrap：提供了三种样式：
a. 导航条中的按钮navbar-btn；
b. 导航条中的文本navbar-text；
c. 导航条中的普通链接navbar-link；
注意：但这三种样式在框架中使用时受到一定的限制，需要和navbar-brand、navbar-nav配合起来使用。而且对数量也有一定的限制，一般情况在使用一到两个不会有问题，超过两个就会有问题。

11. 固定导航条

Bootstrap：提供了两种固定导航条的方式：
a. .navbar-fixed-top：导航条固定在浏览器窗口顶部；
b. .navbar-fixed-bottom：导航条固定在浏览器窗口底部；
使用方法：只需要在导航条最外部容器div.navbar上追加对应的类名即可。

注意：
为了避免固定导航条遮盖内容，我们需要在body上做一些处理：

body {
  padding-top: 70px;/*有顶部固定导航条时设置*/
  padding-bottom: 70px;/*有底部固定导航条时设置*/
}

因为固定导航条默认高度是50px，我们一般设置padding-top和padding-bottom的值为70px，当然有的时候还是需要具体情况具体分析。
或者：
把固定导航条都放在页面内容前面：

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
　…
</div>
<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
　…
</div>
<div class="content">我是内容</div>

在文件中添加下列样式代码：

.navbar-fixed-top ~ .content {
   padding-top: 70px;
}
.navbar-fixed-bottom ~ .content {
  padding-bottom: 70px;
}

当然，这种方法有的时候也是需要具体情况具体分析的。

12. 响应式导航条

效果（可参考Bootstrap官网）：

宽屏效果

中屏效果

窄屏效果

使用方法：
a. 保证在窄屏时需要折叠的内容必须包裹在一个div.collapse.navbar-collapse，为这个div添加一个类名或者id名。
b. 保证在窄屏时要显示的图标样式（固定写法）：

<button class="navbar-toggle" type="button" data-toggle="collapse">
  <span class="sr-only">Toggle Navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>

c. <button data-target="类名/#id名"></button>，类名/id名由需要折叠的div来决定：

<div class="collapse navbar-collapse" id="example">
    <ul class="nav navbar-nav">
    ...
    </ul>
</div>

窄屏时显示的图标代码段：

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#example">
  ...
</button>

也可以这么写，需要折叠的div代码段：

<div class="collapse navbar-collapse example" >
    <ul class="nav navbar-nav">
    ...
    </ul>
</div>

窄屏时要显示的图标：

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".example">
  ...
</button>

示例：

<div class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
     　<!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
       <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
         <span class="sr-only">Toggle Navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
       <!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 -->
       <a href="##" class="navbar-brand">慕课网</a>
  </div>
  <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
  <div class="collapse navbar-collapse navbar-responsive-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="##">网站首页</a></li>
            <li><a href="##">系列教程</a></li>
            <li><a href="##">名师介绍</a></li>
            <li><a href="##">成功案例</a></li>
            <li><a href="##">关于我们</a></li>
        </ul>
  </div>
</div>

13. 反色导航条

Bootstrap：提供第二种风格的导航条，其变化只是导航条的背景色和文本做了修改。

使用方法：将navbar-deafult类名替换成navbar-inverse。

14. 分页导航

Bootstrap：框架中提供了两种分页导航：带页码的分页导航和带翻页的分页导航。

1) 页码分页导航

使用方法：ul.pagination>li>a：

<ul class="pagination">
   <li><a href="#">&laquo;</a></li>
   <li><a href="#">1</a></li>
   <li><a href="#">2</a></li>
   <li><a href="#">3</a></li>
   <li><a href="#">4</a></li>
   <li><a href="#">5</a></li>
   <li><a href="#">&raquo;</a></li>
</ul>

大小设置：

通过pagination-lg让分页导航变大；
通过pagination-sm让分页导航变小：

2) 翻页分页导航

这种分页导航是看不到具体的页码，只会提供一个“上一页”和“下一页”的按钮。

使用方法：ul.pager>li>a：

<ul class="pager">
   <li><a href="#">&laquo;上一页</a></li>
   <li><a href="#">下一页&raquo;</a></li>
</ul>

对齐样式：
默认情况之下，翻页分页导航是居中显示，但有的时候我们需要一个居左，一个居右：

previous：让“上一步”按钮居左；
next：让“下一步”按钮居右；

在li标签上添加对应类名即可：

<ul class="pager">
   <li class="previous"><a href="#">&laquo;上一页</a></li>
   <li class="next"><a href="#">下一页&raquo;</a></li>
</ul>