Bootstrap按鈕組件詳解
更新時(shí)間：2016年04月26日 09:17:37 投稿：mrr
按鈕組和下拉菜單組件一樣，需要依賴(lài)于button.js插件才能正常運(yùn)作。通過(guò)本文給大家詳細(xì)介紹Bootstrap按鈕組件，感興趣的朋友一起學(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在部分瀏覽器下支持并不友好
腳本之家推薦閱讀：
以上所述是小編給大家介紹的Bootstrap按鈕組件，希望對(duì)大家有所幫助！
相關(guān)文章
JS實(shí)現(xiàn)為排序好的字符串找出重復(fù)行的方法
這篇文章主要介紹了JS實(shí)現(xiàn)為排序好的字符串找出重復(fù)行的方法,涉及JavaScript字符串運(yùn)算相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-03-03
DWR內(nèi)存兼容及無(wú)法調(diào)用問(wèn)題解決方案
這篇文章主要介紹了DWR內(nèi)存兼容及無(wú)法調(diào)用問(wèn)題解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10
JavaScript獲取圖片像素顏色并轉(zhuǎn)換為box-shadow顯示
這篇文章主要介紹了JavaScript獲取圖片像素顏色并轉(zhuǎn)換為box-shadow顯示的方法,用到了HTML5中的FileReader API和getImageData,轉(zhuǎn)換為的CSS3 box-shadow也要注意瀏覽器的兼容問(wèn)題,需要的朋友可以參考下2016-03-03
js類(lèi)中獲取外部函數(shù)名的方法...2007-08-08
微信小程序轉(zhuǎn)化為uni-app項(xiàng)目的方法示例
這篇文章主要介紹了微信小程序轉(zhuǎn)化為uni-app項(xiàng)目的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
這篇文章主要介紹了javascript事件冒泡原因、顯示效果及阻止冒泡的方法,需要的朋友可以參考下2016-06-06
原生JS實(shí)現(xiàn)天氣預(yù)報(bào)
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)天氣預(yù)報(bào)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
js前臺(tái)分頁(yè)顯示后端JAVA數(shù)據(jù)響應(yīng)
js前臺(tái)分頁(yè)顯示使用jquery1.8.7框架，本文目的主要給那些剛?cè)胄熊浖_(kāi)發(fā)，喜歡這也看看，程序需要有投入才有收獲感興趣的你可不要錯(cuò)過(guò)了哈，希望可以幫助到你2013-03-03
網(wǎng)頁(yè)廣告中JS代碼的信息監(jiān)聽(tīng)示例
在一些網(wǎng)頁(yè)廣告中提供的JS代碼可以進(jìn)行代碼注入，然后監(jiān)視各種元素，下面有個(gè)示例，大家可以參考下2014-04-04
做項(xiàng)目時(shí)遇到一個(gè)數(shù)據(jù)表需要展示，由于堅(jiān)定著使用合理標(biāo)簽表示合適內(nèi)容，于是使用了table，悲劇開(kāi)始了。2010-01-01