Bootstrap3实用教程
2.7.4 按钮的状态
阅读(

Bootstrap基础

Bootstrap全局样式

概述

栅格系统

排版

源代码

表格

表单

按钮

按钮的尺寸

按钮的外观

支持的元素

按钮的状态

在使用过程中,每个按钮可能都会有很多状态,通过按钮的状态,可以给用户或访问者提供一些有用的反馈。

Bootstrap为按钮提供了 2 种状态,分别是激活状态和禁用状态,并为不同状态定义了相应的样式。

1、激活状态

当按钮处于激活状态时,其表现为被按压下去(底色更深、边框夜色更深、向内投射阴影)。对于<button>元素,是通过:active状态实现的。对于<a>元素,是通过.active类实现的。你也可以将.active应用到<button>上(包含aria-pressed="true"属性)),并通过编程的方式使其处于激活状态。

对于<button>元素,由于:active是伪状态,因此无需额外添加,但是在需要让其表现出同样外观的时候,可以添加.active类。如:

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

效果如图 2‑75所示:

激活的按钮
图2-75 激活的按钮

对于<a>元素,可以为它添加.active类。如:

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

效果如图 2‑76所示:

激活的链接
图2-76 激活的链接

2、禁用状态

对于被禁用的按钮,Bootstrap通过为它的背景设置opacity属性,让它们呈现出无法点击的效果。

对于<button>元素,为它添加disabled属性,使其表现出禁用状态。当鼠标移动到按钮上时,按钮会出现禁止点击的鼠标手势。如:

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Disabled Button</button>

效果如图 2‑77所示:

禁用的按钮
图2-77 禁用的按钮

对于<a>元素,为它添加 .disabled 类,就可以实现颜色变浅、褪掉渐变的效果,并让它看起来无法点击。同时,当鼠标移动到链接上时,链接的样式也不再发生变化。如:

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Disabled Link</a>

效果如图 2‑78所示:

禁用的链接
图2-78 禁用的链接

需要注意的是,.disabled 类只是通过设置pointer-events: none来禁止<a>元素作为链接的原始功能,但是,这一 CSS 属性并没有被标准化,并且 Opera 18 及更低版本的浏览器并没有完全支持这一属性,同样,Internet Explorer 11 也不支持。因此,为了安全起见,建议通过 JavaScript 代码来禁止链接的原始功能。

关于作者

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

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

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

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验