Bootstrap中如何添加列表

本篇内容主要讲解“Bootstrap中如何添加列表”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Bootstrap中如何添加列表”吧!

创新互联是专业的网站建设公司,提供网站建设,网站制作,网站设计等网站开发一体化解决方案;包括H5技术,重庆小程序开发,网站定制,企业网站建设,购物商城网站建设,响应式网站,建网站,PHP网站建设,软件开发，软文发布平台，网站营销。欢迎做网站的企业前来合作洽谈,创新互联将竭诚为您服务!

Bootstrap中如何添加列表

1 无序列表

列表组是显示一系列内容的灵活而强大的组件。Bootstrap修改和扩展它们以支持其中的任何内容。最基本的列表组是一个无序的列表，其中包含列表项和适当的类。在它的基础上使用下面的选项，或者根据需要使用您自己的CSS。

看下面列表是不很简单，就是在html列表元素的基础上加了两个类list-group和ist-group-item

      
        第一行
        第二行
        第三行
        第四行
        第五行

Bootstrap中如何添加列表

将active加到list-group-item指示当前的活动状态。将disabled加到list-group-item使其呈现禁用。

      
        第一行
        第二行
        第三行
        第四行
        第五行

Bootstrap中如何添加列表

使用a或button，并加入list-group-item-action来创建具有hover、禁用和启用状态的动态列表群组。我们分离这些伪类别，以确保由非交互元素组成的列表群组（如li或div）不提供点击或触击。

确保不要在这里使用标准的btn。

第一行 button 第二行第三行第四行第五行

1.4 移除边框及圆角

在list-group中加入list-group-flush来移除部分边框及圆角，以在父容器中（如：卡片）产生边缘贴齐的列表群组。

2 带编号的有序列表

2.1 简单内容

在list-group中添加list-group-numbered修饰符类（并可选地使用ol元素）以选择编号的列表组项。数字是通过CSS生成的（与ol的默认浏览器样式相反），以便更好地放置在列表组项目中，并允许更好的自定义。

数字由ol上的counter reset生成，然后在li上用 ::before 元素设置样式并放置在counter increment和content中。