您好,登錄后才能下訂單哦!
這篇文章主要介紹“Bootstrap按鈕組件怎么使用”,在日常操作中,相信很多人在Bootstrap按鈕組件怎么使用問(wèn)題上存在疑惑,小編查閱了各式資料,整理出簡(jiǎn)單好用的操作方法,希望對(duì)大家解答”Bootstrap按鈕組件怎么使用”的疑惑有所幫助!接下來(lái),請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧!
按鈕組和下拉菜單組件一樣,需要依賴(lài)于button.js插件才能正常運(yùn)作。
結(jié)構(gòu)方面:使用一個(gè)類(lèi)名為btn-group的容器,把多個(gè)按鈕放在這個(gè)容器中。
按鈕組也是一個(gè)獨(dú)立的組件,所以可以找到相應(yīng)的源碼文件:
Less:buttons.less
Sass:_buttons.scss
Css:Bootstrap.css 3131行~3291行
<div class="btn-group"> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-step-backward"></span> </button> … <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-step-forward"></span> </button> </div>
CSS:
.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; }
除了可以使用<button>元素之外,還可以使用其他標(biāo)簽元素,比如<a>標(biāo)簽,唯一要保證的是:不管使用什么標(biāo)簽,.btn-group容器里的標(biāo)簽元素需要帶有類(lèi)名.btn
按鈕組四個(gè)角都是圓角,除了第一個(gè)和最后一個(gè)按鈕具有邊上的圓角外,其他的按鈕沒(méi)有圓角。
詳解:
1、默認(rèn):所有按鈕都是圓角
2、除第一個(gè)按鈕和最后一個(gè)按鈕,其他的按鈕圓角取消
3、最后一個(gè)按鈕只留右上角和右下角為圓角
源碼:
.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; }
按鈕組工具欄
在富文本編輯器中,將按鈕組分組排列在一起,比如說(shuō)復(fù)制,剪切,粘貼一組,左對(duì)齊,中間對(duì)齊,右對(duì)齊和兩端對(duì)齊一組,這時(shí)需要用到bootstrap框架按鈕工具欄btn-toolbar
<div class="btn-toolbar"> <div class="btn-group"> … </div> <div class="btn-group"> … </div> <div class="btn-group"> … </div> <div class="btn-group"> … </div> </div>
原理:主要是讓容器的多個(gè)分組.btn-group元素進(jìn)行浮動(dòng),并且組與組之間保持5px的左外距
.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上清除浮動(dòng)
.btn-toolbar:before, .btn-toolbar:after{ display: table; content: " "; } .btn-toolbar:after{ clear: both; }
示例:
<div class="btn-toolbar"> <div class="btn-group"> <button class="btn btn-default" type="button"> <span class="glyphicon glyphicon-align-left"></span> </button> <button class="btn btn-default" type="button"> <span class="glyphicon glyphicon-align-center"></span> </button> <button class="btn btn-default"> <span class="glyphicon glyphicon-align-right"></span> </button> <button class="btn btn-default" type="button"> <span class="glyphicon glyphicon-align-justify"></span> </button> </div> <div class="btn-group"> <button class="btn btn-default" type="button"> <span class="glyphicon glyphicon-font"></span> </button> <button class="btn btn-default" type="button"> <span class="glyphicon glyphicon-bold"></span> </button> </div> </div>
按鈕嵌套分組
很多時(shí)候,我們把下拉菜單很普通的按鈕組排列在一起,實(shí)現(xiàn)類(lèi)似于導(dǎo)航菜單的效果:
使用的時(shí)候只需將之前制作下拉菜單的dropdown容器的類(lèi)名換成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> .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; }
按鈕垂直分組
只需把水平分組的類(lèi)名.btn-group換成.btn-group-vertical即可。
<div class="btn-group-vertical"> <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> .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; }
等分按鈕又稱(chēng)為自適應(yīng)分組按鈕:
整個(gè)按鈕組的寬度是容器的100%,而按鈕組里面的每個(gè)按鈕平分整個(gè)容器的寬度,例如一個(gè)按鈕組里有五個(gè)按鈕,每個(gè)按鈕是容器寬度的20%;一個(gè)按鈕組里有四個(gè)按鈕,每個(gè)按鈕是容器寬度的25%;
實(shí)現(xiàn)方法:只需要在按鈕組.btn-group 上追加一個(gè)類(lèi)名.btn-group-justified
<div class="btn-group btn-group-justified"> <buttton class="btn btn-default" type="button">首頁(yè)</buttton> <buttton class="btn btn-default" type="button">案例分析</buttton> <buttton class="btn btn-default" type="button">聯(lián)系我們</buttton> <buttton class="btn btn-default" type="button">關(guān)于我們</buttton> </div> .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%; }
把.btn-group-justified模擬成表格(display:table),并且把里面的按鈕模板模擬成表格單元格(display:table-cell)。
注意:在制作等分按鈕組時(shí),盡量使用<a>標(biāo)簽來(lái)制作按鈕,因?yàn)槭褂胋utton標(biāo)簽元素時(shí),使用display:table在部分瀏覽器下支持并不友好
到此,關(guān)于“Bootstrap按鈕組件怎么使用”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。