詳解Bootstrap按鈕

更新時間：2016年01月04日 10:46:18 投稿：mrr

本文給大家介紹bootstrap按鈕相關(guān)知識，包括按鈕大小、按鈕狀態(tài)、按鈕標(biāo)簽相關(guān)樣式定義，對bootstrap按鈕相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧

描述

Bootstrap Button（按鈕）JavaScript 插件允許您加強按鈕的功能。您可以控制按鈕的狀態(tài)，也可以為組件創(chuàng)建按鈕組，比如工具條。

什么是必需的

您必須引用 jquery.js 和 bootstrap-button.js - 這兩個 JavaScript 文件。它們都位于 docs/assets/js 文件夾內(nèi)。

如何使用它

您可以不編寫任何 JavaScript 只通過標(biāo)記使用該插件，也可以通過 JavaScript 啟用按鈕。

Bootstrap 提供了一些選項來定義按鈕的樣式，具體如下表所示：

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

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

首先看下不同顏色的按鈕：

<html lang="en"> 
<head> 
  <!--網(wǎng)站編碼格式，UTF-8 國際編碼，GBK或 gb2312 中文編碼--> 
  <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="Keywords" content="關(guān)鍵詞一，關(guān)鍵詞二"> 
  <meta name="Description" content="網(wǎng)站描述內(nèi)容"> 
  <meta name="Author" content="Yvette Lau"> 
  <meta name = "viewport" content = " width = device-width, initial-scale = 1 "> 
  <title>BootstrapDemo</title> 
  <!--css js 文件的引入--> 
  <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css"> 
</head> 
  <body style="padding: 20px;"> 
    <!-- 標(biāo)準(zhǔn)的按鈕 --> 
    <button type="button" class="btn btn-default">默認(rèn)按鈕</button> 
    <!-- 提供額外的視覺效果，標(biāo)識一組按鈕中的原始動作 --> 
    <button type="button" class="btn btn-primary">原始按鈕</button> 
    <!-- 表示一個成功的或積極的動作 --> 
    <button type="button" class="btn btn-success">成功按鈕</button> 
    <!-- 用于要彈出信息的按鈕 --> 
    <button type="button" class="btn btn-info">信息按鈕</button> 
    <!-- 表示應(yīng)謹(jǐn)慎操作的動作 --> 
    <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>

效果：

btn-default / btn-primary /btn-success/ btn-info/ btn-warning/ btn-danger/ btn-link給按鈕加上了不同的樣式。

按鈕大小

鑒于head部分都是相同的，只列出Body的內(nèi)容。

<body style="padding: 20px;width:500px;"> 
  <!-- 標(biāo)準(zhǔn)的按鈕 --> 
  <button type="button" class="btn btn-default">默認(rèn)按鈕</button> 
  <button type="button" class="btn btn-lg btn-default">大的默認(rèn)按鈕</button> 
  <br/><br/> 
  <!-- 提供額外的視覺效果，標(biāo)識一組按鈕中的原始動作 --> 
  <button type="button" class="btn btn-primary">原始按鈕</button> 
  <button type="button" class="btn btn-sm btn-primary">小的原始按鈕</button> 
  <br/><br/> 
  <!-- 表示一個成功的或積極的動作 --> 
  <button type="button" class="btn btn-success">成功按鈕</button> 
  <button type="button" class="btn btn-xs btn-success">特別小的成功按鈕</button> 
  <br/><br/> 
  <!-- 用于要彈出信息的按鈕 --> 
  <button type="button" class="btn btn-info">信息按鈕</button><br/><br/> 
  <button type="button" class="btn btn-block btn-info">塊級信息按鈕</button> 
</body>

效果如下所示：

按鈕狀態(tài)

按鈕分為active和disabled兩種狀態(tài)、
激活狀態(tài)：按鈕呈現(xiàn)出被按壓的外觀，即背景顏色變深、深色邊框和陰影。
禁用狀態(tài)：按鈕顏色會變淡 50%，并失去漸變

看具體的例子：

<body style="padding: 20px;width:500px;"> 
  <!-- 標(biāo)準(zhǔn)的按鈕 --> 
  <button type="button" class="btn btn-default">默認(rèn)按鈕</button> 
  <button type="button" class="btn btn-default active">激活的默認(rèn)按鈕</button> 
  <br/><br/> 
  <!-- 提供額外的視覺效果，標(biāo)識一組按鈕中的原始動作 --> 
  <button type="button" class="btn btn-primary">原始按鈕</button> 
  <button type="button" class="btn btn-primary active">激活的原始按鈕</button> 
  <br/><br/> 
  <!-- 表示一個成功的或積極的動作 --> 
  <button type="button" class="btn btn-success">成功按鈕</button> 
  <button type="button" class="btn btn-success active">激活的成功按鈕</button> 
  <br/><br/> 
  <!-- 用于要彈出信息的按鈕 --> 
  <button type="button" class="btn btn-info">信息按鈕</button> 
  <button type="button" class="btn btn-info active">激活的信息按鈕</button> 
  <br/><br/> 
 
  <button type="button" class="btn btn-default">默認(rèn)按鈕</button> 
  <button type="button" class="btn btn-default disabled">禁用的默認(rèn)按鈕</button> 
  <br/><br/> 
  <!-- 提供額外的視覺效果，標(biāo)識一組按鈕中的原始動作 --> 
  <button type="button" class="btn btn-primary">原始按鈕</button> 
  <button type="button" class="btn btn-primary disabled">禁用的原始按鈕</button> 
  <br/><br/> 
  <!-- 表示一個成功的或積極的動作 --> 
  <button type="button" class="btn btn-success">成功按鈕</button> 
  <button type="button" class="btn btn-success disabled">禁用的成功按鈕</button> 
  <br/><br/> 
  <!-- 用于要彈出信息的按鈕 --> 
  <button type="button" class="btn btn-info">信息按鈕</button> 
  <button type="button" class="btn btn-info disabled">禁用的信息按鈕</button> 
</body>

按鈕標(biāo)簽

a,input都可以表現(xiàn)的像一個按鈕，但是避免跨瀏覽器不一致，最好使用Button標(biāo)簽。

<body style="padding: 20px;"> 
  <a class="btn btn-default" href="#" role="button">超鏈接按鈕</a> 
  <button class="btn btn-default btn-primary" type="submit">button按鈕</button> 
  <input class="btn btn-default btn-success" type="button" value="input按鈕"> 
  <input class="btn btn-default btn-info" type="submit" value="submit按鈕"> 
</body>