Bootstrap Buttons
按鈕樣式
Bootstrap 提供了不同的按鈕樣式
要實現上述按鈕樣式，Bootstrap 使用了以下類
.btn.btn-default.btn-primary.btn-success.btn-info.btn-warning.btn-danger.btn-link
下面的示例展示了不同按鈕樣式的程式碼
示例
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-default">預設</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
自己動手試一試 »
按鈕類可以用於 <a>、<button> 或 <input> 元素
示例
<a href="#" class="btn btn-info" role="button">連結按鈕</a>
<button type="button" class="btn btn-info">按鈕</button>
<input type="button" class="btn btn-info" value="輸入按鈕">
<input type="submit" class="btn btn-info" value="提交按鈕">
自己動手試一試 »
為什麼我們在連結的 href 屬性中放置 #？
由於我們沒有要連結的頁面，並且不希望出現“404”訊息，因此我們在示例中使用了“#”。它應該是一個指向特定頁面的真實 URL。
按鈕大小
Bootstrap 提供了四種按鈕尺寸
定義不同尺寸的類是
.btn-lg.btn-sm.btn-xs
下面的示例展示了不同按鈕尺寸的程式碼
示例
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">標準</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">超小號</button>
自己動手試一試 »
塊級按鈕
塊級按鈕跨越父元素的全部寬度。
新增類 .btn-block 來建立塊級按鈕
活動/停用按鈕
按鈕可以設定為活動（顯示為按下狀態）或停用（不可點選）狀態
類 .active 使按鈕顯示為按下狀態，而類 .disabled 使按鈕不可點選
示例
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">停用主按鈕</button>
自己動手試一試 »
完整的 Bootstrap 按鈕參考
有關所有按鈕類的完整參考，請訪問我們完整的 Bootstrap 按鈕參考。
