Bootstrap3实用教程
3.18.3 禁用和活动状态
阅读(

Bootstrap基础

Bootstrap全局样式

Bootstrap组件

Glyphicons字体图标

下拉菜单

按钮组

按钮下拉菜单

输入框组

导航

导航条

面包屑导航

分页导航

标签

徽章

巨幕

页头

缩略图

警告框

进度条

媒体对象

列表组

支持的组件

创建列表组

禁用和活动状态

Bootstrap3中,使用 .active 类表示活动的状态,使用 .disabled 类表示禁用的状态。可以为某个列表项添加 .active 类,让它显示为白色文本和浅蓝色背景,表现出活动的状态;或者添加 .disabled 类让它显示为灰色背景,表现出被禁用的状态。如:

<ul class="list-group">
  <li class="list-group-item disabled">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item active">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

效果如图 3‑91所示:

禁用和活动状态
图3-91 禁用和活动状态

无论一个列表项是 <li>、或 <a>、或 <button>,都可以通过 .disabled 类来禁用它。但它只能禁用CSS交互行为,而无法禁用链接的默认行为。要禁用链接的默认行为,还需要借助JavaScript脚本。因此,对于被禁用的链接,建议使用 <li> 元素代替 <a> 元素。

关于作者

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

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

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

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验