BootStrap按鈕標簽及基本樣式
按鈕標簽
在<a>,<button>或input元素上使用按鈕class。但是為了避免跨瀏覽器的不一致性,建議使用<button>標簽。
<!DOCTYPE html> <html> <head> <title>Bootstrap 模板</title> <meta charset="utf-8"> <!-- 引入 Bootstrap --> <link rel="stylesheet"> </head> <body> <!--記錄不同的標簽使用bootstrap的btn類--> <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>
感覺link標簽的不怎么明顯,但是還是能夠從邊距上看出是一個button的,這里只是說明了怎樣利用不同的標簽來使用btnclass。
可以使用在以上標簽的樣式
基本樣式
btn 為按鈕添加基本的按鈕樣式,一般與下面的類聯(lián)合只用,這樣可以保證按鈕大小和邊距的統(tǒng)一。
顏色
btn-default默認的按鈕樣式,就是白底黑字灰框,要跟btn聯(lián)合使用,下同
btn-primary 原始的按鈕樣式,藍底白字
btn-success 成功的樣式,綠底白字
btn-info表示點擊后會彈出信息,淡藍色底白字
btn-warning 表示需要謹慎操作的按鈕,黃底白字
btn-danger表示危險的操作,紅底白字
btn-link讓按鈕看起來像一個連接,仍然保持按鈕的行為
大小
btn-lg 比普通的圖標要大的大圖標
btn-sm 小圖標
btn-xs 超小圖標
btn-block 塊級按鈕,拉伸至父元素100%的寬度
按鈕這里并不能構(gòu)成響應(yīng)式分布,如果三個都寫了,最后一個類會覆蓋前面的樣式。
狀態(tài)
active 表示按鈕被激活,按鈕會比普通的按鈕寬一些
disabled disabled屬性和disabled類都能將按鈕禁用,兩者效果相同。對于link,用disabled屬性會讓link顯示出和button相同的效果。鼠標移上去就變成禁止的樣式
<!--應(yīng)用了disabled類的只是禁用了連接--> <a class="btn btn-danger disabled" role="button" href="#">應(yīng)用disabled類</a> <!--使用了disabled屬性則禁用了整個按鈕--> <a class="btn btn-danger" role="button" disabled="disabled" href="#">應(yīng)用disabled標簽</a> <button class="btn btn-default btn-danger disabled" type="submit">按鈕</button>
以上所述是小編給大家介紹的BootStrap按鈕標簽及基本樣式,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
jquery實現(xiàn)未經(jīng)美化的簡潔TAB菜單效果
這篇文章主要介紹了jquery實現(xiàn)未經(jīng)美化的簡潔TAB菜單效果,涉及jquery鼠標click事件實現(xiàn)頁面元素樣式動態(tài)變換的功能,需要的朋友可以參考下2015-08-08jQuery實現(xiàn)對網(wǎng)頁節(jié)點的增刪改查功能示例
這篇文章主要介紹了jQuery實現(xiàn)對網(wǎng)頁節(jié)點的增刪改查功能,涉及jQuery針對網(wǎng)頁DOM節(jié)點的獲取、屬性修改等相關(guān)操作技巧,需要的朋友可以參考下2017-09-09基于jquery的inputlimiter 實現(xiàn)字數(shù)限制功能
因客戶要求區(qū)分全角跟半角,所以在jquery.inputlimiter.js插件上還做了些小改動。2010-05-05jQuery Real Person驗證碼插件防止表單自動提交
這篇文章為大家介紹了一款jQuery驗證碼插件Real Person,可以防止自動提交表單2015-11-11