原文地址：http://www.phloxblog.in/bootstrap-buttons/#.U5xYso2fclm
网站中事件的触发往往依赖于按钮或者超链接，因此，按钮可以认为是网站不可或缺的组件。而BootStrap也包含了大量的按钮，但是与其他的库有很大的区别。本文则是对如何在BootStrap中使用按钮进行了讲解。
任何只要赋予了.btn这个类的Dom对象会自动继承默认样式：圆角灰色按钮。除此之外，BootStrap也提供了其他的样式选项，如下表所示：
|
类名 |
描述 |
颜色 |
实例 |
|
btn |
Default/ Standard button. |
White |
<button type=”button”>Default Button</button> |
|
btn-primary |
Identifies the primary action . |
Blue |
<button type=”button”>Primary Button</button> |
|
btn-success |
Indicates a successful action. |
Green |
<button type=”button”>Success Button</button> |
|
btn-warning |
Indicates caution. |
Yellow |
<button type=”button”>Warning Button</button> |
|
btn-danger |
Indicates a dangerous action. |
Red |
<button type=”button”>Danger Button</button> |
|
btn-link |
Making a button look like link. |
Blue |
<button type=”button”>Link Button</button> |
BootStrap也提供了修改按钮状态：active或者disabled的类。
按钮呈现为按下的状态（含阴影的深灰色背景），下表解释了用法。
|
Element |
Class |
Description |
Example |
|
Button element |
.active |
Use .active class to show that it is activated. |
<button type=”button”> Active Button </button> |
当禁止某个按钮时，它的颜色会褪色50%并且失去其梯度权重。
|
Element |
Class |
Description |
Example |
|
Button element |
disabled |
Add the disabled attribute to <button> buttons. |
<button type=”button” disabled=”disabled”> Disabled Button </button> |
|
Anchor element |
disabled |
Add the disabled class to <a> buttons. |
<a href=”#” role=”button”> Disabled Link </a> |
|
Class |
Description |
Example |
|
.btn-lg |
This makes button size large. |
<button type=”button”> Large Primary button </button> |
|
.btn-sm |
This makes button size small. |
<button type=”button”> Small Primary button </button> |
|
.btn-xs |
This makes button size extra small. |
<button type=”button”> Extra small Primary button </button> |
|
.btn-block |
This creates block level buttons. |
<button type=”button”> Block level Primary button </button> |
完整的代码如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Try Bootstrap Online</title>
<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
</head>
<body>
<p>
<button type="button" class="btn btn-link btn-lg">Large link button
</button>
</p>
<p>
<button type="button" class="btn btn-primary">
Default size Primary button
</button></p><p>
<button type="button" class="btn btn-default">
Default normal size button
</button>
</p>
<p>
<button type="button" class="btn btn-warning btn-sm">
Small warning button
</button>
</p>
<p>
<button type="button" class="btn btn-success btn-xs">
Extra small success button
</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-lg btn-block btn-lg active">
Block level Active Primary button
</button>
<button type="button" class="btn btn-danger btn-default btn-lg btn-block btn-lg disabled">
Danger Block Disabled button
</button>
</p>
</body>
</html>
BootStrap中的按钮使用,布布扣,bubuko.com
原文地址：http://blog.csdn.net/wxyyxc1992/article/details/30832711
