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：


實例

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 按钮选项</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<!-- 标准的按钮 -->
<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>

</body>
</html>

#運行實例»##點擊"運行實例"按鈕查看線上實例



按鈕大小

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

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

下面的實例示範了上面所有的按鈕class：


實例

#
<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 按钮大小</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></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">
      默认大小的原始按钮
   </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>

</body>
</html>

運行實例»

點擊"運行實例" 按鈕查看線上實例

按鈕狀態

Bootstrap 提供了啟動、停用等按鈕狀態的class，以下將進行詳細解說。

啟動狀態

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

下表列出了讓按鈕元素和錨元素呈現啟動狀態的class：

#按鈕元素
#元素
新增

.active

class 來顯示它是啟動的。

錨元素

新增 .active class 到 <a> 按鈕來顯示它是啟動的。


下面的實例示範了這一點：


實例

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 按钮激活状态</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

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

</body>
</html>

運行實例»點擊"運行實例" 按鈕查看線上實例#停用狀態當您停用一個按鈕時，它的顏色會變淡50%，並失去漸層。 #元素
下表列出了讓按鈕元素和錨元素呈現停用狀態的class：


##按鈕元素

新增disabled

屬性

到<button> 按鈕。

錨元素

新增

disabled

class

到 <a> 按鈕。
注意：該 class 只會改變 <a> 的外觀，不會改變它的功能。在這裡，您需要使用自訂的 JavaScript 來停用連結。


###實例######
下面的实例演示了这点：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 按钮禁用状态</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

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

</body>
</html>
#########執行實例» ######點擊"運行實例" 按鈕查看線上實例#########按鈕標籤#######您可以在<a>、<button> 或<input>元素上使用按鈕class。但建議您在 <button> 元素上使用按鈕 class，以避免跨瀏覽器的不一致問題。 ######下面的實例示範了這一點：#########實例######
<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 按钮标签</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></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>
#########運行實例»######點擊"運行實例" 按鈕查看線上實例################