第十三谈：列表组

本节课我们来开始学习 Bootstrap 的提供的列表组功能。

一．列表组

1. 列表组 ul 使用.list-group，li 使用.list-group-item 实现项目；

      <ul class="list-group">
          <li class="list-group-item">列表组 1</li>
          <li class="list-group-item">列表组 2</li>
          <li class="list-group-item">列表组 3</li>
          <li class="list-group-item">列表组 4</li>
          <li class="list-group-item">列表组 5</li>
      </ul>

2. 使用.active 在项目中实现首选项；

      <ul class="list-group">
          <li class="list-group-item active">列表组 1</li>
          <li class="list-group-item">列表组 2</li>
          <li class="list-group-item">列表组 3</li>
          <li class="list-group-item">列表组 4</li>
          <li class="list-group-item">列表组 5</li>
      </ul>

3. 使用.disabled 在项目中实现禁用；

      <ul class="list-group">
          <li class="list-group-item">列表组 1</li>
          <li class="list-group-item">列表组 2</li>
          <li class="list-group-item">列表组 3</li>
          <li class="list-group-item">列表组 4</li>
          <li class="list-group-item disabled">列表组 5</li>
      </ul>

4. 将 ul、li 替换成 div、a 实现列表组的功能，需配合.list-group-item-action；
5. 或将 ul、li 替换成 div、button 和 a 效果一样；

      <div class="list-group">
          <a href="#" class="list-group-item list-group-item-action active">...</a>
          <a href="#" class="list-group-item list-group-item-action">...</a>
          <a href="#" class="list-group-item list-group-item-action">...</a>
          <a href="#" class="list-group-item list-group-item-action">...</a>
          <a href="#" class="list-group-item list-group-item-action disabled">.</a>
      </div>

6. 使用.list-group-flush 实现紧贴效果，就是外围无边框；

      <ul class="list-group list-group-flush">

7. 使用.list-group-horizontal 实现水平排列效果

      <ul class="list-group list-group-horizontal">

8. .list-group-horizntal-，号可以表示 md,sm,lg,xl 等屏幕响应式

      <ul class="list-group list-group-horizontal-sm">

9. 列表语境颜色显示，.list-group-item-，表示颜色；

      <ul class="list-group">
          <li class="list-group-item list-group-item-primary">列表组 1</li>
          <li class="list-group-item list-group-item-secondary">列表组 2</li>
          <li class="list-group-item list-group-item-success">列表组 3</li>
          <li class="list-group-item list-group-item-danger">列表组 4</li>
          <li class="list-group-item list-group-item-warning">列表组 5</li>
      </ul>

10. 可以将.badge 徽章引入到列表组里，并进行适当的排版布局；

      <ul class="list-group w-50">
          <li class="list-group-item d-flex justify-content-between align-items-center">
              列表组 1
              <span class="badge badge-primary pb-1">10</span>
          </li>
          <li class="list-group-item d-flex justify-content-between align-items-center">
              列表组 2
              <span class="badge badge-danger pb-1">8</span>
          </li>
          <li class="list-group-item d-flex justify-content-between align-items-center">
              列表组 3
              <span class="badge badge-success pb-1">2</span>
          </li>
      </ul>

11. 结合 jQuery 和 Bootstrap.js 内置的脚本效果，实现内容切换功能；

      <div class="row">
          <div class="col-4">
              <div class="list-group" id="list-tab">
                  <a class="c list-group-item list-group-item-action active" data-toggle="list" href="#list-one">列表组 1</a>
                  <a class="c list-group-item list-group-item-action" data-toggle="list" href="#list-two">列表组 2</a>
                  <a class="c list-group-item list-group-item-action" data-toggle="list" href="#list-three">列表组 3</a>
              </div>
          </div>
          <div class="col-8">
              <div class="tab-content">
                  <div class="tab-pane fade show active" id="list-one">列表 1...列表 1...列表 1...列表 1...</div>
                  <div class="tab-pane fade" id="list-two">列表 2...列表 2...列表 2...列表 2...</div>
                  <div class="tab-pane fade" id="list-three">列表 3...列表 3...列表 3...列表 3...</div>
              </div>
          </div>
      </div>