Bootstrap?按鈕

注：本系列轉載于菜鳥教程，僅用以自己學習總結和使用，只會顯示自己學習使用的內容，

詳細內容可以查看菜鳥教程網址：https://www.runoob.com/bootstrap/bootstrap-buttons.html

任何帶有 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：

Class描述

.btn-lg	這會讓按鈕看起來比較大。
.btn-sm	這會讓按鈕看起來比較小。
.btn-xs	這會讓按鈕看起來特別小。
.btn-block	這會創建塊級的按鈕，會橫跨父元素的全部寬度。

按鈕狀態

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

激活狀態

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

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

元素Class

按鈕元素	添加?.active?class 來顯示它是激活的。
錨元素	添加?.active?class 到 <a> 按鈕來顯示它是激活的。

禁用狀態

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

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

元素Class

按鈕元素	添加?disabled?屬性?到 <button> 按鈕。
錨元素	添加?disabled?class?到 <a> 按鈕。

按鈕標簽

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

自適應大小的按鈕組

可以通過 .btn-group-justified 類來設置自適應大小的按鈕組。

內嵌下拉菜單的按鈕組

按鈕組內嵌的按鈕可以設置下拉菜單

總結

以上是生活随笔為你收集整理的Bootstrap系列---按钮的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。