Bootstrap架構---CSS全域樣式之按鈕樣式

預定義樣式

首先，我們先要連結css樣式和JQ檔案

<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/><script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>

使用下面列出的類可以快速建立一個帶有預定義樣式的按鈕。

<!-- Standard button --><button type="button" class="btn btn-default">Default</button><!-- Provides extra visual weight and identifies the primary action in a set of buttons --><button type="button" class="btn btn-primary">Primary</button><!-- Indicates a successful or positive action --><button type="button" class="btn btn-success">Success</button><!-- Contextual button for informational alert messages --><button type="button" class="btn btn-info">Info</button><!-- Indicates caution should be taken with this action --><button type="button" class="btn btn-warning">Warning</button><!-- Indicates a dangerous or potentially negative action --><button type="button" class="btn btn-danger">Danger</button><!-- Deemphasize a button by making it look like a link while maintaining button behavior --><button type="button" class="btn btn-link">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>  元素，是通過  :active  狀態實現的。對於  <a>  元素，是通過  .active  類實現的。然而，你還可以將  .active  應用到  <button> 上，並通過編程的方式使其處於啟用狀態。

button 元素 由於  :active  是偽狀態，因此無需額外添加，但是在需要讓其表現出同樣外觀的時候可以添加  .active  類

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

連結（<a>）元素 可以為基於  <a>  元素建立的按鈕添加  .active  類。

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

禁用狀態 通過為按鈕的背景設定  opacity  屬性就可以呈現出無法點擊的效果

button 元素 為  <button>  元素添加  disabled  屬性，使其表現出禁用狀態。

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

跨瀏覽器安全色性

如果為 <button> 元素添加 disabled 屬性，Internet Explorer 9 及更低版本的瀏覽器將會把按鈕中的文本繪製為灰色，並帶有噁心的陰影，目前我們還沒有解決辦法。 連結（<a>）元素

為基於 <a> 元素建立的按鈕添加 .disabled 類。

<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  作為工具類使用，就像  .active  類一樣，因此不需要增加首碼。

連結的原始功能不受影響

上面提到的類只是通過設定 pointer-events: none 來禁止 <a> 元素作為連結的原始功能，但是，這一 CSS 屬性並沒有被標準化，並且 Opera 18 及更低版本的瀏覽器並沒有完全支援這一屬性，同樣，Internet Explorer 11 也不支援。因此，為了安全起見，建議通過 JavaScript 代碼來禁止連結的原始功能。 Context-specific usage

雖然按鈕類可以應用到 <a> 和 <button> 元素上，但是，導航和導航條只支援 <button> 元素。 按鈕類 為  <a> 、 <button>  或  <input>  元素應用按鈕類。

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

跨瀏覽器展現

我們總結的最佳實務是，強烈建議儘可能使用 <button> 元素來獲得在各個瀏覽器上獲得相匹配的繪製效果。

另外，我們還發現了a bug in Firefox <30 版本的瀏覽器上出現的一個 bug ：阻止我們為基於 <input> 元素建立的按鈕設定 line-height 屬性，這就導致在 Firefox 瀏覽器上不能完全和其他按鈕保持一致的高度。