本文主要講解的是按鈕的樣式。
1.選項
2.尺寸
3.活動狀態
4.禁用狀態
5.可做按鈕使用的Html標籤
選項
使用上面列出的class可以快速建立一個帶有樣式的按鈕。
<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> <button type="button" class="btn btn-link">链接</button>
尺寸
需要讓按鈕有不同尺寸嗎？使用.btn-lg、.btn-sm、.btn-xs可以獲得不同尺寸的按鈕。
<p> <button type="button" class="btn btn-primary btn-lg">Large button</button> <button type="button" class="btn btn-default btn-lg">Large button</button> </p> <p> <button type="button" class="btn btn-primary">Default button</button> <button type="button" class="btn btn-default">Default button</button> </p> <p> <button type="button" class="btn btn-primary btn-sm">Small button</button> <button type="button" class="btn btn-default btn-sm">Small button</button> </p> <p> <button type="button" class="btn btn-primary btn-xs">Extra small button</button> <button type="button" class="btn btn-default btn-xs">Extra small button</button> </p>
透過為按鈕新增.btn-block可以使其充滿父節點100%的寬度，而且按鈕也變成區塊級（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>
活動狀態
當按鈕處於活動狀態時，其表現為被按壓下（底色更深，邊框夜色更深，內建陰影）。對於B
<button type="button" class="btn btn-primary btn-lg active">Primary button</button> <button type="button" class="btn btn-default btn-lg active">Button</button>
連結元素
可以為添加.active class。
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a> <a href="#" class="btn btn-default btn-lg active" role="button">Link</a>
可以跟上面的button做比較。
停用狀態
將按鈕的背景色做50%的褪色處理就可以呈現出無法點擊的效果。
按鈕元素
為
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button> <button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
可以把滑鼠放在按鈕上點擊查看效果。
跨瀏覽器的兼容性
如果為
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a> <a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
這是和上面的按鈕做個對比。
我們把.disabled當作工具class使用，就像.active class一樣，因此不需要增加字首。
連結功能不受影響
上面提到的class只是改變的外觀，不影響功能。在此文件中，我們透過JavaScript程式碼停用了連結的預設功能。
可做按鈕使用的Html標籤
可以為、
<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">
跨瀏覽器表現
作為最佳實踐，我們強烈建議盡可能使用
出去其它原因，這個Firefox的bug讓我們無法為基於標籤的按鈕設定line-height，這導致在Firefox上，他們與其它按鈕的高度不一致。
本節主要講解的內容是button按鈕的樣式，大家可以靈活的運行這幾個樣式進行控制就可以了，希望對大家的學習有所幫助。
