Bootstrap 警告、进度条、列表组

摘要：该部分包括警告、进度条等部分。

1.警告（alert）

1.1 基本的警告（.alert）

警告的基类是 .alert 。和其他样式类一块使用。例如: .alert-success、.alert-info、.alert-danger、.alert-warning.代码示例：

1 <div class="alert alert-success">成功</div>
2 <div class="alert alert-info">信息，请核对信息</div>
3 <div class="alert alert-warning">警告，停止操作</div>
4 <div class="alert alert-danger">发现错误，请更改</div>

显示结果如下:

1.2 可取消的警告框（.alert-dismissable）

在<div>中添加类 .alert-dismissable，并在其中添加取消按钮即可。代码示例：

1 <div class="alert alert-success alert-dismissable">
2     <button class="close" type="button" data-dismiss="alert"> &times;</button>
3     成功
4 </div>
5 <div class="alert alert-info alert-dismissable">
6     <button class="close" type="button" data-dismiss="alert"> &times;</button>
7     信息，请核对信息
8 </div>

显示如下，点击右侧的×即可取消该警告：

其中，一定要有带有data-dismiss="alert" 属性的按钮元素。

1.3 带有链接的警告（alert-link）

在带有基类 .alert 和样式类 （四个中的一个）的<div>元素中，添加锚元素，并且为该锚元素添加实体类 .alert-link 来提供匹配颜色的链接。代码示例：

1 <div class="alert alert-success alert-dismissable">
2     <button class="close" type="button" data-dismiss="alert"> &times;</button>
3     <a href="#" class="alert-link" >成功啦！</a>
4 </div>
5 <div class="alert alert-info alert-dismissable">
6     <button class="close" type="button" data-dismiss="alert"> &times;</button>
7     <a href="#" class="alert-link" >信息，请核对信息</a>
8 </div>

显示结果，鼠标悬停在链接上回出现下划线：

2.进度条（progress）

2.1 基本的进度条（progress-bar）

进度条整体包括两个部分: 进度条所在的位置  和  显示的文字（可省略）。代码示例：

1 <div class="progress">
2     <div class="progress-bar" role="progressbar" aria-valuenow="60"
3         aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
4         <span>60%</span>
5     </div>
6 </div>

其中，aria-valuenow="60"表示当前进度条的进度是60%；aria-valuemin="0"表示进度条的最小值是0；aria-valuemax="100"表示进度条的最大值是100%；

显示如下：

2.2 进度条的样式（progress-bar-* : success、info、warning、danger）

为了代码看起来简洁一些，一下代码省略aria-value*部分内容，不影响进度条的显示。四种样式的进度条代码示例:

 1 <div class="progress">
 2     <div class="progress-bar progress-bar-success" style="width:100%">
 3         <span>100%</span>
 4     </div>
 5 </div>
 6 <div class="progress">
 7     <span>50%</span>
 8     <div class="progress-bar progress-bar-info" style="width:50%"></div>
 9 </div>
10 <div class="progress">
11     <span>30%</span>
12     <div class="progress-bar progress-bar-warning" style="width:30%"></div>
13 </div>
14 <div class="progress">
15     <span>10%</span>
16     <div class="progress-bar progress-bar-danger" style="width:10%"></div>
17 </div>

显示结果如下：

2.3 带条纹的进度条（progress-striped）

在类 progress所在的容器中添加类 progress-striped.代码示例：

<div class="progress progress-striped">
    <span>50%</span>
    <div class="progress-bar progress-bar-info" style="width:50%"></div>
</div>

结果显示如下：

2.4 动画效果（active）

在上述的带有条纹的进度条中添加类 active，即可得到条纹持续滚动的动态进度条。代码示例：

1 <div class="progress progress-striped active">
2     <div class="progress-bar progress-bar-success" style="width:100%">
3         <span>100%</span>
4     </div>
5 </div>

