Bootstrap学习日记之列表组

  接下来我们学习Bootstrap中又一个强大的组件，列表组，列表组是什么呢？列表组顾名思义是列表的组合，在这个组合中你可以放置基本元素也可以放置复杂的内容。

创建基本列表组

• 建立一个带有class="list-group"的<ul>
• 在上面的<ul>中添加带有class="list-group-item"的<li>
• 在上面<li>中添加内容
• 列表组默认充满整个屏幕

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

运行结果

创建带有徽章的列表组

• 在基本的列表组中创建徽章<span class="badge">即可
• 徽章会自动转换到右边

<ul class="list-group">
       <li class="list-group-item">吃饭
       <span class="badge">20</span>
       </li>
       <li class="list-group-item">洗澡</li>
       <li class="list-group-item">玩游戏</li>
       <li class="list-group-item">写代码</li>
   </ul

运行结果

创建带有超链接的列表组

• 将<ul>换成<div>，class不变
• 将<li>换成<a>，class不变

   <div class="list-group">
       <a href="#" class="list-group-item active">吃饭
       <span class="badge">20</span>
       </a>
       <a href="#" class="list-group-item">洗澡</a>
       <a href="#" class="list-group-item">玩游戏</a>
       <a href="#" class="list-group-item">写代码</a>
   </div>

运行代码

创建复杂内容的列表组

• 带有连接的列表组，在<a>中编写复杂内容如文本标题，按钮，表单等
• 不带有连接的列表组，在<li>中表写复杂内容如文本标题，按钮，表单等

 <div class="list-group">
       <a href="#" class="list-group-item active">
           <h4 class="list-group-item-heading">个人生活安排</h4>
       </a>
       <a href="#" class="list-group-item">
           <h4 class="list-group-item-heading">吃饭</h4>
       <p class="list-group-item-text">好好吃饭</p>
       </a>
       <a href="#" class="list-group-item">
           <h4 class="list-group-item-heading">玩游戏</h4>
       <p class="list-group-item-text">好好玩游戏</p>
       </a>
       <a href="#" class="list-group-item">
           <h4 class="list-group-item-heading">写代码</h4>
       <p class="list-group-item-text">好好写代码</p>
       </a>
   </div>
   <ul class="list-group">
    <li class="list-group-item active">
        <h4 class="list-group-item-heading">ul中的复杂列表组</h4>
    </li>
    <li class="list-group-item">
        <h4 class="list-group-item-heading">吃饭</h4>
        <p class="list-group-item-text">好好吃饭</p>
    </li>
    <li class="list-group-item">
        <h4 class="list-group-item-heading">玩游戏</h4>
        <p class="list-group-item-text">好好玩游戏</p>
    </li>
    <li class="list-group-item">
        <h4 class="list-group-item-heading">写代码</h4>
        <p class="list-group-item-text">好好写代码</p>
    </li>
</ul>

代码解读：我们创建了两个列表组，一组是带有超链接的列表组，一组是不带超链接的列表组，在这里面我们用上了<list-group-item-heading>作为列表组里的标题（比之普通不带此预定义类的<h4>，它会缩小列表组的间距），<list-group-item-text>作为列表组里的普通文本（比之普通不带此预定义类的<p>，它会缩小列表组的间距）。

运行结果

带有情景预定义类的列表组

  像之前的下拉菜单，按钮等都有适用于自己的情景预定义类，在列表组中同样有适用于自己的预定义类，如：list-group-item-warning、list-group-item-info等

• 在<li>或者<a>中添加情景预定义类

   <ul class="list-group">
       <li class="list-group-item list-group-item-info">
           <p class="list-group-item-text">信息提示样式</p>
       </li>
       <li class="list-group-item list-group-item-success">
           <p class="list-group-item-text">成功提示样式
       </p>
       </li>
   </ul>

运行结果

注：本篇文章为博主在菜鸟教程学习的日记，菜鸟教程：http://www.runoob.com/