引导列表（Bootstrap List） - CSS

引导列表是在HTML列表基础上，使用了Bootstrap框架的样式和类名。这使得列表可以具有更加美观和统一风格的样式，同时也更加易于响应式设计。

一、普通列表

要创建一个普通列表，可以使用ul（无序列表）或ol（有序列表）元素。如下所示：

<ul>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

<ol>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ol>

输出结果如下：

• List item
• List item
• List item

1. List item
2. List item
3. List item

二、Bootstrap列表样式

如果将ul或ol元素添加一个.bootstrap类名，即可使用Bootstrap的样式来美化列表。代码如下：

<ul class="list-group">
  <li class="list-group-item">List item</li>
  <li class="list-group-item">List item</li>
  <li class="list-group-item">List item</li>
</ul>

<ol class="list-group">
  <li class="list-group-item">List item</li>
  <li class="list-group-item">List item</li>
  <li class="list-group-item">List item</li>
</ol>

输出结果如下：

• List item
• List item
• List item

1. List item
2. List item
3. List item

三、Bootstrap嵌套列表

使用bootstrap的样式时，还可以创建嵌套的列表。如下所示：

<ul class="list-group">
  <li class="list-group-item">List item
    <ul>
      <li>Nested list item</li>
      <li>Nested list item</li>
      <li>Nested list item</li>
    </ul>
  </li>
  <li class="list-group-item">List item
    <ul>
      <li>Nested list item</li>
      <li>Nested list item</li>
      <li>Nested list item</li>
    </ul>
  </li>
</ul>

输出结果如下：

• List item
  • Nested list item
  • Nested list item
  • Nested list item
• List item
  • Nested list item
  • Nested list item
  • Nested list item

四、Bootstrap内联列表

如果要创建一个内联列表，可以使用.list-inline类。代码如下：

<ul class="list-inline">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

输出结果如下：

• List item
• List item
• List item

五、Bootstrap描述列表

除了上面介绍的常规列表，Bootstrap还提供了描述列表。描述列表使用

<dl class="dl-horizontal">
  <dt>List item</dt>
  <dd>Description</dd>
  <dt>List item</dt>
  <dd>Description</dd>
  <dt>List item</dt>
  <dd>Description</dd>
</dl>

输出结果如下：

List item

Description

List item

Description

List item

Description

六、Bootstrap列表样式定制

Bootstrap提供了一系列的CSS类以实现对列表样式的定制。下面列举几个常用的类名，更多类名可以查阅Bootstrap官方文档：

• .list-unstyled：将列表样式设为无样式，可以用于屏幕阅读器。
• .list-inline：将列表项水平排列，可以用于创建内联列表。
• .list-group：将列表项显示为Bootstrap列表组的样式。
• .list-group-item：将每个列表项显示为Bootstrap列表项的样式。
• .active：为选中的列表项添加样式。

七、总结

引导列表是通过Bootstrap框架定制的列表，可以帮助我们快速创建具有统一风格的列表。除了常规列表外，Bootstrap还提供了多种形式的列表样式，例如嵌套列表、内联列表和描述列表等。我们可以根据需求选择适当的列表样式，并使用CSS类对其样式进行定制。