昨天我們看了看bootstrap的網（柵）格系統，想必都對bootstrap網格系統有個大致的了解，今天我們再來看看bootstrap的按鈕組合。

按鈕的樣式

在boostrap中，任何帶有 class?.btn?的元素都會繼承圓角灰色按鈕的默認外觀。但是 Bootstrap 提供了一些選項來定義按鈕的樣式，具體如下表所示：

以下樣式可用于超鏈接，表單以及button上

類描述

.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	禁用按鈕

上面列出了這么多的按鈕樣式，下面我們來通過一段代碼的運行結果讓大家對各個按鈕有個基本的照面：

<!-- 標準的按鈕 --> <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">鏈接按鈕</butto

運行結果：

上面按鈕的樣式大家也都看到了，那么問題來了，按鈕只能是這么大嗎？按鈕的大小能否進行更改？——按鈕的大小可以更改。

按鈕的大小

改按鈕大小之前，我們先看看如何進行更改，改按鈕的大小需要遵循那些規范呢？我們可以通過一個表格來說明這個問題：

Class描述

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

class：需要寫的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>

運行結果：

下面在介紹幾種按鈕的狀態：

激活按鈕

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

運行結果：

禁用按鈕

<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 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="提交">

運行結果：

按鈕組

<div?class="container"><h2>按鈕組</h2><p>.btn-group 類用于創建按鈕組：</p><div?class="btn-group"><button?type="button"?class="btn btn-primary">蘋果</button><button?type="button"?class="btn btn-success">橘子</button><button?type="button"?class="btn btn-warning">香蕉</button></div> </div>

運行結果：

關于按鈕組的內容我們已經整理完畢，關于bootstrap其他內容，請關注后續文章。

往期推薦

Boostrap技能點整理之【網格系統】

2020-05-26

Boostrap技能點整理之【bootstrap簡介】

2020-05-25

C#基礎知識詳解之【文件的輸入與輸出】

2020-05-23

C#基礎知識詳解之【字段與屬性】

2020-05-24

C#基礎知識詳解之【異常處理】

2020-05-22

C#基礎知識詳解之【值類型和引用類型】

2020-05-21

歡

迎

關

注

公眾號：雄雄的小課堂

CSDN：穆雄雄的博客

總結

以上是生活随笔為你收集整理的Boostrap技能点整理之【按钮样式】的全部內容，希望文章能夠幫你解決所遇到的問題。

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