Bootstrap 列表
在本教程中，您将学习如何使用 Bootstrap 设置 HTML 列表的样式。
使用 Bootstrap 创建列表
您可以创建三种不同类型的 HTML 列表：
- 无序列表 — 顺序无关紧要的项目列表。 无序列表中的列表项标有项目符号。
- 有序列表 — 顺序确实很重要的项目列表。 有序列表中的列表项用数字标记，例如 1、ⅵ等
- 定义列表 — 术语列表及其相关描述。
请参阅 HTML 列表 上的教程，了解有关不同列表类型的更多信息。
无样式的有序列表和无序列表
有时您可能需要从列表项中删除默认样式。 您可以通过简单地将类 .list-unstyled 应用到相应的 <ul> 或 <ol> 元素来做到这一点。
<ul class="list-unstyled">
<li>Home</li>
<li>Products
<ul>
<li>Gadgets</li>
<li>Accessories</li>
</ul>
</li>
<li>About Us</li>
<li>Contact</li>
</ul>— 上面示例的输出将如下所示：
注意： .list-unstyled 类仅从作为 <ul> 或 <ol> 元素的直接子项的列表项中删除默认 list-style 和保留 padding。
将有序和无序列表项内联
如果要使用有序或无序列表创建水平菜单，则需要将所有列表项放在一行中，即并排放置。 您可以通过简单地将类 .list-inline 应用到相应的 <ul> 或 <ol>，并将类 .list-inline-item 应用到 <li> 元素来做到这一点。
<ul class="list-inline">
<li class="list-inline-item">Home</li>
<li class="list-inline-item">Products</li>
<li class="list-inline-item">About Us</li>
<li class="list-inline-item">Contact</li>
</ul>— 上面示例的输出将如下所示：
创建水平定义列表
定义列表中的术语和描述也可以使用 Bootstrap 网格系统的预定义类水平并排对齐。 这是一个例子：
<dl class="row">
<dt class="col-sm-3">User Agent</dt>
<dd class="col-sm-9">An HTML user agent is any device that interprets HTML documents.</dd>
<dt class="col-sm-3 text-truncate">Client-side Scripting</dt>
<dd class="col-sm-9">Client-side scripting generally refers to the category of computer programs on the web that are executed by the user's web browser.</dd>
<dt class="col-sm-3">Document Tree</dt>
<dd class="col-sm-9">The tree of elements encoded in the source document.</dd>
</dl>— 上面示例的输出将如下所示：
注意：对于更长的定义术语，您可以选择在 <dt> 元素上应用类 .text-truncate 以使用省略号 (…) 截断文本。
在下一章中，您将学习如何使用 Bootstrap 列表组 组件创建更加灵活和复杂的元素列表。
Advertisements