Bootstrap3.0學(xué)習(xí)筆記之按鈕的樣式

本文主要講解的是按鈕的樣式。
使用上面列出的class可以快速創(chuàng)建一個帶有樣式的按鈕。
復(fù)制代碼代碼如下:
<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可以獲得不同尺寸的按鈕。
復(fù)制代碼代碼如下:
<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可以使其充滿父節(jié)點100%的寬度,而且按鈕也變?yōu)榱藟K級(block)元素。
復(fù)制代碼代碼如下:
<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>
當(dāng)按鈕處于活動狀態(tài)時,其表現(xiàn)為被按壓下(底色更深,邊框夜色更深,內(nèi)置陰影)。對于B<button>元素,是通過:active實現(xiàn)的。對于<a>元素,是通過.active實現(xiàn)的。然而,你還可以聯(lián)合使用.active<button>并通過編程的方式使其處于活動狀態(tài)。
按鈕元素由于:active是偽狀態(tài),因此 無需添加,但是在需要表現(xiàn)出同樣外觀的時候可以添加.active。
復(fù)制代碼代碼如下:
<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>添加.activeclass。
復(fù)制代碼代碼如下:
<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%的褪色處理就可以呈現(xiàn)出無法點擊的效果。
按鈕元素為<button>添加disabled屬性。
復(fù)制代碼代碼如下:
<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>
可以把鼠標(biāo)放在按鈕上點擊查看效果。
跨瀏覽器的兼容性鏈接元素如果為<button>添加disabled屬性,Internet Explorer 9及更低版本的瀏覽器將會把按鈕中的文本繪制為灰色,并帶有惡心的陰影,目前還沒有辦法解決。
為<a>添加.disabledclass。
復(fù)制代碼代碼如下:
<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使用,就像.activeclass一樣,因此不需要增加前綴。
鏈接功能不受影響上面提到的class只是改變<a>的外觀,不影響功能。在此文檔中,我們通過JavaScript代碼禁用了鏈接的默認功能。
Context-specific usageWhile button classes can be used on<a>and<button>elements, only<button>elements are supported within our nav and navbar components.
可以為<a>、<button>或<input>元素添加按鈕class。
復(fù)制代碼代碼如下:
<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">
跨瀏覽器表現(xiàn)作為最佳實踐,我們強烈建議盡可能使用<button>元素以確保跨瀏覽器的一致性樣式。
出去其它原因,這個Firefox的bug讓我們無法為基于<input>標(biāo)簽的按鈕設(shè)置line-height,這導(dǎo)致在Firefox上,他們與其它按鈕的高度不一致。
本節(jié)主要講解的內(nèi)容是button按鈕的樣式。主要是靈活的運行這幾個樣式進行控制就可以了。
相關(guān)文章
基于jQuery Bootstrap3的響應(yīng)式網(wǎng)格圖片畫廊插件源碼
這是一款基于Bootstrap3.x的響應(yīng)式網(wǎng)格圖片畫廊插件的代碼。該圖片畫廊插件使用Bootstrap的網(wǎng)格系統(tǒng)來布局,采用jQuery來觸發(fā)模態(tài)窗口顯示相應(yīng)的大圖2015-11-10Bootstrap用戶手冊·設(shè)計響應(yīng)式網(wǎng)站 中文版 高清pdf掃描版[8.5MB]
本書全面介紹了Bootstrap為前端開發(fā)提供的所有工具,包括網(wǎng)格布局系統(tǒng)、預(yù)定義CSS樣式、內(nèi)置界面組件和交互式JavaScript插件。教你怎么用Bootstrap框架輕松設(shè)計出“殺手級2015-08-28深入理解Bootstrap(完整版) 中文PDF掃描版[76MB]
深入理解Bootstrap結(jié)合資深Web技術(shù)專家經(jīng)驗結(jié)晶,前端工程師必備,全面講解各功能組件的使用方法,深入分析架構(gòu)思想與源碼實現(xiàn),及開發(fā)自定義完整插件和擴展,歡迎下載使用2015-08-12- 目前比較流行的前端框架有Bootstrap、Foundation,這兩都有著常用的網(wǎng)頁設(shè)計組件,并且兼容移動設(shè)備,深受大眾喜愛,但如果你認為這兩個框架的組件依然不夠用的話,可嘗試2015-01-16
jQuery結(jié)合KAdmin響應(yīng)式Bootstrap后臺管理模板源碼
兩套皮膚風(fēng)格模板,響應(yīng)式設(shè)計,兼容PC端和手機移動端,自適應(yīng)屏幕分辨率,全套模板,包括儀表盤、布局、UI元素、Forms、Tables等2015-09-0720款優(yōu)秀前端框架:BootStrap、blueprint等
前端開發(fā)并不難,但是要想做得優(yōu)雅、健壯并不容易,使用一個好的前端框架能夠幫你很多忙。本文列舉了20個優(yōu)秀的前端框架,供選擇使用。2015-01-17