《bootstrap用户手册》读书笔记（3）

8.标签
<span>标签
.label-default;
.label-primary;
.label-success;
.label-info;
.label-warning;
.label-danger
9.徽章
<span>标签
.badge
10.缩略图
11.警示框
.alert默认警示框
.alert-success成功
.alert-info信息
.alert-warning警告
.alert-danger危险
关闭警示框
（1）在alert后加alert-dismissable;
（2）在botton后加入close类
（3）在确保关闭按钮元素设置自定义元素data-dismiss="alert";
警示框的链接
.alert-link;
12.进度条
基本样式
<div class="progress">
   <div class="progress-bar" style="width:40%"></div>
</div>
结构优化
<div class="progress">
   <div class="progress-bar" style="width:40%" 
   role="progressbar" ariavaluenow="40" ariavaluemin="0" ariavaluemax="100">
   <span class="sronly">40%complete</span>
   </div>
</div>
彩色进度条
progress-bar-info;
progress-bar-success；
progress-bar-warning；
progress-bar-danger;
条纹进度条
容器progress基础上加progress-striped；
动态条纹进度条
再加入active;
层叠进度条
一个父容器内多个bar;
带label的进度条
进度条中添加自己想要的值；
13.媒体对象
容器：.media;
对象：.media-object;
主体：.media-body;
标题：.media-heading;
pull-left,pull-right浮动；
嵌套
媒体对象列表
<ul>加media-list,<li>添加media;
14.列表组
基础列表组
<ul>加list-group;
<li>加list-group-item;
带徽章的列表组
<ul>加list-group;
<li>加list-group-item，加badge;
带链接的列表组
使用div.list-group;
a加list-group-item;
自定义列表组
.list-group-item-heading
.list-group-item-text
列表项的状态设置
.active
.disabled
多彩列表组
list-group-success;
list-group-info;
list-group-warning;
list-group-danger;
15.面板
基础面板
<div>.panel,panel-default
<div>panel-body;
带有头和尾
panel-heading,panel-footer
彩色面板
panel-primary重点蓝
panel-success成功绿
panel-info信息蓝
panel-warning警告黄
panel-danger危险红
面板嵌套表格
面板嵌套列表组