标签：
| 类 | 描述 |
|---|---|
| .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 |
禁用按钮 |
<html lang="en"> <head> <!--网站编码格式，UTF-8 国际编码，GBK或 gb2312 中文编码--> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="Keywords" content="关键词一，关键词二"> <meta name="Description" content="网站描述内容"> <meta name="Author" content="Yvette Lau"> <meta name = "viewport" content = " width = device-width, initial-scale = 1 "> <title>BootstrapDemo</title> <!--css js 文件的引入--> <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css"> </head> <body style="padding: 20px;"> <!-- 标准的按钮 --> <button type="button" class="btn btn-default">默认按钮</button> <!-- 提供额外的视觉效果，标识一组按钮中的原始动作 --> <button type="button" class="btn btn-primary">原始按钮</button> <!-- 表示一个成功的或积极的动作 --> <button type="button" class="btn btn-success">成功按钮</button> <!-- 用于要弹出信息的按钮 --> <button type="button" class="btn btn-info">信息按钮</button> <!-- 表示应谨慎操作的动作 --> <button type="button" class="btn btn-warning">警告按钮</button> <!-- 表示一个危险动作的按钮 --> <button type="button" class="btn btn-danger">危险按钮</button> <!-- 让按钮看起来像一个链接，但同时保持按钮的行为 --> <button type="button" class="btn btn-link">链接按钮</button> </body> </html>
<body style="padding: 20px;width:500px;"> <!-- 标准的按钮 --> <button type="button" class="btn btn-default">默认按钮</button> <button type="button" class="btn btn-lg btn-default">大的默认按钮</button> <br/><br/> <!-- 提供额外的视觉效果，标识一组按钮中的原始动作 --> <button type="button" class="btn btn-primary">原始按钮</button> <button type="button" class="btn btn-sm btn-primary">小的原始按钮</button> <br/><br/> <!-- 表示一个成功的或积极的动作 --> <button type="button" class="btn btn-success">成功按钮</button> <button type="button" class="btn btn-xs btn-success">特别小的成功按钮</button> <br/><br/> <!-- 用于要弹出信息的按钮 --> <button type="button" class="btn btn-info">信息按钮</button><br/><br/> <button type="button" class="btn btn-block btn-info">块级信息按钮</button> </body>
<body style="padding: 20px;width:500px;"> <!-- 标准的按钮 --> <button type="button" class="btn btn-default">默认按钮</button> <button type="button" class="btn btn-default active">激活的默认按钮</button> <br/><br/> <!-- 提供额外的视觉效果，标识一组按钮中的原始动作 --> <button type="button" class="btn btn-primary">原始按钮</button> <button type="button" class="btn btn-primary active">激活的原始按钮</button> <br/><br/> <!-- 表示一个成功的或积极的动作 --> <button type="button" class="btn btn-success">成功按钮</button> <button type="button" class="btn btn-success active">激活的成功按钮</button> <br/><br/> <!-- 用于要弹出信息的按钮 --> <button type="button" class="btn btn-info">信息按钮</button> <button type="button" class="btn btn-info active">激活的信息按钮</button> <br/><br/> <button type="button" class="btn btn-default">默认按钮</button> <button type="button" class="btn btn-default disabled">禁用的默认按钮</button> <br/><br/> <!-- 提供额外的视觉效果，标识一组按钮中的原始动作 --> <button type="button" class="btn btn-primary">原始按钮</button> <button type="button" class="btn btn-primary disabled">禁用的原始按钮</button> <br/><br/> <!-- 表示一个成功的或积极的动作 --> <button type="button" class="btn btn-success">成功按钮</button> <button type="button" class="btn btn-success disabled">禁用的成功按钮</button> <br/><br/> <!-- 用于要弹出信息的按钮 --> <button type="button" class="btn btn-info">信息按钮</button> <button type="button" class="btn btn-info disabled">禁用的信息按钮</button> </body>
<body style="padding: 20px;"> <a class="btn btn-default" href="#" role="button">超链接按钮</a> <button class="btn btn-default btn-primary" type="submit">button按钮</button> <input class="btn btn-default btn-success" type="button" value="input按钮"> <input class="btn btn-default btn-info" type="submit" value="submit按钮"> </body>
标签：
原文地址：http://blog.csdn.net/liuyan19891230/article/details/50448310
