使用Bootstrap美化按鈕實例代碼(demo)
更新時間：2017年02月03日 11:26:53 作者：秘果_li
這篇文章主要介紹了使用Bootstrap美化按鈕實例代碼(demo),非常不錯，具有參考借鑒價值，需要的朋友可以參考下
在HTML5中,按鈕的常用屬性主要為背景顏色和大小
一. input標簽:
<input type="button" value="按鈕" class="btn"/>
二. button標簽:(這里用button標簽舉例)
<button type="button" class="btn btn-defult">提交</button>
btn 表示基本樣式
btn-defult 表示默認樣式
默認樣式
btn-primary 表示背景色為藍色
<button type="button" class="btn btn-defult">按鈕</button>
primary
btn-success表示背景色為綠色
<button type="button" class="btn btn-success">按鈕</button>
success
其他顏色屬性
btn-waring 表示背景色為橙色
btn-danger 表示背景色為紅色
btn-info 表示背景色為淺藍色
btn-link 表示無背景色
<div class="row">
<button type="button" class="btn btn-defult">按鈕</button>
<button type="button" class="btn btn-primary">按鈕</button>
<button type="button" class="btn btn-success">按鈕</button>
<button type="button" class="btn btn-waring">按鈕</button>
<button type="button" class="btn btn-info">按鈕</button>
<button type="button" class="btn btn-danger">按鈕</button>
<button type="button" class="btn btn-link">按鈕</button>
</div>
效果展示
按鈕尺寸:
btn-lg 較大
btn-md 中等
btn-sm 較小
btn-xs 更小
<div class="row" style="text-align: center">
<button type="button" class="btn btn-defult btn-lg">按鈕</button>
<button type="button" class="btn btn-primary btn-md">按鈕</button>
<button type="button" class="btn btn-success btn-sm">按鈕</button>
<button type="button" class="btn btn-warning btn-xs">按鈕</button>
<button type="button" class="btn btn-info btn-sm">按鈕</button>
<button type="button" class="btn btn-danger btn-md">按鈕</button>
<button type="button" class="btn btn-link btn-lg">按鈕</button>
</div>
效果展示
其他屬性
btn-block 讓按鈕的寬度變?yōu)?00%并且成了塊級元素
active 表示按鈕為激活狀態(tài)
disabled 表示按鈕為禁用狀態(tài)不可點擊
<button type="button" class="btn btn-danger btn-lg" disabled>按鈕</button>
禁用變?yōu)榛疑?/p>
三. 用a標簽做一個按鈕
<a herf="#" class="btn btn-danger active">按鈕</a>
以上所述是小編給大家介紹的使用Bootstrap美化按鈕實例代碼(demo)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了JavaScript遞歸操作,由一個階乘問題開始分析了遞歸操作的原理、實現(xiàn)方法與相關(guān)注意事項,需要的朋友可以參考下2016-10-10
純js寫的分頁代碼且簡潔實用哦！需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
這篇文章主要介紹了使用JS獲取頁面上的所有標簽 ,需要的朋友可以參考下2018-10-10
這篇文章主要介紹了JS簡單模擬觸發(fā)按鈕點擊功能的方法,涉及JavaScript事件調(diào)用機制及事件觸發(fā)的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11
這篇文章主要介紹了Emberjs 通過 axios 下載文件的方法，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
JavaScript與C# Windows應(yīng)用程序交互方法
JavaScript與C# Windows應(yīng)用程序交互方法...2007-06-06
這篇文章主要為大家詳細介紹了JS實現(xiàn)簡單九宮格抽獎，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
這篇文章主要為大家詳細介紹了JS實現(xiàn)模態(tài)框拖拽動態(tài)效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
JavaScript空數(shù)組的every()方法實踐
every()方法用于檢測數(shù)組中的所有元素是否都滿足指定條件, 本文主要介紹了JavaScript空數(shù)組的every()方法實踐,具有一定的參考價值,感興趣的可以了解一下2024-03-03
用戶輸入密碼時都是顯示的星號了，那么我們希望查看明文要怎么查看呢，下面我們只要使用一段簡單的js就可以實現(xiàn)查看密碼框的明文了，有需要的小伙伴可以來參考下。2015-05-05