源碼解讀Bootstrap按鈕
按鈕組
按鈕組和下拉菜單組件一樣，需要依賴于bootstrap.js。使用“btn-group”的容器，把多個按鈕放到這個容器中。例如：<div class="btn-group">...</div>
“btn-group”容器里除了可以使用<button>元素之外，還可以使用其他標簽元素，比如<a>標簽。不過這里面的標簽元素需要帶有類名“.btn”。
實現源碼如下：
.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;}按鈕組四個角都是圓角，除了第一個和最后一個具有邊上的圓角之外，其他的按鈕沒有圓角。他的實現方法如下：
1. 默認所有按鈕都有圓角
2. 除第一個按鈕和最后一個按鈕（下拉按鈕除外），其他的按鈕都取消圓角效果
3. 第一個按鈕只留左上角和左下角是圓角
4. 最后一個按鈕只留右上角和右下角是圓角
實現源碼如下：
.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;}按鈕工具欄
要實現按鈕工具欄的效果，可以將按鈕組“btn-group”按組放在一個大的容器“btn-toolbar”中，例如：
<div class="btn-toolbar"> <div class="btn-group"> … </div> <div class="btn-group"> … </div></div>
實現原理主要是讓容器的多個分組“btn-group”元素進行浮動，組與組之間保持5px的左外距，并且在”btn-toolbar”上清除浮動。源碼如下：
.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”類名上追加對應的類名，就可以得到不同大小的按鈕組：
.btn-group-lg:大按鈕組
.btn-group-sm:小按鈕組
.btn-group-xs:超小按鈕組
實現源碼如下：
.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;}嵌套分組
我們常把下拉菜單和普通的按鈕組排列在一起，實現類似于導航菜單的效果。使用的時候，只需要把當初制作下拉菜單的“dropdown”的容器換成“btn-group”，并且和普通的按鈕放在同一級。例如：
<div class="btn-group"> <button class="btn btn-default" type="button">首頁</button> <button class="btn btn-default" type="button">產品展示</button> <button class="btn btn-default" type="button">案例分析</button> <button class="btn btn-default" type="button">聯系我們</button> <div class="btn-group"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">關于我們<span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="##">公司簡介</a></li> <li><a href="##">企業文化</a></li> <li><a href="##">組織結構</a></li> <li><a href="##">客服服務</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;}垂直分組
如果我們要垂直分組，我們只需要把水平分組的“btn-group”類名換成“btn-group-vertical”即可。
實現源碼如下：
.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;}等分按鈕
等分按鈕也叫自適應分組按鈕，在按鈕組“btn-group”上追加一個“btn-group-justified”類名即可。不過在制作等分按鈕組時，盡量使用<a>標簽元素來制作按鈕，因為使用<button>標簽元素時，使用display:table在部分瀏覽器下支持并不友好。
等分按鈕實現原理是把“btn-group-justified”模擬成表格（display:table），而且把里面的按鈕模擬成表格單元格（display:table-cell）。實現源碼如下：
.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）樣式效果，把外部容器“div.dropdown”換成了“div.btn-group”。實現源碼如下：
.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;}按鈕的向上向下三角形
要在按鈕上加一個向下的三角形，可以在<button>標簽中添加一個<span class="caret"></span>來實現效果。
這個三角形的實現源碼如下：
.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”實現源碼如下：
.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;}如果需要向上的三角形，在剛才的基礎上追加“dropup”類名即可。實現源碼如下：
.dropup .caret,.navbar-fixed-bottom .dropdown .caret { content: ""; border-top: 0; border-bottom: 4px solid;}向上彈起的下拉菜單
在“btn-group”或“dropdown”上添加類名“dropup”即可。實現源碼如下：
.dropup .dropdown-menu,.navbar-fixed-bottom .dropdown .dropdown-menu { top: auto; bottom: 100%; margin-bottom: 1px;}主要就是將“dropdown-menu”的top值變成了auto，而把bottom值換成了100%。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
