Bootstrap3实用教程
3.18.4 情景类
阅读(

Bootstrap基础

Bootstrap全局样式

Bootstrap组件

Glyphicons字体图标

下拉菜单

按钮组

按钮下拉菜单

输入框组

导航

导航条

面包屑导航

分页导航

标签

徽章

巨幕

页头

缩略图

警告框

进度条

媒体对象

列表组

禁用和活动状态

支持的组件

创建列表组

情景类

Bootstrap为列表组提供了一组情景类 .list-group-item-success.list-group-item-info.list-group-item-warning.list-group-item-danger,这些情景类通过文本颜色和背景颜色来表达不同的含义。

列表组中的列表项,无论它是 <li>、或 <a>、或 <button>,都可以为它添加这些情景类来表示不同的情景。如:

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>

效果如图 3‑92所示:

列表组情景类
图3-92 列表组情景类

Bootstrap仅仅为列表组提供了一些预定义的样式,如果不能满足你的需求,你可以通过 CSS定制自己需要的样式。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验