上一节:
下一节:

  Bootstrap 列表组

  • 定义和使用

    最基本的列表组是具有列表项的无序列表。
    要创建 Bootstrap 列表组，请将 .list-group 类添加到 <ul> 元素。 然后将 .list-group-item 添加到每个 <li> 元素： 
    <div class="container">
 <ul class="list-group">
   <li class="list-group-item">第一项</li>
   <li class="list-group-item">第二项</li>
   <li class="list-group-item">第三项</li>
 </ul>
</div>
    尝试一下
    输出结果如下：
    • 第一项
    • 第二项
    • 第三项

  • 激活状态

    使用 .active 类突出显示当前项目： 
    <div class="container">
   <ul class="list-group">
      <li class="list-group-item active">第一项</li>
      <li class="list-group-item">第二项</li>
      <li class="list-group-item">第三项</li>
   </ul>
</div>
    尝试一下
    输出结果如下：
    • 第一项
    • 第二项
    • 第三项

  • 具有链接项的列表组

    要创建包含链接项的列表组，请使用 <div> 代替 <ul>，并使用 <a> 代替 <li>；（可选）如果希望悬停时使用灰色背景色，请添加 .list-group-item-action 类。 
    <div class="container">
   <div class="list-group">
      <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>
   </div>
</div>
    尝试一下
    输出结果如下：
    第一项 第二项 第三项

  • 禁用项

    .disabled 类为禁用的项目添加了较浅的文本颜色；并且在链接上使用时，它将消除悬停效果： 
    <div class="container">
   <div class="list-group">
      <a href="#" class="list-group-item disabled">第一项</a>
      <a href="#" class="list-group-item disabled">第二项</a>
      <a href="#" class="list-group-item list-group-item-action">第三项</a>
   </div>
</div>
    尝试一下
    输出结果如下：
    第一项 第二项 第三项

  • 删除边框和圆角

    使用 .list-group-flush 类删除一些边框和圆角： 
    <div class="container">
   <ul class="list-group list-group-flush">
     <li class="list-group-item">第一项</li>
     <li class="list-group-item">第二项</li>
     <li class="list-group-item">第三项</li>
   </ul>
</div>
    尝试一下
    输出结果如下：
    • 第一项
    • 第二项
    • 第三项

  • 水平列表组

    如果希望列表项水平显示而不是垂直显示（并排显示而不是彼此并排显示），请将 .list-group-horizontal 类添加到 .list-group： 
    <div class="container">
   <ul class="list-group list-group-horizontal">
      <li class="list-group-item">第一项</li>
      <li class="list-group-item">第二项</li>
      <li class="list-group-item">第三项</li>
   </ul>
</div>
    尝试一下
    输出结果如下：
    • 第一项
    • 第二项
    • 第三项

  • 列表项着色类

    为列表项着色的类为：.list-group-item-success，list-group-item-secondary，list-group-item-info，list-group-item-warning，.list-group-item-danger，.list-group-item-primary，list-group-item-dark 和 list-group-item-light： 
    <div class="container">
   <ul class="list-group">
      <li class="list-group-item list-group-item-success">Success 项</li>
      <li class="list-group-item list-group-item-secondary">Secondary 项</li>
      <li class="list-group-item list-group-item-info">Info 项</li>
      <li class="list-group-item list-group-item-warning">Warning 项</li>
      <li class="list-group-item list-group-item-danger">Danger 项</li>
      <li class="list-group-item list-group-item-primary">Primary 项</li>
      <li class="list-group-item list-group-item-dark">Dark 项</li>
      <li class="list-group-item list-group-item-light">Light 项</li>
   </ul>
</div>
    尝试一下
    输出结果如下：
    • Success 项
    • Secondary 项
    • Info 项
    • Warning 项
    • Danger 项
    • Primary 项
    • Dark 项
    • Light 项

    使用链接的着色列表项

    下面示例演示了带有链接的着色列表项： 
    <div class="container">
   <div class="list-group">
      <a href="#" class="list-group-item list-group-item-action">Action 项</a>
      <a href="#" class="list-group-item list-group-item-action list-group-item-success">Success 项</a>
      <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary 项</a>
      <a href="#" class="list-group-item list-group-item-action list-group-item-info">Info 项</a>
      <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning 项</a>
      <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger 项</a>
      <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary 项</a>
      <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark 项</a>
      <a href="#" class="list-group-item list-group-item-action list-group-item-light">Light 项</a>
   </div>
</div>
    尝试一下

  • 带有徽章的列表组

    将 .badge 类与 .badge-primary 和 .badge-pill类结合使用，以在列表组中添加徽章： 
    <div class="container">
   <ul class="list-group">
      <li class="list-group-item d-flex justify-content-between align-items-center">
         Inbox
         <span class="badge badge-primary badge-pill">12</span>
      </li>
      <li class="list-group-item d-flex justify-content-between align-items-center">
         Ads
         <span class="badge badge-primary badge-pill">50</span>
      </li>
      <li class="list-group-item d-flex justify-content-between align-items-center">
         Junk
         <span class="badge badge-primary badge-pill">99</span>
      </li>
   </ul>
</div>
    尝试一下
    输出结果如下：
    • Inbox 12
    • Ads 50
    • Junk 99

  • 相关页面

上一节:
下一节: