.list-group-item.disabled, .list-group-item.disabled:hover, .list-group-item.disabled:focus { color: #777; background-color: #eee; } .list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus { z-index: 2; color: #fff; background-color: #428bca; border-color: #428bca; }
例子：
<h1>列表组状态设置</h1> <ul> <a> <h4>列表1标题</h4> <p>列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容</p> </a> <a> <h4>列表2标题</h4> <p>列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容</p> </a> <a> <h4>列表3标题</h4> <p>列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容</p> </a> <a> <h4>列表4标题</h4> <p>列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容</p> </a> <a> <h4>列表5标题</h4> <p>列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容</p> </a> <a> <h4>列表6标题</h4> <p>列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容</p> </a> </ul>
效果如下（第三个列表项是禁用状态，鼠标移放在它上面有个禁用图标，这里是直接截的图，看不到这个效果）：
多彩列表组
列表组组件和警告组件一样，bootstrap为不同的状态提供了不同的背景色和文本色，可以使用这几个类名定义不同背景色的列表项：
.list-group-item-success:成功 绿色（背景色） .list-group-item-info:信息 蓝色（背景色） .list-group-item-warning:警告 黄色（背景色） .list-group-item-danger:错误 红色（背景色）
实现原理：
这几个类名仅修改了背景色和文本色，对应的源码如下：
.list-group-item-success { color: #3c763d; background-color: #dff0d8; } a.list-group-item-success { color: #3c763d; } a.list-group-item-success .list-group-item-heading { color: inherit; } a.list-group-item-success:hover, a.list-group-item-success:focus { color: #3c763d; background-color: #d0e9c6; } a.list-group-item-success.active, a.list-group-item-success.active:hover, a.list-group-item-success.active:focus { color: #fff; background-color: #3c763d; border-color: #3c763d; }
其它状态样式代码请查看源码文件,如果想给列表项添加背景色，只需在类.lis-group-item的基础上追加对应的类名即可。
多彩列表组的运用：
<h1>多彩列表组</h1> <ul> <a href="#"> 列表项1 <span>10</span> </a> <a href="#"> 列表项1 <span>10</span> </a> <a href="#"> 列表项1 <span>10</span> </a> <a href="#"> 列表项1 <span>10</span> </a> <a href="#"> 列表项1 <span>10</span> </a> </ul>
效果如下：
您可能感兴趣的文章: