7.1.2 按钮状态
Bootstrap
为按钮的激活
和禁用
状态提供了一些额外的样式。同时Bootstrap
还为按钮的如下状态提供了样式。
样式 | 描述 |
---|---|
.hover |
鼠标悬停的样式。 |
.active |
按钮被单击的样式。 |
.focus |
按钮获得焦点的样式。 |
下面代码示范了Bootstrap
按钮状态的样式。
1 |
|
将按钮设置为禁用状态
如果要将按钮设为禁用状态,则要分两种情况。
按钮类型 | 描述 |
---|---|
<button> 和<input> 按钮 |
为按钮添加disabled 属性即可。Bootstrap 会将按钮背景色调得更淡 ,并使用not-allow 光标来表示禁用。 |
<a> 按钮 |
为按钮添加.disabled 样式(链接不支持disabled 属性)。Bootstrap 会将按钮背景色调得更淡来表示禁用 。 |
需要说明的是,为<a> 元素添加.disabled 样式只是设置了pointer-events:none; 属性来禁止<a> 作为链接的原始功能,但该CSS 属性并未被标准化,且Opera 18 及更低版本的浏览器并没有完全支持这一属性,同时IE 11 也不支持该属性。即使在那些支持pointer-events: none; 属性的浏览器中,使用键盘导航或辅助技术的用户依然可激活这些链接,因此建议使用JS 代码来禁止链接的原始功能。 |
|
下面代码示范了如何设置按钮的禁用状态。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> 按钮状态 </title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
<style type="text/css">
button,
a {
margin: 30px;
}
</style>
</head>
<body>
<div class="container">
<button type="button" disabled class="btn btn-default">默认按钮</button>
<button type="button" disabled class="btn btn-primary">首选项按钮</button>
</div>
<div class="container">
<a role="button" class="btn btn-default disabled">默认按钮</a>
<a role="button" class="btn btn-primary disabled">首选项按钮</a>
</div>
<script type="text/javascript" src="../jquery-3.1.1.js"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
原文链接: 7.1.2 按钮状态