整理关于Bootstrap列表组的慕课笔记

整理自慕课笔记
列表组是Bootstrap框架新增的一个组件，可以用来制作列表清单、垂直导航等效果，也可以配合其他的组件制作出更漂亮的组件。

基础列表组

基础列表组，看上去就是去掉了列表符号的列表项，并且配上一些特定的样式。在Bootstrap框架中的基础列表组主要包括两个部分：
* list-group：列表组容器，常用的是ul元素，当然也可以是ol或者div元素
* list-group-item：列表项，常用的是li元素，当然也可以是div元素
来看一个简单的示例：

 
揭开CSS3的面纱
 
CSS3选择器
 
CSS3边框
 
CSS3背景
 
CSS3文本

带徽章的列表组

带徽章的列表组其实就是将Bootstrap框架中的徽章组件和基础列表组结合在一起的一个效果。具体做法很简单，只需要在“list-group-item”中添加徽章组件“badge”：

 

 13揭开CSS3的面
 
 

 456CSS3选择器
 
 

 892CSS3边框
 
 

 90CSS3背景
 
 

 1290CSS3文本
 

带链接的列表组

带链接的列表组，其实就是每个列表项都具有链接效果。大家可能最初想到的就是在基础列表组的基础上，给列表项的文本添加链接：

  

    揭开CSS3的面
  
  

    CSS3选择器
  
  ...

这样做有一个不足之处，就是链接的点击区域只在文本上有效, 但很多时候，都希望在列表项的任何区域都具备可点击。这个时候就需要在链接标签上增加额外的样式：“display:block”；虽然这样能解决问题，达到需求。但在Bootstrap框架中，还是采用了另一种实现方式。就是将ul.list-group使用div.list-group来替换，而li.list-group-item直接用a.list-group-item来替换。这样就可以达到需要的效果：

  图解CSS3
  220Sass教程
  玩转Bootstrap

自定义列表组

Bootstrap框加在链接列表组的基础上新增了两个样式：
* list-group-item-heading：用来定义列表项头部样式
* list-group-item-text：用来定义列表项主要内容
这两个样式最大的作用就是用来帮助开发者可以自定义列表项里的内容，如下面的示例：

  
    
图解CSS3
    
...
  
  
    
Sass中国
    
...
  

列表项的状态设置

Bootstrap框架也给组合列表项提供了状态效果，特别是链接列表组。比如常见状态和禁用状态等。实现方法和前面介绍的组件类似，在列表组中只需要在对应的列表项中添加类名：
* active：表示当前状态
* disabled：表示禁用状态
来看个示例：

  5902图解CSS3
  15902W3cplus
  59020慕课网
  0Sass中国

多彩列表组

列表组组件和警告组件一样，Bootstrap为不同的状态提供了不同的背景颜色和文本色，可以使用这几个类名定义不同背景色的列表项。
* list-group-item-success：成功，背景色绿色
* list-group-item-info：信息，背景色蓝色
* list-group-item-warning：警告，背景色为黄色
* list-group-item-danger：错误，背景色为红色
如果你想给列表项添加什么背景色，只需要在“list-group-item”基础上增加对应的类名：

  5902图解CSS3
  15902W3cplus
  59020慕课网
  0Sass中国

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap Table使用教程

Bootstrap插件使用教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。