bootstrap 學習筆記（4）---- 按鈕

日常咱們本身寫按鈕，此次不用咱們本身寫 了，直接應用bootstrap中的按鈕樣式，就能設計出很漂亮的按鈕樣式。接下來就讓咱們一塊兒學習吧。

一、能夠做爲按鈕使用的標籤或元素：<a><button><input>

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

二、針對組件的注意事項

雖然按鈕類能夠應用到 <a> 和 <button> 元素上，可是，導航和導航條組件只支持 <button> 元素。

三、連接被做爲按鈕使用時的注意事項

若是 <a> 元素被做爲按鈕使用 -- 並用於在當前頁面觸發某些功能 -- 而不是用於連接其餘頁面或連接當前頁面中的其餘部分，那麼，務必爲其設置 role="button" 屬性。

四、跨瀏覽器展示

咱們總結的最佳實踐是：強烈建議儘量使用 <button> 元素來得到在各個瀏覽器上得到相匹配的繪製效果。

 

另外，咱們還發現了 Firefox <30 版本的瀏覽器上出現的一個 bug，其表現是：阻止咱們爲基於 <input> 元素所建立的按鈕設置 line-height 屬性，這就致使在 Firefox 瀏覽器上不能徹底和其餘按鈕保持一致的高度。

五、預約義樣式

使用下面列出的類能夠快速建立一個帶有預約義樣式的按鈕。

 <!-- Standard button -->

 <button type="button" class="btn">（無樣式）Default</button>

<!-- 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>
顏色值以下圖：

6.尺寸：

 

禁用狀態:經過爲按鈕的背景設置  屬性就能夠呈現出沒法點擊的效果。
button 元素   爲  元素添加  屬性，使其表現出禁用狀態。
eg:
須要讓按鈕具備不一樣尺寸嗎？使用 .btn-lg、.btn-sm 或 .btn-xs 就能夠得到不一樣尺寸的按鈕。
塊級元素
經過給按鈕添加 .btn-block 類能夠將其拉伸至父元素100%的寬度，並且按鈕也變爲了塊級（block）元素。
7.激活狀態：
當按鈕處於激活狀態時，其表現爲被按壓下去（底色更深、邊框夜色更深、向內投射陰影）。對於 <button> 元素，是經過 :active 狀態實現的。對於 <a> 元素，是經過 .active 類實現的。然而，你還能夠將 .active 應用到 <button>上（包含 aria-pressed="true" 屬性)），並經過編程的方式使其處於激活狀態。
button 元素：因爲 :active 是僞狀態，所以無需額外添加，可是在須要讓其表現出一樣外觀的時候能夠添加 .active 類。
eg:<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>
8..btn-lg.btn-sm.btn-xs.btn-block<button>:active<a>.active.active<button>aria-pressed="true":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>opacity<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 類。

eg:

<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 類同樣，所以不須要增長前綴。