由于图片显示不出动态效果，读者可自行运行代码，查看效果。

2.5  堆叠的进度条

多个进度条放在同一个带有类progress的容器中，就会产生堆叠的进度条，代码示例：

 1 <div class="progress progress-striped active">
 2     <div class="progress-bar progress-bar-success" style="width:50%">
 3         <span>50%</span>
 4     </div>
 5     <div class="progress-bar progress-bar-info" style="width:20%">
 6         <span>20%</span>
 7     </div>
 8     <div class="progress-bar progress-bar-warning" style="width:30%">
 9         <span>30%</span>
10     </div>
11 </div>

其中，在同一个progress的容器中，进度条的进度和要不大于100%，否则无法正常显示。

上述代码显示结果如下，其中的条纹会持续滚动：

3.列表组（list-group）

3.1 基本的列表组

列表组是把复杂的内容或者自定义的内容用列表的形式展现出来。列表组的基本结构如下，带有类.list-group的无序列表，列表项使用类.list-group-item来设置样式：

<ul class="list-group">
    <li class="list-group-item">相册</li>
    <li class="list-group-item">收藏</li>
    <li class="list-group-item">钱包</li>
    <li class="list-group-item">表情</li>
    <li class="list-group-item">设置</li>
    <li class="list-group-item">版本</li>
</ul>

显示结果如下:

3.2 带徽章的列表组（badge）

可以向任意的列表选项添加徽章组件，徽章组件会自动定位到列表项的右边。代码如下:

 1 <ul class="list-group">
 2     <li class="list-group-item">相册</li>
 3     <li class="list-group-item">收藏</li>
 4     <li class="list-group-item">钱包</li>
 5     <li class="list-group-item">表情</li>
 6     <li class="list-group-item">
 7         设置<span class="badge">新</span>
 8     </li>
 9     <li class="list-group-item">
10         版本<span class="badge">新</span>
11     </li>
12 </ul>

显示结果如下：

3.3 向列表组添加链接

代码格式：

 1 <ul class="list-group">
 2     <a href="#" class="list-group-item active">相册</a>
 3     <a href="#" class="list-group-item">收藏</a>
 4     <a href="#" class="list-group-item">钱包</a>
 5     <a href="#" class="list-group-item">表情</a>
 6     <a href="#" class="list-group-item">设置</a>
 7     <a href="#" class="list-group-item">
 8         版本<span class="badge">新</span>
 9     </a>
10 </ul>

显示结果：

3.4 想列表组添加自定义内容

代码示例（借用菜鸟教程中的示例）：

 1 <div class="list-group">
 2     <a href="#" class="list-group-item active">
 3         <h4 class="list-group-item-heading">
 4             入门网站包
 5         </h4>
 6     </a>
 7     <a href="#" class="list-group-item">
 8         <h4 class="list-group-item-heading">
 9             免费域名注册
10         </h4>
11         <p class="list-group-item-text">
12             您将通过网页进行免费域名注册。
13         </p>
14     </a>
15     <a href="#" class="list-group-item">
16         <h4 class="list-group-item-heading">
17             24*7 支持
18         </h4>
19         <p class="list-group-item-text">
20             我们提供 24*7 支持。
21         </p>
22     </a>
23 </div>
24 <div class="list-group">
25     <a href="#" class="list-group-item active">
26         <h4 class="list-group-item-heading">
27             商务网站包
28         </h4>
29     </a>
30     <a href="#" class="list-group-item">
31         <h4 class="list-group-item-heading">
32             免费域名注册
33         </h4>
34         <p class="list-group-item-text">
35             您将通过网页进行免费域名注册。
36         </p>
37     </a>
38     <a href="#" class="list-group-item">
39         <h4 class="list-group-item-heading">24*7 支持</h4>
40         <p class="list-group-item-text">我们提供 24*7 支持。</p>
41     </a>
42 </div>

显示结果：