Bootstrap框架也给组合列表项提供了状态效果，特别是链接列表组。比如常见状态和禁用状态等。实现方法和前面介绍的组件类似，在列表组中只需要在对应的列表项中添加类名：

    active：表示当前状态

    disabled：表示禁用状态

<div class="list-group">
    <a href="##" class="list-group-item active"><span class="badge">5902</span>图解CSS3</a>

列表组--自定义列表组

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

    list-group-item-heading：用来定义列表项头部样式

    list-group-item-text：用来定义列表项主要内容

<div class="list-group">
    <a href="##" class="list-group-item">
        <h4 class="list-group-item-heading">图解CSS3</h4>//相当于标题
        <p class="list-group-item-text">..ssdscd.</p>//相当于内容
    </a>

列表组--带链接的列表组

<ul class="list-group">
    <li class="list-group-item"><a href="##">揭开CSS3的面</a>
    </li>
 这样做有一个不足之处，就是链接的点击区域只在文本上有效：
 (解决方法) 但很多时候，都希望在列表项的任何区域都具备可点击。这个时候就需要在链接标签上增加额外的样式：“display:block”；
   
  
    <div class="list-group">
    <a href="##" class="list-group-item">图解CSS3</a>
    <a href="##" class="list-group-item"><span class="badge">220</span>Sass教程</a>
    <a href="##" class="list-group-item">玩转Bootstrap</a>
</div>

列表组--带徽章的列表组

带徽章的列表组其实就是将Bootstrap框架中的徽章组件和基础列表组结合在一起的一个效果。具体做法很简单，只需要在“list-group-item”中添加徽章组件“badge”：

<ul class="list-group">
    <li class="list-group-item"><span class="badge">13</span>揭开CSS3的面
    </li>

列表组--基础列表组

基础列表组，看上去就是去掉了列表符号的列表项，并且配上一些特定的样式。在Bootstrap框架中的基础列表组主要包括两个部分：

    list-group：列表组容器，常用的是ul元素，当然也可以是ol或者div元素

    list-group-item：列表项，常用的是li元素，当然也可以是div元素

来看一个简单的示例：

<ul class="list-group">
    <li class="list-group-item">揭开CSS3的面纱</li>
    <li class="list-group-item">CSS3选择器</li>
    <li class="list-group-item">CSS3边框</li>
    <li class="list-group-item">CSS3背景</li>
    <li class="list-group-item">CSS3文本</li>
</ul>

媒体对象--媒体对象列表

使用方法：

针对上图的媒体对象列表效果，Bootstrap框架提供了一个列表展示的效果，在写结构的时候可以使用ul，并且在ul上添加类名“media-list”，而在li上使用“media”，

<ul class="media-list">
    <li class="media">
        <a class="pull-left" href="#">
            <img class="media-object" src=" " alt="...">
        </a>
        <div class="media-body">
            <h4 class="media-heading">Media Header</h4>
            <div>…</div>
        </div>
    </li>
    <li class="media">…</li>
    <li class="media">…</li>
</ul>

媒体对象--媒体对象的嵌套

从外往里看，这里有三个媒体对象，只不过是一个嵌套在另一个的里面。那么在Bootstrap框架中的媒体对象也具备这样的功能，只需要将另一个媒体对象结构放置在媒体对象的主体内“media-body”，如下所示：

媒体对象--默认媒体对象

媒体对象一般是成组出现，而一组媒体对象常常包括以下几个部分：

     媒体对像的容器：常使用“media”类名表示，用来容纳媒体对象的所有内容

    媒体对像的对象：常使用“media-object”表示，就是媒体对象中的对象，常常是图片

    媒体对象的主体：常使用“media-body”表示，就是媒体对像中的主体内容，可以是任何元素，常常是图片侧边内容

    媒体对象的标题：常使用“media-heading”表示，就是用来描述对象的一个标题，此部分可选

