列表组

基础列表组

<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>

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

只需要在“list-group-item”中文字前加添加徽章组件“badge”，具体：<span class="badge">13</span>

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

带链接的列表组，其实就是每个列表项都具有链接效果。大家可能最初想到的就是在基础列表组的基础上，给列表项的文本添加链接,运行效果如下：

这样做有一个不足之处，就是链接的点击区域只在文本上有效，但很多时候，都希望在列表项的任何区域都具备可点击。这个时候就需要在链接标签上增加额外的样式：“display:block”；虽然这样能解决问题，达到需求。但在Bootstrap框架中，还是采用了另一种实现方式。就是将ul.list-group使用div.list-group来替换，而li.list-group-item直接用a.list-group-item来替换。这样就可以达到需要的效果

列表组--自定义列表组

<div class="list-group">
    <a href="##" class="list-group-item">
        <h4 class="list-group-item-heading">图解CSS3</h4>
        <p class="list-group-item-text">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性...</p>
    </a>
    <a href="##" class="list-group-item">
        <h4 class="list-group-item-heading">Sass中国</h4>
        <p class="list-group-item-text">致力于为中国开发者提供最全面，最具影响力，最前沿的Sass相关技术与教程...</p>
    </a>
</div>

列表项的状态设置

<div class="list-group">
    <a href="##" class="list-group-item active">性能优化之PHP优化<span class="badge">10</span></a>
    <a href="##" class="list-group-item">Canvas绘图详解<span class="badge">3</span></li>
    <a href="##" class="list-group-item disabled">玩转Bootstrap<span class="badge">0</span></a>
    <a href="##" class="list-group-item">基于bootstrap的网页开发<span class="badge">22</span></a>
</div>

多彩列表组

 

<div class="list-group">
    <a href="##" class="list-group-item list-group-item-success">性能优化之PHP优化<span class="badge">10</span></a>
    <a href="##" class="list-group-item list-group-item-info">Canvas绘图详解<span class="badge">3</span></li>
    <a href="##" class="list-group-item list-group-item-warning">玩转Bootstrap<span class="badge">0</span></a>
    <a href="##" class="list-group-item list-group-item-danger">基于bootstrap的网页开发<span class="badge">22</span></a>
</div>