bootstrap5 列表——迹忆客-ag捕鱼王app官网

使用 bootstrap5 创建列表

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

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

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

无样式的有序和无序列表

有时可能需要从列表项中删除默认样式。 我们可以通过简单地将 .list-unstyled 类应用到相应的

或
元素上来完成此操作。

    
ag捕鱼王app官网主页
    
产品
        

            
迹忆客教程
            
迹忆客工具
        
    
    
关于ag捕鱼王app官网
    
联系ag捕鱼王app官网

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



注意 ： .list-unstyled 类仅从

或
元素的直接子项的列表项中删除默认的列表样式和默认的 padding-left 值。

---

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

如果要使用有序或无序列表创建水平菜单，则需要将所有列表项放在一行中。 我们可以简单地通过将类 .list-inline 添加到

或
上，并将类 .list-inline-item 添加到子
1. 元素上来实现。

   
       
   ag捕鱼王app官网主页
       
   工具
       
   关于ag捕鱼王app官网
       
   联系ag捕鱼王app官网
   
   

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

   

   ---

   创建水平定义列表

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

   
       
   user agent
       
   an html user agent is any device that interprets html documents.
       
   client-side scripting
       
   client-side scripting generally refers to the category of computer programs on the web that are executed by the user's web browser.
       
   document tree
       
   the tree of elements encoded in the source document.
   
   

   点击上面的尝试一下查看效果

   注意 ：对于列表中过长的文本，我们可以选择在

   元素上添加类.text-truncate来截断文本，并在后面用省略号 (...) 。

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