除了上面四个部分之外，在Bootstrap框架中还常常使用“pull-left”或者“pull-right”来控制媒体对象中的对象浮动方式。

<div class="media">
    <a class="pull-left" href="#">
        <img class="media-object" src="http://img1.sycdn.imooc.com//52e1d29d000161fe06000338-300-170.jpg" alt="...">
    </a>
    <div class="media-body">
        <h4 class="media-heading">系列：十天精通CSS3</h4>
        <div>全方位深刻详解CSS3模块知识，经典案例分析，代码同步调试，让网页穿上绚丽装备！</div>
    </div>
</div>

进度条--带Label的进度条

实现方法：

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

进度条--动态条纹进度条

在进度条“progress progress-striped”两个类的基础上再加入“active”类名。如下代码：

<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-success" ></div>
</div>
特别注意：要让条纹进度条动起来，就需要让“progress-striped”和“active”同时运用，不然条纹进度条是不具备动效效果。

进度条--条纹进度条

这种条纹进度条采用CSS3的线性渐变来实现，并未借助任何图片。使用Bootstrap框架中的条纹进度条只需要在进度条的容器“progress”基础上增加类名“progress-striped”，当然，如果你要让你的进度条条纹像彩色进度一样，具有彩色效果，你只需要在进度条上增加相应的颜色类名，

<div class="progress progress-striped">
    <div class="progress-bar progress-bar-success" ></div>
</div>

进度条--彩色进度条

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

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

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

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

<div class="progress">
    <div class="progress-bar progress-bar-success" ></div>
</div>

进度条--基本样式

使用方法：

Bootstrap框架中也是按这样的方式实现的，他提供了两个容器，外容器使用“progress”样式，子容器使用“progress-bar”样式。其中progress用来设置进度条的容器样式，而progress-bar用于限制进度条的进度。使用方法非常的简单：

<div class="progress">
       <div class="progress-bar" ></div>
</div>

progress样式主要设置进度条容器的背景色，容器高度、间距等
而progress-bar样式在设置进度方向，重要的是设置了进度条的背景颜色和过渡效果：
role属性作用：告诉搜索引擎这个div的作用是进度条。
2、aria-valuenow="40"属性作用：当前进度条的进度为40%。
3、aria-valuemin="0"属性作用：进度条的最小值为0%。
4、aria-valuemax="100"属性作用：进度条的最大值为100%。

警示框--可关闭的警示框

data-diamiss:就是点击让目标关闭的意思。×时HTML实体字符 ×  的意思。data-dismiss="alert"就是当点击×时让alert消失

使用方法：

 1、需要在基本警示框“alert”的基础上添加“alert-dismissable”样式。

  2、在button标签中加入class="close"类，实现警示框关闭按钮的样式。

  3、要确保关闭按钮元素上设置了自定义属性：“data-dismiss="alert"”（因为可关闭警示框需要借助于Javascript来检测该属性，从而控制警示框的关闭）。

<div class="alert alert-success alert-dismissable" role="alert">
    <button class="close" type="button" data-dismiss="alert">&times;</button>
    恭喜您操作成功！
</div>

警示框--默认警示框

Bootstrap框架通过“alert“样式来实现警示框效果。在默认情况之下，提供了四种不同的警示框效果：

1、成功警示框：告诉用用户操作成功，在“alert”样式基础上追加“alert-success”样式，具体呈现的是背景、边框和文本都是绿色；

  2、信息警示框：给用户提供提示信息，在“alert”样式基础上追加“alert-info”样式，具体呈现的是背景、边框和文本都是浅蓝色；

  3、警告警示框：提示用户小心操作（提供警告信息），在“alert”样式基础上追加“alert-warning”样式，具体呈现的是背景、边框、文本都是浅黄色；

  4、错误警示框：提示用户操作错误，在“alert”样式基础上追加“alert-danger”样式，具体呈现的是背景、边框和文本都是浅红色。