第六章 按钮
| 类 | 描述 |
| .btn | 为按钮添加基本样式 |
| – | – |
| .btn-default | 默认/标准按钮 |
| – | – |
| .btn-primary | 原始按钮样式（未被操作） |
| – | – |
| .btn-success | 表示成功的动作 |
| – | – |
| .btn-info | 该样式可用于要弹出信息的按钮 |
| – | – |
| .btn-warning | 表示需要谨慎操作的按钮 |
| – | – |
| .btn-danger | 表示一个危险动作的按钮操作 |
| – | – |
| .btn-link | 让按钮看起来像个链接 (仍然保留按钮行为) |
| – | – |
| .btn-lg | 制作一个大按钮 |
| – | – |
| .btn-sm | 制作一个小按钮 |
| – | – |
| .btn-xs | 制作一个超小按钮 |
| – | – |
| .btn-block | 块级按钮(拉伸至父元素100%的宽度) |
| – | – |
| .active | 按钮被点击 |
| – | – |
| .disabled | 禁用按钮 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../bs/css/bootstrap.css"/>
</head>
<body>
<div class="container">
<button class="btn btn-info btn-lg">点击</button>
<button class="btn btn-success btn-sm">点击</button>
<button class="btn btn-warning btn-xs active">点击</button>
<button class="btn btn-warning disabled btn-block">点击</button>
<a href="">链接</a>
<button class="btn btn-link">链接</button>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../bs/css/bootstrap.css"/>
</head>
<body>
<div class="container">
<input type="button" value="点击">
<button>点击</button>
<p class="btn btn-default">点击</p>
<button class="btn btn-default">点击</button>
<button class="btn btn-primary">点击</button>
<button class="btn btn-danger">点击</button>
<button class="btn btn-info">点击</button>
<button class="btn btn-success">点击</button>
<button class="btn btn-warning">点击</button>
</div>
</body>
</html>
![响应式前端框架Bootstrap系列（15）面板[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)