Bootstrap基本组件学习笔记之列表组(11)
(编辑：jimmy 日期: 2025/6/22 浏览：3 次 )
列表组件用于以列表形式呈现复杂的和自定义的内容。
创建一个列表组，只需要完成以下两步：
（1）向元素 <ul> 添加 class .list-group；
（2）向 <li> 添加 class .list-group-item。
看下面的例子：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../../css/bootstrap.min.css" rel="stylesheet"> <script src="/UploadFiles/2021-04-02/jquery.min.js">效果如下：
最后说明下，上面的例子的“排行榜”中，向列表项添加徽章组件。只需要在<li>元素中添加<span class="badge">即可。
如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：
Bootstrap学习教程
Bootstrap实战教程
Bootstrap插件使用教程
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
下一篇：Bootstrap基本样式学习笔记之图片(6)