Bootstrap中如何添加列表-梓潼大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

Bootstrap中如何添加列表

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

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

Bootstrap中如何添加列表

1 无序列表

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

1.1 简单无序列表例子

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

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

Bootstrap中如何添加列表

1.2 活动项目和禁用项目

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

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

Bootstrap中如何添加列表

1.3 链接和按钮

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

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

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

Bootstrap中如何添加列表

1.4 移除边框及圆角

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

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

Bootstrap中如何添加列表

2 带编号的有序列表

2.1 简单内容

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

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


        第一项内容
        第二项内容
        第三项内容

Bootstrap中如何添加列表

2.1 自定义内容

li中还可以使用其他元素。

第一项内容

第二项标题

第二项内容

第三项标题

第三项内容

Bootstrap中如何添加列表

3 水平排列

列表并不是总是竖向排列的，在list-group中加入list-group-horizontal将列表显示改为水平。

你也选择加入响应式变化.list-group-horizontal-{sm|md|lg|xl|xxl}，使列表群组从该断点的最小min-width开始水平放置。

目前水平列表群组不能与Flush列表群组合并使用。

      
        第一项内容
        第二项内容
        第三项内容

Bootstrap中如何添加列表

4 颜色和效果

4.1 背景和颜色

在list-group-item中加入list-group-item-颜色可以改变列表背景颜色。

      
        默认
        list-group-item-primary
        list-group-item-secondary
        list-group-item-success
        list-group-item-danger
        list-group-item-warning
        list-group-item-info
        list-group-item-light
        list-group-item-dark

Bootstrap中如何添加列表

4.1 背景和颜色

这里添加了上一个示例中没有的悬停样式。还支持active状态；应用它以指示情境式列表组项上的活动选择。

      
        默认
        
        list-group-item-primary
        list-group-item-secondary
        list-group-item-success
        list-group-item-danger
        list-group-item-warning
        list-group-item-info
        list-group-item-light
        list-group-item-dark

5复杂列表群组

5.1 带徽章

同过通用类，向任何列表项目添加标签以显示未读计数、活动等。

5.2 自定义内容

通过弹性盒子通用类，几乎任何的HTML都能加入到项目内，如以下的列表群组连接。