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 上开源。

Bootstrap按钮的状态相关推荐

Bootstrap按钮元素使用方法
Bootstrap按钮元素样式 Bootstrap中,总共提供了六种按钮样式,分别是默认.主要.成功.信息.警告以及危险这几个样式,它们对应的类分别是btn-default.btn-primary.b ...
Bootstrap 按钮状态提示
按钮 Bootstrap按钮插件需要 bootstrap-button.js 文件支持,在使用该插件之前,应该导入 jQuery 和 bootstrap-button.js 文件. Bootstrap ...
Bootstrap 按钮
基本按钮通过将button标签中的class设置为对应的类,可以将button设置为不同的css格式,首先设置类为btn,不设置情况下为默认的html按钮格式,设置后变为bootstrap的基本按钮 ...
iOS 11开发教程（二十）iOS11应用视图美化按钮之设置按钮的状态
iOS 11开发教程(二十)iOS11应用视图美化按钮之设置按钮的状态在示例2-2中,设置按钮的标题和颜色时,需要对按钮的状态进行设置,表示按钮在某一状态下的标题和标题颜色是什么样子.例如,UICo ...
bootstrap 按钮颜色属性
bootstrap 按钮颜色属性有几种转载于:https://www.cnblogs.com/HUIWANG/p/11027889.html
Bootstrap 按钮组
按钮组允许多个按钮被堆叠在同一行上.当你想要把按钮对齐在一起时,这就显得非常有用.您可以通过 Bootstrap 按钮(Button) 插件添加可选的 JavaScript 单选框和复选框样式行为. ...
用动画切换按钮的状态
用动画切换按钮的状态效果源码 https://github.com/YouXianMing/UI-Component-Collection // // BaseControl.h // BaseB ...
ESP32 + ESP-IDF ｜GPIO 03 - 定时器轮询按钮的状态，控制LED亮或者灭
一.前言前面两个章节使用了GPIO的输出功能,本章节介绍如何使用ESP32上GPIO的输入功能. 通过一个简单的实验来学习这个功能: 1.开启一个定时器(上一章节学习了),定时器以每100ms的周期 ...
layui select日期_layui给下拉框、按钮状态、时间赋初始值的方法，按钮的状态
layui给下拉框.按钮状态.时间赋初始值的方法,按钮的状态如下所示: 编辑 layui.use('table', function() { var table = layui.table; //监 ...

Bootstrap按钮的状态

按钮的状态

Bootstrap按钮的状态相关推荐

最新文章

热门文章