本章將通過(guò)實(shí)例講解如何使用響應式網(wǎng)站按鈕。任何帶有 class .btn 的元素都會(huì )繼承圓角灰色按鈕的默認外觀(guān)。但是響應式網(wǎng)站提供了一些選項來(lái)定義按鈕的樣式,具體如下表所示:
以下樣式可用于,
| 類(lèi) | 描述 |
|---|---|
| .btn | 為按鈕添加基本樣式 |
| .btn-default | 默認/標準按鈕 |
| .btn-primary | 原始按鈕樣式(未被操作) |
| .btn-success | 表示成功的動(dòng)作 |
| .btn-info | 該樣式可用于要彈出信息的按鈕 |
| .btn-warning | 表示需要謹慎操作的按鈕 |
| .btn-danger | 表示一個(gè)危險動(dòng)作的按鈕操作 |
| .btn-link | 讓按鈕看起來(lái)像個(gè)鏈接 (仍然保留按鈕行為) |
| .btn-lg | 制作一個(gè)大按鈕 |
| .btn-sm | 制作一個(gè)小按鈕 |
| .btn-xs | 制作一個(gè)超小按鈕 |
| .btn-block | 塊級按鈕(拉伸至父元素100%的寬度) |
| .active | 按鈕被點(diǎn)擊 |
| .disabled | 禁用按鈕 |
按鈕大小
下表列出了獲得各種大小按鈕的 class:
| Class | 描述 |
|---|---|
| .btn-lg | 這會(huì )讓按鈕看起來(lái)比較大。 |
| .btn-sm | 這會(huì )讓按鈕看起來(lái)比較小。 |
| .btn-xs | 這會(huì )讓按鈕看起來(lái)特別小。 |
| .btn-block | 這會(huì )創(chuàng )建塊級的按鈕,會(huì )橫跨父元素的全部寬度。 |
代碼如下:
