Bootstrap 按鈕

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

以下樣式可用于<a>, <button>, 或 <input> 元素上：

類 描述 實(shí)例
.btn 為按鈕添加基本樣式 嘗試一下
.btn-default 默認(rèn)/標(biāo)準(zhǔn)按鈕 嘗試一下
.btn-primary 原始按鈕樣式（未被操作） 嘗試一下
.btn-success 表示成功的動(dòng)作 嘗試一下
.btn-info 該樣式可用于要彈出信息的按鈕 嘗試一下
.btn-warning 表示需要謹(jǐn)慎操作的按鈕 嘗試一下
.btn-danger 表示一個(gè)危險(xiǎn)動(dòng)作的按鈕操作 嘗試一下
.btn-link 讓按鈕看起來像個(gè)鏈接 (仍然保留按鈕行為) 嘗試一下
.btn-lg 制作一個(gè)大按鈕 嘗試一下
.btn-sm 制作一個(gè)小按鈕 嘗試一下
.btn-xs 制作一個(gè)超小按鈕 嘗試一下
.btn-block 塊級按鈕(拉伸至父元素100%的寬度) 嘗試一下
.active 按鈕被點(diǎn)擊 嘗試一下
.disabled 禁用按鈕 嘗試一下

下面的實(shí)例演示了上面所有的按鈕 class：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實(shí)例 - 按鈕選項(xiàng)</title>
   <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>

<!-- 標(biāo)準(zhǔn)的按鈕 -->
<button type="button" class="btn btn-default">默認(rèn)按鈕</button>

<!-- 提供額外的視覺效果，標(biāo)識一組按鈕中的原始動(dòng)作 -->
<button type="button" class="btn btn-primary">原始按鈕</button>

<!-- 表示一個(gè)成功的或積極的動(dòng)作 -->
<button type="button" class="btn btn-success">成功按鈕</button>

<!-- 信息警告消息的上下文按鈕 -->
<button type="button" class="btn btn-info">信息按鈕</button>

<!-- 表示應(yīng)謹(jǐn)慎采取的動(dòng)作 -->
<button type="button" class="btn btn-warning">警告按鈕</button>

<!-- 表示一個(gè)危險(xiǎn)的或潛在的負(fù)面動(dòng)作 -->
<button type="button" class="btn btn-danger">危險(xiǎn)按鈕</button>

<!-- 并不強(qiáng)調(diào)是一個(gè)按鈕，看起來像一個(gè)鏈接，但同時(shí)保持按鈕的行為 -->
<button type="button" class="btn btn-link">鏈接按鈕</button>

</body>
</html>

嘗試一下 ?

結(jié)果如下所示：


按鈕大小

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

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

下面的實(shí)例演示了上面所有的按鈕 class：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實(shí)例 - 按鈕大小</title>
   <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>

<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">
      默認(rèn)大小的原始按鈕
   </button>
   <button type="button" class="btn btn-default">
      默認(rèn)大小的按鈕
   </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>

</body>
</html>

嘗試一下 ?

結(jié)果如下所示：


按鈕狀態(tài)

Bootstrap 提供了激活、禁用等按鈕狀態(tài)的 class，下面將進(jìn)行詳細(xì)講解。

激活狀態(tài)

按鈕在激活時(shí)將呈現(xiàn)為被按壓的外觀（深色的背景、深色的邊框、陰影）。

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

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

下面的實(shí)例演示了這點(diǎn)：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實(shí)例 - 按鈕激活狀態(tài)</title>
   <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>

<p>
   <button type="button" class="btn btn-default btn-lg ">
      默認(rèn)按鈕
   </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>

</body>
</html>

嘗試一下 ?

結(jié)果如下所示：


禁用狀態(tài)

當(dāng)您禁用一個(gè)按鈕時(shí)，它的顏色會變淡 50%，并失去漸變。

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

元素Class
按鈕元素添加 disabled 屬性 到 <button> 按鈕。
錨元素添加 disabled class 到 <a> 按鈕。
注意：該 class 只會改變 <a> 的外觀，不會改變它的功能。在這里，您需要使用自定義的 JavaScript 來禁用鏈接。

下面的實(shí)例演示了這點(diǎn)：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實(shí)例 - 按鈕禁用狀態(tài)</title>
   <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>

<p>
   <button type="button" class="btn btn-default btn-lg">
      默認(rèn)按鈕
   </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>

</body>
</html>

嘗試一下 ?

結(jié)果如下所示：


按鈕標(biāo)簽

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

下面的實(shí)例演示了這點(diǎn)：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實(shí)例 - 按鈕標(biāo)簽</title>
   <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>

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

</body>
</html>

嘗試一下 ?

結(jié)果如下所示：