Bootstrap 4.6 List group

List group

列表组是显示一系列内容的灵活而强大的组件。修改并扩展它们以支持其中的任何内容。

1. 基本的例子

最基本的列表组是具有列表项和适当类的无序列表。使用下面的选项构建它，或者根据需要使用您自己的 CSS。

代码：

<ul class="list-group">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

2. Active items

将. active 添加到. list-group-item 以指示当前的活动选择。

代码：

<ul class="list-group">
  <li class="list-group-item active" aria-current="true">An active item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

3. Disabled items

添加”.disabled” 到 “.list-group-item” 以使其显得禁用。请注意，具有”.disabled””的某些元素还需要自定义JavaScript，以完全禁用其点击事件（例如，链接）。

代码：

<ul class="list-group">
  <li class="list-group-item disabled" aria-disabled="true">A disabled item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

4. Links and buttons

通过添加.list-group-item-action，使用s或s来创建具有悬停、禁用和活动状态的可操作列表组项。我们分离了这些伪类，以确保由非交互元素(如s或s)组成的列表组不提供单击或点击可视性。请确保不要在这里使用标准的.btn类。

代码：

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    The current link item
  </a>
  <a href="#" class="list-group-item list-group-item-action">A second link item</a>
  <a href="#" class="list-group-item list-group-item-action">A third link item</a>
  <a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
  <a class="list-group-item list-group-item-action disabled">A disabled link item</a>
</div>

使用 <button>时，您还可以使用 disabled 属性而不是 .disabled 类。遗憾的是，<a> 不支持 disabled 属性。

代码：

<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active" aria-current="true">
    The current button
  </button>
  <button type="button" class="list-group-item list-group-item-action">A second item</button>
  <button type="button" class="list-group-item list-group-item-action">A third button item</button>
  <button type="button" class="list-group-item list-group-item-action">A fourth button item</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item</button>
</div>

6. Flush

添加”.list-group-flush” 样式以删除一些边界和圆角，以使列表组中的列表中的物品在父容器中边缘到边缘（例如卡片）。

7. Horizontal

添加“.list-group-horizontal”，以将列表组项的布局从所有断点中从垂直方向更改为水平。另外，选择一个响应式变体.LIST-GROUP-HORIZONTAL- {SM | MD | LG | XL}以从该断点的最小宽度开始列表组水平。当前水平列表组不能与冲洗列表组相结合。

PROTIP：水平时是否需要等宽的列表组项目？将.FLEX填充添加到每个列表组项目中。

8. Contextual classes

使用上下文类列出具有状态背景和颜色的项目。

代码：

 <ul class="list-group">
                    <li class="list-group-item">A simple default list group item</li>
                    <li class="list-group-item list-group-item-primary">A simple primary list group item</li>
                    <li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
                    <li class="list-group-item list-group-item-success">A simple success list group item</li>
                    <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
                    <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
                    <li class="list-group-item list-group-item-info">A simple info list group item</li>
                    <li class="list-group-item list-group-item-light">A simple light list group item</li>
                    <li class="list-group-item list-group-item-dark">A simple dark list group item</li>
                </ul>

上下文类也可以使用.list-group-item-action。注意，上面的例子中没有添加悬停样式。还支持.active状态;应用它来指示上下文列表组项上的活动选择。

使用颜色来添加含义只提供了一种视觉指示，而不会传达给辅助技术(如屏幕阅读器)的用户。确保由颜色表示的信息从内容本身(例如可见的文本)中是明显的，或者通过其他方式包含，例如用.sr-only类隐藏的附加文本。

 <div class="list-group">
                    <a href="#" class="list-group-item list-group-item-action">A simple default list group item</a>
                    <a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
                    <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
                    <a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
                    <a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
                    <a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
                    <a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
                    <a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
                    <a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
                </div>

9.With badges

添加徽章到任何列表组项目，以显示未读计数，活动，和一些实用程序的帮助更多

代码：

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A list item
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A second list item
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A third list item
    <span class="badge badge-primary badge-pill">1</span>
  </li>
</ul>

10. Custom content

在flexbox实用工具的帮助下，添加几乎所有的HTML，即使是下面这样的链表组。

代码：

<div class="list-group">
    <a href="#" class="list-group-item list-group-item-action active">
        <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">List group item heading</h5>
            <small>3 days ago</small>
        </div>
        <p class="mb-1">Some placeholder content in a paragraph.</p>
        <small>And some small print.</small>
    </a>
    <a href="#" class="list-group-item list-group-item-action">
        <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">List group item heading</h5>
            <small class="text-muted">3 days ago</small>
        </div>
        <p class="mb-1">Some placeholder content in a paragraph.</p>
        <small class="text-muted">And some muted small print.</small>
    </a>
    <a href="#" class="list-group-item list-group-item-action">
        <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">List group item heading</h5>
            <small class="text-muted">3 days ago</small>
        </div>
        <p class="mb-1">Some placeholder content in a paragraph.</p>
        <small class="text-muted">And some muted small print.</small>
    </a>
</div>

11. JavaScript behavior

使用tab JavaScript插件(单独包含或通过编译后的bootstrap.js文件包含)来扩展我们的列表组，以创建本地内容的可选项卡窗格。

生活点点

生活点点

Bootstrap 4.6 List group