Bootstrap 按鈕
摘要：這篇筆記主要是關於bootstrap提供的定義按鈕的不同樣式 。
1.按鈕樣式總結
以下樣式可以用在<a>、<button>、<input>元素上。
因爲：<a role="button" href="#">、<input type="button">、<input type="submit">等表現出來的是按鈕的形狀
不過還是建議在<button>元素上使用按鈕class，避免跨瀏覽器的不一致問題。
用法：<button class="btn btn-default">按鈕</button>
樣式示例：
<!-- 標準的按鈕 --> <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>
結果：
1.1 按鈕大小
上表顯示，.btn-lg、.btn-sm、 .btn-xs、.btn-md(正常大小)、.btn-block是用來調整按鈕大小的類。
代碼示例：
<div class="container"> <div> <button class="btn btn-danger btn-lg">btn-lg</button> <button class="btn btn-primary btn-md">btn-md</button> <button class="btn btn-info btn-sm">btn-sm</button> <button class="btn btn-success btn-xs">btn-xs</button> <button class="btn btn-warning btn-block">btn-block(與父元素同寬)</button> </div> </div>
顯示如下：
1.2 按鈕狀態
bootstrap提供了按鈕激活、禁用等狀態的類。
按鈕處於激活狀態（active）時，其外觀會發生變化，呈現深色的背景、邊框和陰影，<a href="#" class="btn btn-primary active" role="button">。
按鈕處於禁用狀態（disabled）時，按鈕顏色會變淡50%，並失去漸變，點擊時不會發生任何變化，<button class="btn btn-primary active">；
這兩種狀態都能用於按鈕元素<button>和錨元素<a>
注意！
與表單輸入框等禁用狀態不同，錨元素的禁止狀態是由類決定的，不是屬性。例如，<a href="#" class="btn btn-primary disabled" role="button">。；
按鈕元素的禁用狀態是由disabled屬性決定的。例如，。<button class="btn btn-primary" disabled="disabled">。
2.字體圖標（glyphicons）
字體圖標是在web項目中使用的圖標字體，bootstrap捆綁了200多種字體格式的字形。
2.1 用法
代碼：<span class="glyphicon glyphicon-search"></span>
字體圖標經常和按鈕元素搭配使用:
<button class="btn btn-primary">
<span class="glyphicon glyphicon-search"></span>搜索
</button>
<button class="btn btn-primary">
<span class="glyphicon glyphicon-user"></span>用戶
</button>
<button class="btn btn-default">
<span class="glyphicon glyphicon-home"></span>首頁
</button>
<button class="btn btn-info">
<span class="glyphicon glyphicon-shopping-cart"></span>購物
</button>顯示如下：
2.2 定製字體圖標
通過改變字體的尺寸、顏色和應用文本陰影來進行定製圖標。
尺寸：
<button type="button" class="btn btn-primary btn-lg" style="font-size: 60px"> <span class="glyphicon glyphicon-user"></span> User </button> <button type="button" class="btn btn-primary btn-lg" style="font-size: 30px"> <span class="glyphicon glyphicon-user"></span> User </button>
顏色：
<button type="button" class="btn btn-primary btn-lg" style="color: rgb(212, 106, 64);"> <span class="glyphicon glyphicon-user"></span> User </button> <button type="button" class="btn btn-primary btn-lg" style="color: black;"> <span class="glyphicon glyphicon-user"></span> User </button>
文本陰影：
<button type="button" class="btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;"> <span class="glyphicon glyphicon-user"></span> User </button> <button type="button" class="btn btn-primary btn-lg" style="text-shadow: red 9px 6px 6px;"> <span class="glyphicon glyphicon-user"></span> User </button>
3.按鈕組
3.1 基本的按鈕組（.btn-group）
把帶有類.btn 的按鈕放在 .btn-group的容器中，形成按鈕組。實例：
<div class="btn-group"> <button type="button" class="btn btn-default">按鈕 1</button> <button type="button" class="btn btn-success">按鈕 2</button> <button type="button" class="btn btn-primary">按鈕 3</button> <button type="button" class="btn btn-default">按鈕 4</button> </div>
顯示：
3.2 按鈕工具(.btn-toolbar)
把幾組帶有類 .btn-group 的組件放在帶有 .btn-toolbar 的大容器中，形成更加複雜的組件。示例：
1 <div class="btn-toolbar" role="toolbar"> 2 <div class="btn-group"> 3 <button type="button" class="btn btn-default">按鈕 1</button> 4 <button type="button" class="btn btn-default">按鈕 2</button> 5 <button type="button" class="btn btn-default">按鈕 3</button> 6 </div> 7 <div class="btn-group"> 8 <button type="button" class="btn btn-default">按鈕 4</button> 9 <button type="button" class="btn btn-default">按鈕 5</button> 10 <button type="button" class="btn btn-default">按鈕 6</button> 11 </div> 12 <div class="btn-group"> 13 <button type="button" class="btn btn-default">按鈕 7</button> 14 <button type="button" class="btn btn-default">按鈕 8</button> 15 <button type="button" class="btn btn-default">按鈕 9</button> 16 </div> 17 </div>
顯示：
3.3 按鈕大小（.btn-group-lg、.btn-group-md、.btn-group-sm、.btn-group-xs）
在<div class=".btn-group">中添加類 .btn-group-* 來改變整組按鈕的大小。 如<dic class=".btn-group btn-group-lg">。
在以上按鈕工具中改變按鈕大小。例如，在第2行、第7行、第12行分別添加類 .btn-group-lg、.btn-group-sm、btn-group-xs。結果如下：
3.4 嵌套
在一個 .btn-groug 組件中嵌套另一個 .btn-group 組件，經常與下拉菜單一塊使用。代碼示例：
1 <div class="btn-group"> 2 <button type="button" class="btn btn-default">按鈕 1</button> 3 <button type="button" class="btn btn-default">按鈕 2</button> 4 <div class="btn-group"> 5 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 6 按鈕3 <span class="caret"></span> 7 </button> 8 <ul class="dropdown-menu"> 9 <li><a href="#">下拉鍊接 1</a></li> 10 <li><a href="#">下拉鍊接 2</a></li> 11 </ul> 12 </div> 13 </div>
顯示:
3.5 按鈕組垂直（.btn-group-vertical）
把上面的程序的第1行和第4行中的<div class="btn-group">替換成<div class="btn-group-vertical">即可。結果顯示如下：
4 按鈕下拉菜單
4.1 基本的按鈕下拉菜單
把按鈕與下拉菜單結合使用，只需要在一個.btn-group中放置按鈕和下拉菜單即可。代碼示例如3.4中的嵌套代碼。
4.2 分割的按鈕下拉菜單
形如：
。其實是兩個按鈕組成，左邊的按鈕可以帶有鏈接，也可以不帶；右邊的按鈕與下拉菜單相結合，進而組成分割的按鈕下拉菜單。
代碼示例：
1 <div class="btn-group"> 2 <button class="btn btn-primary">按鈕</button> 3 <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 4 <span class="caret"></span> 5 <span class="sr-only">下拉菜單觸發器</span> 6 </button> 7 <ul class="dropdown-menu" role="menu"> 8 <li><a href="#">功能1</a></li> 9 <li><a href="#">功能2</a></li> 10 <li><a href="#">功能3</a></li> 11 <li class="divider"></li> 12 <li><a href="#">分離的鏈接</a></li> 13 </ul> 14 </div>
形如：
4.3 按鈕下拉菜單的大小（.btn-lg、.btn-sm、.btn-xs）
向.btn-group中的<button>元素添加類 .btn-lg、.btn-sm、.btn-xs，即可改變 按鈕下拉菜單的大小。形如：
4.4 按鈕上拉菜單(dropup)向父容器 .btn-group 添加類 .dropup即可。代碼示例;
1 <div class="btn-group dropup"> 2 <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 3 按鈕1<span class="caret"></span> 4 </button> 5 <ul class="dropdown-menu" role="menu"> 6 <li><a href="#">功能1</a></li> 7 <li><a href="#">功能2</a></li> 8 <li><a href="#">功能3</a></li> 9 <li class="divider"></li> 10 <li><a href="#">分離的鏈接</a></li> 11 </ul> 12 </div>
顯示如下：
