Bootstrap之按鈕的樣式

2021-10-05 18:49:49 字數 3052 閱讀 6857

在bootstrap中, 按鈕(button)有不同的六種方式. 預設的button的樣式是: btn. 這個是必要的樣式. 還有其他的六種不同方式展現.分別為: 預設, 主要, 成功, 資訊, 警告, 危險, 鏈結.今天我們就來仔細**下按鈕的風格樣式。

使用class可以快速建立乙個帶有樣式的按鈕。

"button"

class

="btn btn-default"

>default<

/button>

"button"

class

="btn btn-primary"

>primary<

/button>

"button"

class

="btn btn-success"

>success<

/button>

"button"

class

="btn btn-info"

>info<

/button>

"button"

class

="btn btn-warning"

>warning<

/button>

"button"

class

="btn btn-danger"

>danger<

/button>

"button"

class

="btn btn-link"

>鏈結<

需要讓按鈕具有不同尺寸嗎?使用.btn-lg、.btn-sm、.btn-xs可以獲得不同尺寸的按鈕。

通過給按鈕新增.btn-block可以使其充滿父節點100%的寬度,而且按鈕也變為了塊級(block)元素。

"button"

class

="btn btn-primary btn-lg btn-block"

>block level button<

/button>

"button"

class

="btn btn-default btn-lg btn-block"

>block level button<

/button>

當按鈕處於活動狀態時,其表現為被按壓下(底色更深,邊框夜色更深,內建陰影)。對於b元素,是通過:active實現的。對於元素,是通過.active實現的。然而,你還可以聯合使用.active並通過程式設計的方式使其處於活動狀態。

按鈕元素

由於:active是偽狀態,因此 無需新增,但是在需要表現出同樣外觀的時候可以新增.active。

鏈結元素

為新增.disabledclass。

"#"class

="btn btn-primary btn-lg disabled" role=

"button"

>primary link<

/a>

"#"class

="btn btn-default btn-lg disabled" role=

"button"

>link<

/a>

button按鈕的樣式很多種。主要是靈活的執行這幾個樣式進行控制就可以了。

303 bootstrap 之 按鈕樣式

一 按鈕 1 模式樣式 class btn btn default 預設樣式 default 2 藍色 class btn btn primary 首選項 primary 3 綠色 class btn btn success 成功 success 4 淺藍色 class btn btn info 一...

bootstrap框架之按鈕

基礎用法 tyoe button class btn btn default button class btn group type button class btn btn default button div class btn group vertical type button class ...

Bootstrap筆記 按鈕

確定要刪除嗎?修改內容 修改內容 修改內容 修改內容 btn 是按鈕樣式的基類,在新增其他樣式前,必須先新增btn btn primary btn default btn success btn warning btn danger active 啟用 設定按鈕大小 btn lg btn md bt...