role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"

为了残障人员设计的

Bootstrap

GitHub上这样介绍 bootstrap：

    ☑  简单灵活可用于架构流行的用户界面和交互接口的html、css、javascript工具集。

    ☑  基于html5、css3的bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档。

    ☑  自定义JQuery插件，完整的类库，基于Less等。

Bootstrap是否真的非常实用？带着这些问题，我们将完成接下来的学习旅程——玩转Bootstrap，并且通过Bootstrap构建自己的Web应用程序或者Web网站。

Bootstrap

 ☑ progress-bar-info：表示信息进度条，进度条颜色为蓝色

  ☑ progress-bar-success：表示成功进度条，进度条颜色为绿色

  ☑ progress-bar-warning：表示警告进度条，进度条颜色为黄色

  ☑ progress-bar-danger：表示错误进度条，进度条颜色为红色

将引用改成：

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>

<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

1、col-column：列；

2、xs-maxsmall：超小； sm-small：小；  md-medium：中等；  lg-large：大；

3、-*表示占列，即占自动每行row分12列栅格系统比；

4、.col-xs-*超小屏幕 手机 (<768px)，超小屏幕时使用；

     .col-sm-*小屏幕 平板 (≥768px)，小屏幕时使用；

     .col-md-*中等屏幕 桌面显示器 (≥992px)(栅格参数)，中等屏幕时使用；

     .col-lg-*大屏幕 大桌面显示器 (≥1200px)，大屏幕时使用。

5、不管在哪种屏幕上，栅格系统都会自动的每行row分12列 col-xs-*和col-sm-* 和col-md-*后面跟的参数表示在当前的屏幕中 每个div所占列数。例如 <div class="col-xs-6 col-md-3"> 这个div在屏幕中占的位置是： .col-xs-6 在超小屏幕中占6列 也就是屏幕的一半（12/6列=2个div） ，.col-md-3 在中单屏幕中占3列也就是1/4（12/3列=4个div）。

6、反推，如果我们要在小屏幕上并排显示3个div(12/3个=每个占4 列 )，则col-xs-4；在大屏幕上显示6个div(12/6个=每个占2列 ) ，则 col-md-2；这样我们就可以控制我们自己想要的什么排版了。

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

<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script><script type="text/javascript" src="http://lib.sinaapp.com/js/bootstrap/v3.0.0/js/bootstrap.min.js"></script>

新浪的库

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

另一种

所有图标查看：http://getbootstrap.com/components/#glyphicons 

对于定义列表而言，Bootstrap并没有做太多的调整，只是调整了行间距，外边距和字体加粗效果。
/*源码请查看bootstrap.css文件第594行~第607行*/

dl {
margin-top: 0;
margin-bottom: 20px;
}
dt,
dd {
line-height: 1.42857143;
}
dt {
font-weight: bold;
}
dd {
margin-left: 0;
}

1、使用一个名为“dropdown”的容器包裹了整个下拉菜单元素，示例中为:

<div class="dropdown"></div>

2、使用了一个<button>按钮做为父菜单，并且定义类名“dropdown-toggle”和自定义“data-toggle”属性，且值必须和最外容器类名一致，此示例为:

data-toggle="dropdown"

3、下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu”，此示例为:

<ul class="dropdown-menu">

Bootstrap像去点列表一样，通过添加类名“.list-inline”来实现内联列表，简单点说就是把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。也可以说内联列表就是为制作水平导航而生。

.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none;
}
.list-inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}

在Bootstrap中默认情况下无序列表和有序列表是带有项目符号的，但在实际工作中很多时候，我们的列表是不需要这个编号的，比如说用无序列表做导航的时候。Bootstrap为众多开发者考虑的非常周道，通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。

.list-unstyled {
padding-left: 0;
list-style: none;
}

除了项目编号之外，还将列表默认的左边内距也清０了。