這里所說的按鈕只是Bootstrap設計的能使標簽或元素呈現按鈕樣式的屬性，所以為 <a>、<button> 或 <input> 元素添加按鈕類（button class）即可使用 Bootstrap 提供的樣式。
當然在實際開發中使用Bootstrap，我們可能在任何地方使用按鈕，但是你也可能會發現並不是所有的按鈕都能按照你的想法去呈現，所以，按鈕使用的一些注意事項我們要記住。我們看看官網給我們提出的注意事項。
（1）針對組件的注意事項
雖然按鈕類可以應用到 <a> 和 <button> 元素上，但是，導航和導航條組件只支持 <button> 元素。
（2）鏈接被作為按鈕使用時的注意事項
如果 <a> 元素被作為按鈕使用 -- 並用於在當前頁面觸發某些功能 -- 而不是用於鏈接其他頁面或鏈接當前頁面中的其他部分，那么，務必為其設置 role="button" 屬性。
（3）跨瀏覽器展現
我們總結的最佳實踐是：強烈建議盡可能使用 <button> 元素來獲得在各個瀏覽器上獲得相匹配的繪制效果。
另外，我們還發現了 Firefox <30 版本的瀏覽器上出現的一個 bug，其表現是：阻止我們為基於 <input> 元素所創建的按鈕設置 line-height 屬性，這就導致在 Firefox 瀏覽器上不能完全和其他按鈕保持一致的高度。
我個人在使用中，發現了一個很不好的現象，就是使用<button>時候，為標簽添加id屬性，使用js操作button的時候，你會發現，在Bootstrap某些組件中JS操作不了這個button，但是當你把<button></button>換成<input />的時候，你會發現你的使用js控制了。具體什么原因我也不知道，也沒什么時間深究，可能是Bootstrap的js設置了某些東西吧。所以建議大家在使用button時，需要js操作的，就用input或者a標簽。
下面來看看預定義樣式
Code<!-- Standard button -->
<button type="button" class="btn btn-default">（默認樣式）Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首選項）Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危險）Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（鏈接）Link</button>
所對應呈現的樣式
當然我們也可以調整button的大小
Code<p>
<button type="button" class="btn btn-primary btn-lg">（大按鈕）Large button</button>
<button type="button" class="btn btn-default btn-lg">（大按鈕）Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">（默認尺寸）Default button</button>
<button type="button" class="btn btn-default">（默認尺寸）Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">（小按鈕）Small button</button>
<button type="button" class="btn btn-default btn-sm">（小按鈕）Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
<button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
</p>
呈現的效果：
而且還有，通過給按鈕添加 .btn-block 類可以將其拉伸至父元素100%的寬度，而且按鈕也變為了塊級（block）元素。
Code<button type="button" class="btn btn-primary btn-lg btn-block">（塊級元素）Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">（塊級元素）Block level button</button>
下面介紹下按鈕的激活狀態
當按鈕處於激活狀態時，其表現為被按壓下去（底色更深、邊框夜色更深、向內投射陰影）。對於 <button> 元素，是通過 :active 狀態實現的。對於 <a> 元素，是通過 .active 類實現的。然而，你還可以將 .active 應用到 <button>上（包含 aria-pressed="true" 屬性)），並通過編程的方式使其處於激活狀態。
那么我們怎么呈現激活狀態呢？由於 :active 是偽狀態，因此無需額外添加，但是在需要讓其表現出同樣外觀的時候可以添加 .active 類。
Code<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>
有激活狀態，當然也會有禁用狀態，在Bootstrap中通過為按鈕的背景設置 opacity 屬性就可以呈現出無法點擊的效果。
Code<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
提示：
上面提到的禁用狀態類只是通過設置 pointer-events: none 來禁止 <a> 元素作為鏈接的原始功能，但是，這一 CSS 屬性並沒有被標准化，並且 Opera 18 及更低版本的瀏覽器並沒有完全支持這一屬性，同樣，Internet Explorer 11 也不支持。In addition, even in browsers that do support pointer-events: none, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. 因此，為了安全起見，建議通過 JavaScript 代碼來禁止鏈接的原始功能。
更多有關Bootstrap的使用，請參考官方文檔。
