快捷導(dǎo)航

BootStrap按鈕標(biāo)簽及基本樣式

更新時(shí)間：2016年11月23日 09:50:09 作者：帆帆帆

這篇文章主要介紹了BootStrap按鈕標(biāo)簽及基本樣式的相關(guān)資料，基本樣式包括顏色大小方面的知識(shí)，對(duì)bootstrap按鈕相關(guān)知識(shí)感興趣的朋友一起看看吧

按鈕標(biāo)簽

在<a>,<button>或input元素上使用按鈕class。但是為了避免跨瀏覽器的不一致性，建議使用<button>標(biāo)簽。

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 模板</title>
<meta charset="utf-8">
<!-- 引入 Bootstrap -->
<link  rel="stylesheet">
</head>
<body>
<!--記錄不同的標(biāo)簽使用bootstrap的btn類(lèi)-->
<a class="btn btn-default" href="#" role="button">鏈接</a>
<button class="btn btn-default" type="submit">按鈕</button>
<input class="btn btn-default" type="button" value="輸入">
<input class="btn btn-default" type="submit" value="提交">
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 包括所有已編譯的插件 -->
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

感覺(jué)link標(biāo)簽的不怎么明顯，但是還是能夠從邊距上看出是一個(gè)button的，這里只是說(shuō)明了怎樣利用不同的標(biāo)簽來(lái)使用btnclass。

可以使用在以上標(biāo)簽的樣式

基本樣式

btn 為按鈕添加基本的按鈕樣式，一般與下面的類(lèi)聯(lián)合只用，這樣可以保證按鈕大小和邊距的統(tǒng)一。

顏色

btn-default默認(rèn)的按鈕樣式，就是白底黑字灰框，要跟btn聯(lián)合使用，下同
btn-primary 原始的按鈕樣式，藍(lán)底白字
btn-success 成功的樣式，綠底白字
btn-info表示點(diǎn)擊后會(huì)彈出信息，淡藍(lán)色底白字
btn-warning 表示需要謹(jǐn)慎操作的按鈕，黃底白字
btn-danger表示危險(xiǎn)的操作，紅底白字
btn-link讓按鈕看起來(lái)像一個(gè)連接，仍然保持按鈕的行為

大小

btn-lg 比普通的圖標(biāo)要大的大圖標(biāo)
btn-sm 小圖標(biāo)
btn-xs 超小圖標(biāo)
btn-block 塊級(jí)按鈕，拉伸至父元素100%的寬度

按鈕這里并不能構(gòu)成響應(yīng)式分布，如果三個(gè)都寫(xiě)了，最后一個(gè)類(lèi)會(huì)覆蓋前面的樣式。

狀態(tài)

active 表示按鈕被激活，按鈕會(huì)比普通的按鈕寬一些

disabled disabled屬性和disabled類(lèi)都能將按鈕禁用，兩者效果相同。對(duì)于link，用disabled屬性會(huì)讓link顯示出和button相同的效果。鼠標(biāo)移上去就變成禁止的樣式

<!--應(yīng)用了disabled類(lèi)的只是禁用了連接--> 
<a class="btn btn-danger disabled" role="button" href="#">應(yīng)用disabled類(lèi)</a>
<!--使用了disabled屬性則禁用了整個(gè)按鈕-->
<a class="btn btn-danger" role="button" disabled="disabled" href="#">應(yīng)用disabled標(biāo)簽</a>
<button class="btn btn-default btn-danger disabled" type="submit">按鈕</button>

以上所述是小編給大家介紹的BootStrap按鈕標(biāo)簽及基本樣式，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: