Bootstrap3.0中如何使用按鈕樣式，相信很多沒有經(jīng)驗(yàn)的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

創(chuàng)新互聯(lián)建站專業(yè)提供成都主機(jī)托管四川主機(jī)托管成都服務(wù)器托管四川服務(wù)器托管，支持按月付款！我們的承諾：貴族品質(zhì)、平民價格，機(jī)房位于中國電信/網(wǎng)通/移動機(jī)房，四川聯(lián)通機(jī)房服務(wù)器托管服務(wù)有保障！

選項

使用上面列出的class可以快速創(chuàng)建一個帶有樣式的按鈕。

代碼如下:

       Default
       Primary
       Success
       Info
       Warning
       Danger
       鏈接

尺寸

需要讓按鈕具有不同尺寸嗎？使用.btn-lg、.btn-sm、.btn-xs可以獲得不同尺寸的按鈕。

代碼如下:


 Large button
 Large button


 Default button
 Default button


 Small button
 Small button


 Extra small button
 Extra small button

通過給按鈕添加.btn-block可以使其充滿父節(jié)點(diǎn)100%的寬度，而且按鈕也變?yōu)榱藟K級（block）元素。

代碼如下:

Block level button
Block level button

活動狀態(tài)

當(dāng)按鈕處于活動狀態(tài)時，其表現(xiàn)為被按壓下（底色更深，邊框夜色更深，內(nèi)置陰影）。對于B元素，是通過:active實(shí)現(xiàn)的。對于元素，是通過.active實(shí)現(xiàn)的。然而，你還可以聯(lián)合使用.active并通過編程的方式使其處于活動狀態(tài)。

按鈕元素

由于:active是偽狀態(tài)，因此 無需添加，但是在需要表現(xiàn)出同樣外觀的時候可以添加.active。

代碼如下:

Primary button
Button

鏈接元素

可以為添加.activeclass。

代碼如下:

Primary link
Link

可以和上面的button進(jìn)行一下對比。

禁用狀態(tài)

通過將按鈕的背景色做50%的褪色處理就可以呈現(xiàn)出無法點(diǎn)擊的效果。

按鈕元素

為添加disabled屬性。

代碼如下:

Primary button
Button

可以把鼠標(biāo)放在按鈕上點(diǎn)擊查看效果。

跨瀏覽器的兼容性

如果為添加disabled屬性，Internet Explorer 9及更低版本的瀏覽器將會把按鈕中的文本繪制為灰色，并帶有惡心的陰影，目前還沒有辦法解決。

鏈接元素

為添加.disabledclass。

代碼如下:

Primary link
Link

這是和上面的按鈕做一個對比。

我們把.disabled作為工具class使用，就像.activeclass一樣，因此不需要增加前綴。

鏈接功能不受影響

上面提到的class只是改變的外觀，不影響功能。在此文檔中，我們通過JavaScript代碼禁用了鏈接的默認(rèn)功能。

Context-specific usage

While button classes can be used onandelements, onlyelements are supported within our nav and navbar components.

可做按鈕使用的Html標(biāo)簽

可以為、或元素添加按鈕class。

代碼如下:

   Link
   

Button
   
   

跨瀏覽器表現(xiàn)

作為最佳實(shí)踐，我們強(qiáng)烈建議盡可能使用元素以確?？鐬g覽器的一致性樣式。

出去其它原因，這個Firefox的bug讓我們無法為基于標(biāo)簽的按鈕設(shè)置line-height，這導(dǎo)致在Firefox上，他們與其它按鈕的高度不一致。

看完上述內(nèi)容，你們掌握Bootstrap3.0中如何使用按鈕樣式的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！