Bootstrap源碼解讀按鈕(5)
源碼解讀Bootstrap按鈕
按鈕組
按鈕組和下拉菜單組件一樣,需要依賴于bootstrap.js。使用“btn-group”的容器,把多個(gè)按鈕放到這個(gè)容器中。例如:<div class="btn-group">...</div>
“btn-group”容器里除了可以使用<button>元素之外,還可以使用其他標(biāo)簽元素,比如<a>標(biāo)簽。不過這里面的標(biāo)簽元素需要帶有類名“.btn”。
實(shí)現(xiàn)源碼如下:
.btn-group, .btn-group-vertical { position: relative; display: inline-block; vertical-align: middle; } .btn-group > .btn, .btn-group-vertical > .btn { position: relative; float: left; } .btn-group > .btn:hover, .btn-group-vertical > .btn:hover, .btn-group > .btn:focus, .btn-group-vertical > .btn:focus, .btn-group > .btn:active, .btn-group-vertical > .btn:active, .btn-group > .btn.active, .btn-group-vertical > .btn.active { z-index: 2; } .btn-group > .btn:focus, .btn-group-vertical > .btn:focus { outline: none; } .btn-group .btn + .btn, .btn-group .btn + .btn-group, .btn-group .btn-group + .btn, .btn-group .btn-group + .btn-group { margin-left: -1px; }
按鈕組四個(gè)角都是圓角,除了第一個(gè)和最后一個(gè)具有邊上的圓角之外,其他的按鈕沒有圓角。他的實(shí)現(xiàn)方法如下:
1. 默認(rèn)所有按鈕都有圓角
2. 除第一個(gè)按鈕和最后一個(gè)按鈕(下拉按鈕除外),其他的按鈕都取消圓角效果
3. 第一個(gè)按鈕只留左上角和左下角是圓角
4. 最后一個(gè)按鈕只留右上角和右下角是圓角
實(shí)現(xiàn)源碼如下:
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { border-radius: 0; } .btn-group > .btn:first-child { margin-left: 0; } .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .btn-group > .btn:last-child:not(:first-child), .btn-group > .dropdown-toggle:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .btn-group > .btn-group { float: left; } .btn-group > .btn-group:not(:first-child):not(:last-child) > .btn { border-radius: 0; } .btn-group > .btn-group:first-child> .btn:last-child, .btn-group > .btn-group:first-child> .dropdown-toggle { border-top-right-radius: 0; border-bottom-right-radius: 0; } .btn-group > .btn-group:last-child> .btn:first-child { border-top-left-radius: 0; border-bottom-left-radius: 0; }
按鈕工具欄
要實(shí)現(xiàn)按鈕工具欄的效果,可以將按鈕組“btn-group”按組放在一個(gè)大的容器“btn-toolbar”中,例如:
<div class="btn-toolbar"> <div class="btn-group"> … </div> <div class="btn-group"> … </div> </div>
實(shí)現(xiàn)原理主要是讓容器的多個(gè)分組“btn-group”元素進(jìn)行浮動(dòng),組與組之間保持5px的左外距,并且在”btn-toolbar”上清除浮動(dòng)。源碼如下:
.btn-toolbar { margin-left: -5px; } .btn-toolbar .btn-group, .btn-toolbar .input-group { float: left; } .btn-toolbar > .btn, .btn-toolbar > .btn-group, .btn-toolbar > .input-group { margin-left: 5px; } .btn-toolbar:before, .btn-toolbar:after{ display: table; content: " "; } .btn-toolbar:after{ clear: both; }
在“.btn-group”類名上追加對(duì)應(yīng)的類名,就可以得到不同大小的按鈕組:
.btn-group-lg:大按鈕組
.btn-group-sm:小按鈕組
.btn-group-xs:超小按鈕組
實(shí)現(xiàn)源碼如下:
.btn-lg, .btn-group-lg> .btn{ padding: 10px 16px; font-size: 18px; line-height: 1.33; 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; }
嵌套分組
我們常把下拉菜單和普通的按鈕組排列在一起,實(shí)現(xiàn)類似于導(dǎo)航菜單的效果。使用的時(shí)候,只需要把當(dāng)初制作下拉菜單的“dropdown”的容器換成“btn-group”,并且和普通的按鈕放在同一級(jí)。例如:
<div class="btn-group"> <button class="btn btn-default" type="button">首頁(yè)</button> <button class="btn btn-default" type="button">產(chǎn)品展示</button> <button class="btn btn-default" type="button">案例分析</button> <button class="btn btn-default" type="button">聯(lián)系我們</button> <div class="btn-group"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">關(guān)于我們<span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="##">公司簡(jiǎn)介</a></li> <li><a href="##">企業(yè)文化</a></li> <li><a href="##">組織結(jié)構(gòu)</a></li> <li><a href="##">客服服務(wù)</a></li> </ul> </div> </div>
實(shí)現(xiàn)源碼如下:
.btn-group > .btn-group { float: left; } .btn-group > .btn-group:not(:first-child):not(:last-child) > .btn { border-radius: 0; } .btn-group > .btn-group:first-child> .btn:last-child, .btn-group > .btn-group:first-child> .dropdown-toggle { border-top-right-radius: 0; border-bottom-right-radius: 0; } .btn-group > .btn-group:last-child> .btn:first-child { border-top-left-radius: 0; border-bottom-left-radius: 0; } .btn-group .dropdown-toggle:active, .btn-group.open .dropdown-toggle { outline: 0; } .btn-group > .btn + .dropdown-toggle { padding-right: 8px; padding-left: 8px; } .btn-group > .btn-lg + .dropdown-toggle { padding-right: 12px; padding-left: 12px; } .btn-group.open .dropdown-toggle { -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); } .btn-group.open .dropdown-toggle.btn-link { -webkit-box-shadow: none; box-shadow: none; }
垂直分組
如果我們要垂直分組,我們只需要把水平分組的“btn-group”類名換成“btn-group-vertical”即可。
實(shí)現(xiàn)源碼如下:
.btn-group-vertical > .btn, .btn-group-vertical > .btn-group, .btn-group-vertical > .btn-group > .btn { display: block; float: none; width: 100%; max-width: 100%; } .btn-group-vertical > .btn-group > .btn { float: none; } .btn-group-vertical > .btn + .btn, .btn-group-vertical > .btn + .btn-group, .btn-group-vertical > .btn-group + .btn, .btn-group-vertical > .btn-group + .btn-group { margin-top: -1px; margin-left: 0; } .btn-group-vertical > .btn:not(:first-child):not(:last-child) { border-radius: 0; } .btn-group-vertical > .btn:first-child:not(:last-child) { border-top-right-radius: 4px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .btn-group-vertical > .btn:last-child:not(:first-child) { border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 4px; } .btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn { border-radius: 0; } .btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child, .btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child { border-top-left-radius: 0; border-top-right-radius: 0; }
等分按鈕
等分按鈕也叫自適應(yīng)分組按鈕,在按鈕組“btn-group”上追加一個(gè)“btn-group-justified”類名即可。不過在制作等分按鈕組時(shí),盡量使用<a>標(biāo)簽元素來制作按鈕,因?yàn)槭褂?lt;button>標(biāo)簽元素時(shí),使用display:table在部分瀏覽器下支持并不友好。
等分按鈕實(shí)現(xiàn)原理是把“btn-group-justified”模擬成表格(display:table),而且把里面的按鈕模擬成表格單元格(display:table-cell)。實(shí)現(xiàn)源碼如下:
.btn-group-justified { display: table; width: 100%; table-layout: fixed; border-collapse: separate; } .btn-group-justified > .btn, .btn-group-justified > .btn-group { display: table-cell; float: none; width: 1%; } .btn-group-justified > .btn-group .btn { width: 100%; }
按鈕下拉菜單
按鈕下拉菜單其實(shí)在介紹嵌套分組的時(shí)候已經(jīng)用過了,它和下拉菜單效果基本上是一樣的。不同的是在普通的下拉菜單的基礎(chǔ)上封裝了按鈕(.btn)樣式效果,把外部容器“div.dropdown”換成了“div.btn-group”。實(shí)現(xiàn)源碼如下:
.btn-group .dropdown-toggle:active, .btn-group.open .dropdown-toggle { outline: 0; } .btn-group > .btn + .dropdown-toggle { padding-right: 8px; padding-left: 8px; } .btn-group > .btn-lg + .dropdown-toggle { padding-right: 12px; padding-left: 12px; } .btn-group.open .dropdown-toggle { -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); } .btn-group.open .dropdown-toggle.btn-link { -webkit-box-shadow: none; box-shadow: none; }
按鈕的向上向下三角形
要在按鈕上加一個(gè)向下的三角形,可以在<button>標(biāo)簽中添加一個(gè)<span class="caret"></span>來實(shí)現(xiàn)效果。
這個(gè)三角形的實(shí)現(xiàn)源碼如下:
.caret { display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: 4px solid; border-right: 4px solid transparent; border-left: 4px solid transparent; }
在按鈕中的三角形“caret”實(shí)現(xiàn)源碼如下:
.btn .caret { margin-left: 0; } .btn-lg .caret { border-width: 5px 5px 0; border-bottom-width: 0; } .dropup .btn-lg .caret { border-width: 0 5px 5px; }
如果需要向上的三角形,在剛才的基礎(chǔ)上追加“dropup”類名即可。實(shí)現(xiàn)源碼如下:
.dropup .caret, .navbar-fixed-bottom .dropdown .caret { content: ""; border-top: 0; border-bottom: 4px solid; }
向上彈起的下拉菜單
在“btn-group”或“dropdown”上添加類名“dropup”即可。實(shí)現(xiàn)源碼如下:
.dropup .dropdown-menu, .navbar-fixed-bottom .dropdown .dropdown-menu { top: auto; bottom: 100%; margin-bottom: 1px; }
主要就是將“dropdown-menu”的top值變成了auto,而把bottom值換成了100%。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript學(xué)習(xí)筆記(三):JavaScript也有入口Main函數(shù)
大家都知道在c和java中,有main函數(shù)貨main方法作為一個(gè)程序的入口函數(shù)或方法。在JS中從js源文件的頭部開始運(yùn)行的,我們?nèi)匀豢梢蕴摌?gòu)出一個(gè)main函數(shù)來作為程序的起點(diǎn),這樣一來不僅可以跟其他語(yǔ)言統(tǒng)一了,而且說不定你會(huì)對(duì)JS有更深的理解。感興趣的小伙跟著小編一起學(xué)習(xí)吧2015-09-09基于JS+Canvas的lucky-canvas?抽獎(jiǎng)功能
一個(gè)基于?Js?+?Canvas?的大轉(zhuǎn)盤和九宮格和老虎機(jī)抽獎(jiǎng),使用lucky-canvas?功能可以自由配置,多端適配的特點(diǎn),本文通過實(shí)例代碼給大家詳細(xì)介紹抽獎(jiǎng)方法,感興趣的朋友一起看看吧2022-06-06基于Echarts實(shí)現(xiàn)繪制立體柱狀圖的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何基于Echarts實(shí)現(xiàn)繪制立體柱狀圖的功能,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,需要的可以參考一下2023-02-02微信小程序 flexbox layout快速實(shí)現(xiàn)基本布局的解決方案
flexbox layout 彈性盒子布局。彈性盒子可以快速的對(duì)小程序進(jìn)行布局。這篇文章主要介紹了微信小程序 flexbox layout快速實(shí)現(xiàn)基本布局的方法,需要的朋友可以參考下2020-03-03JS數(shù)組求和的常用方法實(shí)例小結(jié)
這篇文章主要介紹了JS數(shù)組求和的常用方法,結(jié)合實(shí)例形式總結(jié)分析了javascript常見的遍歷、循環(huán)、歸并等數(shù)組操作相關(guān)技巧,需要的朋友可以參考下2019-01-01