版权声明
- 本文原创作者：谷哥的小弟
- 作者博客地址：http://blog.csdn.net/lfdfhl
本节教程介绍Bootstrap中的按钮的常见样式及其使用。
三种按钮
在Bootstrap中可利用 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。
按钮的预定义样式
Bootstrap提供了常用的按钮样式。例如，用于表示首选项、成功、一般信息、警告、危险的按钮。
按钮的尺寸
在Bootstrap中可使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得大、中、小不同尺寸的按钮。除此以外，也可以使用默认尺寸。
按钮的状态
通常情况下，按钮有激活状态和禁用状态。
激活状态
激活状态又叫做可用状态。当按钮处于激活状态时，其表现为被按压下去（底色更深、边框夜色更深、向内投射阴影）。对于 <button> 元素，是通过 :active 状态实现的。对于 <a> 元素，是通过 .active 类实现的。然而，你还可以将 .active 应用到 <button> 上（包含 aria-pressed=“true” 属性)），并通过编程的方式使其处于激活状态。
禁用状态
在Bootstrap中为 <button> 元素添加 disabled 属性，使其表现出禁用状态。
在Bootstrap中为 <input> 元素添加 disabled 属性，使其表现出禁用状态。
在Bootstrap中可使用为基于 <a> 元素创建的按钮添加 .disabled 类，使其表现出禁用状态。
按钮案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按钮</title>
<!--移动设备优先，即获得更好的响应式支持-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--引入Bootstrap的css文件-->
<link rel="stylesheet" href="../Bootstrap/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<!--3种基本按钮，其默认样式为btn btn-default-->
<input class="btn btn-default" type="button" value="按钮">
<button class="btn btn-default" >按钮</button>
<a href="" class="btn btn-default" >按钮</a>
<br><br>
<!--按钮的预定义样式-->
<button class="btn btn-default">默认按钮</button>
<button class="btn btn-primary">首选项按钮</button>
<button class="btn btn-info">一般信息按钮</button>
<button class="btn btn-success">成功按钮</button>
<button class="btn btn-warning">警告按钮</button>
<button class="btn btn-danger">危险按钮</button>
<button class="btn btn-link">链接按钮</button>
<br><br>
<!--不同尺寸的按钮-->
<button class="btn btn-danger btn-lg">大按钮</button>
<button class="btn btn-danger">默认大小按钮</button>
<button class="btn btn-danger btn-sm">小按钮</button>
<button class="btn btn-danger btn-xs">超小按钮</button>
<br><br>
<!--块级按钮-->
<button class="btn btn-danger btn-block">登录</button>
<button class="btn btn-info btn-block">注册</button>
<br><br>
<!--按钮的状态-->
<a href="" class="btn btn-primary active">激活状态下的按钮</a>
<a href="" class="btn btn-primary disabled">禁用状态下的按钮</a>
<br><br>
<button class="btn btn-default active" >激活状态下的按钮</button>
<button class="btn btn-default" disabled="disabled">禁用状态下的按钮</button>
<br><br>
<input class="btn btn-default active" type="button" value="激活状态下的按钮">
<input class="btn btn-default active" type="button" disabled value="禁用状态下的按钮">
</div>
</body>
</html>
扫描二维码关注公众号，回复：
16108382 查看本文章
