站點中事件的觸發往往依賴于button或者超連結。是以，button能夠覺得是站點不可或缺的元件。
而BootStrap也包括了大量的button，可是與其它的庫有非常大的差别。本文則是對怎樣在BootStrap中使用button進行了解說。
button樣式
不論什麼僅僅要賦予了.btn這個類的Dom對象會自己主動繼承預設樣式：圓角灰色button。除此之外，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. | <button type=”button”>Link Button</button> |
button狀态
BootStrap也提供了改動button狀态：active或者disabled的類。
激活狀态
button呈現為按下的狀态（含陰影的深灰色背景），下表解釋了使用方法。
| Element | Class | Description | Example |
| Button element | .active | Use .active class to show that it is activated. | <button type=”button”> Active Button </button> |
失效狀态
當禁止某個button時。它的顔色會褪色50%而且失去其梯度權重。
| disabled | Add the disabled attribute to <button> buttons. | <button type=”button” disabled=”disabled”> Disabled Button | |
| Anchor element | Add the disabled class to <a> buttons. | <a href=”#” role=”button”> Disabled Link </a> |
button大小
| .btn-lg | This makes button size large. | Large Primary button |
| .btn-sm | This makes button size small. | Small Primary button |
| .btn-xs | This makes button size extra small. | Extra small Primary button |
| .btn-block | This creates block level buttons. | Block level Primary 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="[email protected]" 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> 
![Docker - Dockerfile之ADD、COPY、WORKDIR、USER、EXPOSE指令詳解[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)