Bootstrap CSS布局之按鈕
更新時間：2016年12月17日 10:11:01 作者：github_34514750
這篇文章主要介為大家詳細(xì)紹了Bootstrap CSS布局之按鈕的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
按鈕是任何系統(tǒng)都不能缺少的組件，設(shè)置到按鈕的大小、顏色、狀態(tài)等。
//btn源碼
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
按鈕樣式
btn-default、btn-primary、btn-success、btn-info、btn-warning、btn-danger、btn-link
按鈕大小
btn-xs、btn-sm、btn-lg、btn-block
//源碼
.btn-lg,
.btn-group-lg > .btn {
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 6px;
}
.btn-sm,
.btn-group-sm > .btn {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
.btn-xs,
.btn-group-xs > .btn {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
所有按鈕的寬度都是文本的長短再加上padding值來決定，若我們需要一個充滿父容器的100%寬度的按鈕，則無法實現(xiàn)。所以有btn-block
btn-block不根據(jù)文本收縮，也沒有padding和margin值，而是充滿父容器
//源碼
.btn-block {
display: block;
width: 100%;
}
.btn-block + .btn-block {
margin-top: 5px;
}
input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
width: 100%;
}
多標(biāo)簽支持
btn相關(guān)元素的強(qiáng)大之處，不僅能支持button元素，也能支持a元素和input元素
<a class="btn btn-default" href="#">鏈接</a> <button class="btn btn-default" type="submit">按鈕</button> <input class="btn btn-default" type="submit" value="輸入框">
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript中transform實現(xiàn)數(shù)字翻頁效果
本文主要介紹JavaScript中利用transform實現(xiàn)數(shù)字翻頁效果的實例，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
這篇文章主要介紹了微信小程序系列之自定義頂部導(dǎo)航功能，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了JS實現(xiàn)部分HTML固定頁面頂部隨屏滾動效果,涉及JavaScript響應(yīng)onscroll事件動態(tài)操作頁面元素屬性的相關(guān)技巧,需要的朋友可以參考下2015-12-12
BOM全稱是brower object model(瀏覽器對象模型)，主要用于管理窗口及窗口間的通訊，其核心對象是window。說窗口，可能并不準(zhǔn)確。因為，有的瀏覽器窗口可能包含多個標(biāo)簽頁，每個標(biāo)簽頁都有自己的window對象。本文將詳細(xì)介紹這些內(nèi)容，有需要可以參考學(xué)習(xí)。2016-08-08
如何利用JavaScript讀取excel文件并繪制echarts圖形
這篇文章主要介紹了如何利用JavaScript讀取excel文件并繪制echarts圖形，文章通過excel財務(wù)報表，并且需要根據(jù)這張excel表繪制成各種echarts圖形，需要了解更多詳情的小伙伴可以參考一下文章內(nèi)內(nèi)容2022-05-05
JS基于FileSystemObject創(chuàng)建一個指定路徑的TXT文本文件
這篇文章主要介紹了JS基于FileSystemObject創(chuàng)建一個指定路徑的TXT文本文件,涉及javascript使用ActiveXObject控件中FileSystemObject對象模型的基本技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
file按鈕作為上傳文件使用，不過默認(rèn)的樣式確實讓人不敢恭維啊，如何才可以修改為漂亮一點的呢？接下來與大家分享下具體的實現(xiàn)代碼，感興趣的朋友可以參考下哈2013-04-04
這篇文章主要為大家詳細(xì)介紹了微信小程序繪制圖片發(fā)送朋友圈，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要介紹了JS中bridge的原理與封裝，文章圍繞主題的相關(guān)資料展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-06-06
JS實現(xiàn)iframe自適應(yīng)高度的方法示例
這篇文章主要介紹了JS實現(xiàn)iframe自適應(yīng)高度的方法,結(jié)合實例形式分析了JS實現(xiàn)iframe高度自適應(yīng)的實現(xiàn)技巧,并給出了項目示例供大家參考,需要的朋友可以參考下2017-01-01