BootStrap-04按鈕
阿新 • • 發佈：2019-02-04
以下樣式可用於<a>, <button>, 或 <input> 元素上：
| 類 | 描述 | 例項 |
|---|---|---|
| .btn | 為按鈕新增基本樣式 | 嘗試一下 |
| .btn-default | 預設/標準按鈕 | 嘗試一下 |
| .btn-primary | 原始按鈕樣式（未被操作） | 嘗試一下 |
| .btn-success | 表示成功的動作 | 嘗試一下 |
| .btn-info | 該樣式可用於要彈出資訊的按鈕 | 嘗試一下 |
| .btn-warning | 表示需要謹慎操作的按鈕 | 嘗試一下 |
| .btn-danger | 表示一個危險動作的按鈕操作 | 嘗試一下 |
| .btn-link | 讓按鈕看起來像個連結 (仍然保留按鈕行為) | 嘗試一下 |
| .btn-lg | 製作一個大按鈕 | 嘗試一下 |
| .btn-sm | 製作一個小按鈕 | 嘗試一下 |
| .btn-xs | 製作一個超小按鈕 | 嘗試一下 |
| .btn-block | 塊級按鈕(拉伸至父元素100%的寬度) | 嘗試一下 |
| .active | 按鈕被點選 | 嘗試一下 |
| .disabled | 禁用按鈕 | 嘗試一下 |
按鈕大小
| Class | 描述 |
|---|---|
| .btn-lg | 這會讓按鈕看起來比較大。 |
| .btn-sm | 這會讓按鈕看起來比較小。 |
| .btn-xs | 這會讓按鈕看起來特別小。 |
| .btn-block | 這會建立塊級的按鈕，會橫跨父元素的全部寬度。 |
<p> <button type="button" class="btn btn-primary btn-lg">大的原始按鈕</button> <button type="button" class="btn btn-default btn-lg">大的按鈕</button> </p> <p> <button type="button" class="btn btn-primary">預設大小的原始按鈕</button> <button type="button" class="btn btn-default">預設大小的按鈕</button> </p> <p> <button type="button" class="btn btn-primary btn-sm">小的原始按鈕</button> <button type="button" class="btn btn-default btn-sm">小的按鈕</button> </p> <p> <button type="button" class="btn btn-primary btn-xs">特別小的原始按鈕</button> <button type="button" class="btn btn-default btn-xs">特別小的按鈕</button> </p> <p> <button type="button" class="btn btn-primary btn-lg btn-block">塊級的原始按鈕</button> <button type="button" class="btn btn-default btn-lg btn-block">塊級的按鈕</button> </p>