Bootstrap中如何添加列表

3 水平排列

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

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

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

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

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
        

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 带徽章

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

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

5.2 自定义内容

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

      
        
        
        文章标题
        发布日期
        
        文章内容摘要

        小字，可用于文章来源、作者等信息
        
        
        
        阿里会接盘苏宁吗？
        3 days ago
        
        在苏宁对网络传闻辟谣之后，海豚社独家得到消息，阿里方面已经派人入驻苏宁在某些省份的分公司。

        来源：搜狐科技
        
        
        
        苹果「革命性」神秘新品确定了！
        3 days ago
        
        和造车一样，苹果正在研发的VR眼镜早就变成了公开的秘密。虽然一直活在传言中，每年都没看见成品出现，不过好歹进展一直都在缓慢曝光中。

        来源：搜狐科技
        
        

5.3 复选框和单项按钮

5.3.1 简单例子

将Bootstrap的复选框与单选框放在列表群组中，并依据需要进行自定义。您可以在不使用label的情况下使用它们，但请记住要包含aria-label以及必要的内容。

下面两个例子radio和checkbox用法都是一样的，所以每样演示了一个。

      
        
        
        选项一
        
        
        
        选项二
        
        
        
        选项三
        
        
        
        选项四
        
        
        
        选项五
        
        

5.3.2 将label作为点击区域

如果您希望将label作为list-group-item使用以创造较大的点击区域，这么做是可以的。用...将表单和文字包裹在一起即可。

      
        
        
        选项一
        
        
        
        选项二
        
        
        
        选项三
        
        
        
        选项四
        
        
        
        选项五
        
        

到此，相信大家对“Bootstrap中如何添加列表”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！