Bootstrap源碼解讀按鈕（5）

更新時間：2016年12月23日 08:56:45 作者：藝術就是爆炸

這篇文章主要源碼解讀了Bootstrap按鈕，介紹了Bootstrap各式各樣的按鈕,具有一定的參考價值，感興趣的小伙伴們可以參考一下

源碼解讀Bootstrap按鈕

按鈕組

按鈕組和下拉菜單組件一樣，需要依賴于bootstrap.js。使用“btn-group”的容器，把多個按鈕放到這個容器中。例如：<div class="btn-group">...</div>
“btn-group”容器里除了可以使用<button>元素之外，還可以使用其他標簽元素，比如<a>標簽。不過這里面的標簽元素需要帶有類名“.btn”。

實現(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;
}

按鈕組四個角都是圓角，除了第一個和最后一個具有邊上的圓角之外，其他的按鈕沒有圓角。他的實現(xiàn)方法如下：
1. 默認所有按鈕都有圓角
2. 除第一個按鈕和最后一個按鈕（下拉按鈕除外），其他的按鈕都取消圓角效果
3. 第一個按鈕只留左上角和左下角是圓角
4. 最后一個按鈕只留右上角和右下角是圓角
實現(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;
}

按鈕工具欄

要實現(xiàn)按鈕工具欄的效果，可以將按鈕組“btn-group”按組放在一個大的容器“btn-toolbar”中，例如：

<div class="btn-toolbar">
 <div class="btn-group">
 …
 </div>
 <div class="btn-group">
 …
 </div>
</div>

實現(xiàn)原理主要是讓容器的多個分組“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:超小按鈕組

實現(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;
}

嵌套分組

我們常把下拉菜單和普通的按鈕組排列在一起，實現(xiàn)類似于導航菜單的效果。使用的時候，只需要把當初制作下拉菜單的“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">聯(lián)系我們</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="##">企業(yè)文化</a></li>
   <li><a href="##">組織結構</a></li>
   <li><a href="##">客服服務</a></li>
  </ul>
 </div>
</div>

實現(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”即可。
實現(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;
}

等分按鈕

等分按鈕也叫自適應分組按鈕，在按鈕組“btn-group”上追加一個“btn-group-justified”類名即可。不過在制作等分按鈕組時，盡量使用<a>標簽元素來制作按鈕，因為使用<button>標簽元素時，使用display:table在部分瀏覽器下支持并不友好。
等分按鈕實現(xiàn)原理是把“btn-group-justified”模擬成表格（display:table），而且把里面的按鈕模擬成表格單元格（display:table-cell）。實現(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%;
}

按鈕下拉菜單

按鈕下拉菜單其實在介紹嵌套分組的時候已經用過了，它和下拉菜單效果基本上是一樣的。不同的是在普通的下拉菜單的基礎上封裝了按鈕（.btn）樣式效果，把外部容器“div.dropdown”換成了“div.btn-group”。實現(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;
}

按鈕的向上向下三角形

要在按鈕上加一個向下的三角形，可以在<button>標簽中添加一個<span class="caret"></span>來實現(xiàn)效果。
這個三角形的實現(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”實現(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;
}

如果需要向上的三角形，在剛才的基礎上追加“dropup”類名即可。實現(xiàn)源碼如下：

.dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
 content: "";
 border-top: 0;
 border-bottom: 4px solid;
}

向上彈起的下拉菜單

在“btn-group”或“dropdown”上添加類名“dropup”即可。實現(xiàn)源碼如下：

.dropup .dropdown-menu,
.navbar-fixed-bottom .dropdown .dropdown-menu {
 top: auto;
 bottom: 100%;
 margin-bottom: 1px;
}

主要就是將“dropdown-menu”的top值變成了auto，而把bottom值換成了100%。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

JS異步宏隊列微隊列原理詳解
這篇文章主要介紹了JS異步宏隊列微隊列原理詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-09-09
深入探討TypeScript中類與接口的使用
TypeScript是一種強大的編程語言,它在JavaScript的基礎上添加了靜態(tài)類型檢查,使得代碼更加可維護和類型安全,在TypeScript中,類和接口是構建復雜應用程序的關鍵組成部分,本文將深入探討TypeScript中類與接口的使用,需要的朋友可以參考下
2023-09-09
js實現(xiàn)瀏覽器打印功能的示例代碼
這篇文章主要介紹了js如何實現(xiàn)瀏覽器打印功能，文中示例代碼非常詳細，幫助大家更好的理解和學習，感興趣的朋友可以了解下
2020-07-07
JavaScript學習筆記(三)：JavaScript也有入口Main函數(shù)
大家都知道在c和java中，有main函數(shù)貨main方法作為一個程序的入口函數(shù)或方法。在JS中從js源文件的頭部開始運行的，我們仍然可以虛構出一個main函數(shù)來作為程序的起點，這樣一來不僅可以跟其他語言統(tǒng)一了，而且說不定你會對JS有更深的理解。感興趣的小伙跟著小編一起學習吧
2015-09-09
基于JS+Canvas的lucky-canvas?抽獎功能
一個基于?Js?+?Canvas?的大轉盤和九宮格和老虎機抽獎，使用lucky-canvas?功能可以自由配置，多端適配的特點，本文通過實例代碼給大家詳細介紹抽獎方法，感興趣的朋友一起看看吧
2022-06-06
前端開發(fā)TypeScript入門基礎教程
這篇文章主要為大家介紹了前端開發(fā)TypeScript的入門基礎教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-02-02
javascript 避免閉包引發(fā)的問題
閉包的功能強大，但如果沒有正確理解閉包的概念，其結果往往出乎人的意料。例如，下面是一個較常見的問題
2009-03-03
基于Echarts實現(xiàn)繪制立體柱狀圖的示例代碼
這篇文章主要為大家詳細介紹了如何基于Echarts實現(xiàn)繪制立體柱狀圖的功能，文中的示例代碼講解詳細，具有一定的借鑒價值，需要的可以參考一下
2023-02-02
微信小程序 flexbox layout快速實現(xiàn)基本布局的解決方案
flexbox layout 彈性盒子布局。彈性盒子可以快速的對小程序進行布局。這篇文章主要介紹了微信小程序 flexbox layout快速實現(xiàn)基本布局的方法,需要的朋友可以參考下
2020-03-03
JS數(shù)組求和的常用方法實例小結
這篇文章主要介紹了JS數(shù)組求和的常用方法,結合實例形式總結分析了javascript常見的遍歷、循環(huán)、歸并等數(shù)組操作相關技巧,需要的朋友可以參考下
2019-01-01