Latest web development tutorials

Bootstrap 按鈕

本章將通過實例講解如何使用Bootstrap 按鈕。 任何帶有class.btn的元素都會繼承圓角灰色按鈕的默認外觀。但是Bootstrap 提供了一些選項來定義按鈕的樣式,具體如下表所示:

以下樣式可用於<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:

實例

<!-- 標準的按鈕 --> < button type = " button " class = " btn btn-default " > 默認按鈕 </ button > <!-- 提供額外的視覺效果,標識一組按鈕中的原始動作 --> < button type = " button " class = " btn btn-primary " > 原始按鈕 </ button > <!-- 表示一個成功的或積極的動作 --> < button type = " button " class = " btn btn-success " > 成功按鈕 </ button > <!-- 信息警告消息的上下文按鈕 --> < button type = " button " class = " btn btn-info " > 信息按鈕 </ button > <!-- 表示應謹慎採取的動作 --> < button type = " button " class = " btn btn-warning " > 警告按鈕 </ button > <!-- 表示一個危險的或潛在的負面動作 --> < button type = " button " class = " btn btn-danger " > 危險按鈕 </ button > <!-- 並不強調是一個按鈕,看起來像一個鏈接,但同時保持按鈕的行為 --> < button type = " button " class = " btn btn-link " > 鏈接按鈕 </ button >

嘗試一下»

結果如下所示:

按鈕選項

按鈕大小

下表列出了獲得各種大小按鈕的class:

Class描述
.btn-lg这会让按钮看起来比较大。
.btn-sm这会让按钮看起来比较小。
.btn-xs这会让按钮看起来特别小。
.btn-block这会创建块级的按钮,会横跨父元素的全部宽度。

下面的實例演示了上面所有的按鈕class:

實例

< 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 >

嘗試一下»

結果如下所示:

按鈕大小

按鈕狀態

Bootstrap 提供了激活、禁用等按鈕狀態的class,下面將進行詳細講解。

激活狀態

按鈕在激活時將呈現為被按壓的外觀(深色的背景、深色的邊框、陰影)。

下表列出了讓按鈕元素和錨元素呈激活狀態的class:

元素Class
按钮元素添加.activeclass 来显示它是激活的。
锚元素添加 .activeclass 到 <a> 按钮来显示它是激活的。

下面的實例演示了這點:

實例

< p > < button type = " button " class = " btn btn-default btn-lg " > 默認按鈕 </ button > < button type = " button " class = " btn btn-default btn-lg active " > 激活按鈕 </ button > </ p > < p > < button type = " button " class = " btn btn-primary btn-lg " > 原始按鈕 </ button > < button type = " button " class = " btn btn-primary btn-lg active " > 激活的原始按鈕 </ button > </ p >

嘗試一下»

結果如下所示:

按鈕激活狀態

禁用狀態

當您禁用一個按鈕時,它的顏色會變淡50%,並失去漸變。

下表列出了讓按鈕元素和錨元素呈禁用狀態的class:

元素Class
按钮元素添加 disabled属性到 <button> 按钮。
锚元素添加 disabledclass到 <a> 按钮。
注意:该 class 只会改变 <a> 的外观,不会改变它的功能。在这里,您需要使用自定义的 JavaScript 来禁用链接。

下面的實例演示了這點:

實例

< p > < button type = " button " class = " btn btn-default btn-lg " > 默認按鈕 </ button > < button type = " button " class = " btn btn-default btn-lg " disabled = " disabled " > 禁用按鈕 </ button > </ p > < p > < button type = " button " class = " btn btn-primary btn-lg " > 原始按鈕 </ button > < button type = " button " class = " btn btn-primary btn-lg " disabled = " disabled " > 禁用的原始按鈕 </ button > </ p > < p > < a href = " # " class = " btn btn-default btn-lg " role = " button " > 鏈接 </ a > < a href = " # " class = " btn btn-default btn-lg disabled " role = " button " > 禁用鏈接 </ a > </ p > < p > < a href = " # " class = " btn btn-primary btn-lg " role = " button " > 原始鏈接 </ a > < a href = " # " class = " btn btn-primary btn-lg disabled " role = " button " > 禁用的原始鏈接 </ a > </ p >

嘗試一下»

結果如下所示:

按鈕禁用狀態

按鈕標籤

您可以在<a>、<button> 或<input> 元素上使用按鈕class。 但是建議您在<button> 元素上使用按鈕class,避免跨瀏覽器的不一致性問題。

下面的實例演示了這點:

實例

< a class = " btn btn-default " href = " # " role = " button " > 鏈接 </ a > < button class = " btn btn-default " type = " submit " > 按鈕 </ button > < input class = " btn btn-default " type = " button " value = " 輸入 " > < input class = " btn btn-default " type = " submit " value = " 提交 " >

嘗試一下»

結果如下所示:

按鈕標籤