全局CSS樣式
1. 可作為按鈕使用的標簽或元素
為 <a>、<button> 或 <input> 元素添加按鈕類（button class）即可使用 Bootstrap 提供的樣式,示例如下：
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
注意：
- 導(dǎo)航和導(dǎo)航條組件只支持
<button>元素 - 如果
<a>元素被作為按鈕使用 肴掷，并用于在當前頁面觸發(fā)某些功能敲霍，務(wù)必為其設(shè)置role="button"屬性 - 盡可能使用
<button>元素來獲得在各個瀏覽器上獲得相匹配的繪制效果
2. 按鈕顏色
通過6種預(yù)定義樣式來控制按鈕顏色，示例如下：
<button type="button" class="btn btn-default">（默認樣式）Default</button>
<button type="button" class="btn btn-primary">（首選項）Primary</button>
<button type="button" class="btn btn-success">（成功）Success</button>
<button type="button" class="btn btn-info">（一般信息）Info</button>
<button type="button" class="btn btn-warning">（警告）Warning</button>
<button type="button" class="btn btn-danger">（危險）Danger</button>
效果如下：
color.png
3. 按鈕大小
使用.btn-lg兵怯、.btn-sm 或.btn-xs 就可以獲得不同尺寸的按鈕，示例如下：
<p>
<button type="button" class="btn btn-primary btn-lg">（大按鈕）Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">（默認尺寸）Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">（小按鈕）Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
</p>
效果如下：
尺寸.png
4. 塊級元素
給按鈕添加.btn-block 類可以將其拉伸至父元素100%的寬度腔剂，而且按鈕也變?yōu)榱藟K級（block）元素
<button type="button" class="btn btn-primary btn-lg btn-block">（塊級元素）Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">（塊級元素）Block level button</button>
效果如下：
block.png
5. 按鈕狀態(tài)
- 激活狀態(tài)
對于<button>元素媒区，是通過:active狀態(tài)實現(xiàn)的。對于<a>元素掸犬，是通過.active類實現(xiàn)的
<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<br>
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
效果如下：
active.png
- 禁用狀態(tài)
為 <button> 元素添加 disabled 屬性袜漩，使其表現(xiàn)出禁用狀態(tài)
為基于<a>元素創(chuàng)建的按鈕添加.disabled類
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
效果如下：
disabled.png
按鈕組
1. 基本實例
通過按鈕組容器把一組按鈕放在同一行里
<div class="btn-group" role="group" >
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
效果如下：
btn-group.png
2.按鈕工具欄
把一組 <div class="btn-group">組合進一個 <div class="btn-toolbar">中就可以做成更復(fù)雜的組件
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default">按鈕 1</button>
<button type="button" class="btn btn-default">按鈕 2</button>
<button type="button" class="btn btn-default">按鈕 3</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">按鈕 4</button>
<button type="button" class="btn btn-default">按鈕 5</button>
<button type="button" class="btn btn-default">按鈕 6</button>
</div>
</div>
效果如下：
btn-toolbar.png
3. 尺寸
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-default">按鈕 1</button>
<button type="button" class="btn btn-default">按鈕 2</button>
<button type="button" class="btn btn-default">按鈕 3</button>
</div>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">按鈕 4</button>
<button type="button" class="btn btn-default">按鈕 5</button>
<button type="button" class="btn btn-default">按鈕 6</button>
</div>
<div class="btn-group btn-group-xs">
<button type="button" class="btn btn-default">按鈕 7</button>
<button type="button" class="btn btn-default">按鈕 8</button>
<button type="button" class="btn btn-default">按鈕 9</button>
</div>
效果如下：
btn-group-*.png
4. 垂直排列
<div class="btn-group-vertical">
<button type="button" class="btn btn-default">按鈕 1</button>
<button type="button" class="btn btn-default">按鈕 2</button>
<div class="btn-group-vertical">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
下拉
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">下拉鏈接 1</a></li>
<li><a href="#">下拉鏈接 2</a></li>
</ul>
</div>
</div>
效果如下：
btn-group-vertical.png
