Bootstrap5 列表

使用 Bootstrap5 创建列表

我们可以创建三种不同类型的 HTML 列表：

• 无序列表 - 其中顺序不重要的项目列表。无序列表中的列表项用项目符号标记，例如⚬ , ●等。
• 有序列表 - 顺序确实很重要的项目列表。有序列表中的列表项用数字标记，例如1、ⅵ等。
• 定义列表 - 带有相关描述的术语列表。

请参阅 HTML 列表教程，了解有关不同列表类型的更多信息。

无样式的有序和无序列表

有时可能需要从列表项中删除默认样式。 我们可以通过简单地将 .list-unstyled 类应用到相应的 <ul> 或 <ol> 元素上来完成此操作。

<ul class="list-unstyled">
    <li>主页</li>
    <li>产品
        <ul>
            <li>迹忆客教程</li>
            <li>迹忆客工具</li>
        </ul>
    </li>
    <li>关于我们</li>
    <li>联系我们</li>
</ul>

尝试一下

上面代码显示的列表样式如下

注意 ： .list-unstyled 类仅从 <ul> 或 <ol> 元素的直接子项的列表项中删除默认的列表样式和默认的 padding-left 值。

内联放置有序和无序列表项

如果要使用有序或无序列表创建水平菜单，则需要将所有列表项放在一行中。 我们可以简单地通过将类 .list-inline 添加到 <ul> 或 <ol>上，并将类 .list-inline-item 添加到子 <li> 元素上来实现。

<ul class="list-inline">
    <li class="list-inline-item">主页</li>
    <li class="list-inline-item">工具</li>
    <li class="list-inline-item">关于我们</li>
    <li class="list-inline-item">联系我们</li>
</ul>

尝试一下

上面代码显示的列表样式如下

创建水平定义列表

定义列表中的术语和描述也可以使用 Bootstrap5 网格系统的预定义类水平并排对齐。 下面是一个例子：

<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来截断文本，并在后面用省略号 (...) 。

在下一章中，我们将学习如何使用Bootstrap5 列表组组件创建更加灵活和复杂的元素列表。