按鈕類

Created: November-22, 2018

Bootstrap 為樣式按鈕提供了多個類，使它們脫穎而出。

可以通過將 .btn 類新增到元素來建立引導按鈕。

Bootstrap 類	角色（顏色）
`.btn-default`	標準按鈕（白色）
`.btn-primary`	提供額外的視覺重量並識別主要動作（藍色）
`.btn-success`	用於表示成功的操作（綠色）
`.btn-info`	用於提供資訊的上下文按鈕（淺藍色）
`.btn-warning`	表示使用者應該小心謹慎（黃色）
`.btn-danger`	表示危險或消極行為（紅色）
`.btn-link`	讓你的按鈕看起來像一個錨標籤。

按鈕大小

你還可以使用 .btn-size 類建立不同大小的按鈕

Bootstrap 類	結果
`.btn-lg`	建立一個更大的按鈕
`.btn-sm`	建立一個較小的按鈕
`.btn-xs`	建立一個超小按鈕
`.btn-block`	按鈕成為塊級元素並跨越其父級的整個寬度

使按鈕啟用

active 類將按下按鈕。

<button type="button" class="btn btn-primary active">Active Primary</button>

禁用按鈕

將 disabled 類新增到按鈕將使按鈕不可單擊，並在將滑鼠懸停在其上時顯示禁用的游標。

<button type="button" class="btn btn-primary disabled">Disabled Primary</button>

一起水平渲染按鈕

使用 .btn-group 類可以水平渲染多個按鈕。只需將按鈕包裝在容器元素中，並將該元素賦予 btn-group 類。

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apples</button>
  <button type="button" class="btn btn-primary">Oranges</button>
  <button type="button" class="btn btn-primary">Pineapples</button>
</div>

垂直渲染按鈕

將 .btn-group-vertical 類應用於容器元素

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Apples</button>
  <button type="button" class="btn btn-primary">Oranges</button>
  <button type="button" class="btn btn-primary">Pineapples</button>
</div>

使按鈕組佔據全寬

包裹在 .btn-group 元素內的按鈕只佔用所需的寬度。要使組跨越螢幕的整個寬度，請使用 .btn-group-justified 代替。

<div class="btn-group btn-group-justified">
  <a href="#" class="btn btn-primary">Apples</a>
  <a href="#" class="btn btn-primary">Oranges</a>
  <a href="#" class="btn btn-primary">Pineapples</a>
</div>