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 = " 提交 " >
嘗試一下»
結果如下所示: