Bootstrap按鈕組實(shí)例詳解

更新時(shí)間：2017年07月03日 08:34:51 作者：小火柴的藍(lán)色理想

單個(gè)按鈕在Web頁面中的運(yùn)用有時(shí)候并不能滿足我們的業(yè)務(wù)需求，常常會(huì)看到將多個(gè)按鈕組合在一起使用，比如富文本編輯器里的一組小圖標(biāo)按鈕等。本文將詳細(xì)介紹Bootstrap按鈕組，感興趣的朋友一起看看吧

使用方法

　　按鈕組和下拉菜單組件一樣，需要依賴于button.js插件才能正常運(yùn)行。不過我們同樣可以直接只調(diào)用bootstrap.js文件。因?yàn)檫@個(gè)文件已集成了button.js插件功能

　　同樣地，因?yàn)锽ootstrap的組件交互效果都是依賴于jQuery庫寫的插件，所以在使用bootstrap.js之前一定要先加載jquery.js才會(huì)產(chǎn)生效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link  rel="stylesheet">
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

基本用法

　　按鈕組結(jié)構(gòu)非常的簡單。使用一個(gè)名為“btn-group”的容器，把多個(gè)按鈕放到這個(gè)容器中

　　為了向屏幕閱讀器的用戶傳達(dá)正確的按鈕分組，需要提供一個(gè)合適的 role 屬性。對(duì)于按鈕組合，應(yīng)該是 role="group"，對(duì)于toolbar（工具欄）應(yīng)該是 role="toolbar"

　　此外，按鈕組和工具欄應(yīng)給定一個(gè)明確的label標(biāo)簽，盡管設(shè)置了正確的 role 屬性，但是大多數(shù)輔助技術(shù)將不會(huì)正確的識(shí)讀他們?？梢允褂?aria-label，也可以使用aria-labelledby

　　除了可以使用<button>元素之外，還可以使用其他標(biāo)簽元素，比如<a>標(biāo)簽。唯一要保證的是：不管使用什么標(biāo)簽，“.btn-group”容器里的標(biāo)簽元素需要帶有類名“.btn”

<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-fast-backward"></span></button>
 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-backward"></span></button>
 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-play"></span></button>
 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-pause"></span></button>
 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-stop"></span></button>
 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-forward "></span></button>
 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-fast-forward"></span></button>
 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-step-forward"></span></button>
</div>

按鈕工具欄

　　在富文本編輯器中，將按鈕組分組排列在一起，比如說復(fù)制、剪切和粘貼一組；左對(duì)齊、中間對(duì)齊、右對(duì)齊和兩端對(duì)齊一組。Bootstrap框架按鈕工具欄也提供了這樣的制作方法，只需要將按鈕組“btn-group”按組放在一個(gè)大的容器“btn-toolbar”中

<div class="btn-toolbar">
 <div class="btn-group">
 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button>
 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></button>
 </div>
 <div class="btn-group">
 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-indent-left"></span></button>
 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-indent-right"></span></button>
 </div>
 <div class="btn-group">
 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-font"></span></button>
 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-bold"></span></button>
 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-italic"></span></button>
 </div>
 <div class="btn-group">
 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-text-height"></span></button>
 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-text-width"></span></button>
 </div>
</div>

按鈕尺寸

　　在介紹表單按鈕的博文中，我們知道按鈕是通過btn-lg、btn-sm和btn-xs三個(gè)類名來調(diào)整padding、font-size、line-height和border-radius屬性值來改變按鈕大小。那么按鈕組的大小，我們也可以通過類似的方法：

　　 .btn-group-lg:大按鈕組

　　 .btn-group-sm:小按鈕組

　　 .btn-group-xs:超小按鈕組

　　只需要在“.btn-group”類名上追加對(duì)應(yīng)的類名，就可以得到不同大小的按鈕組

<div class="btn-group btn-group-lg">
 <button type="button" class="btn btn-default">1</button>
 <button type="button" class="btn btn-default">2</button>
 <button type="button" class="btn btn-default">3</button>
</div>
<div class="btn-group">
 <button type="button" class="btn btn-default">1</button>
 <button type="button" class="btn btn-default">2</button>
 <button type="button" class="btn btn-default">3</button>
</div>
<div class="btn-group btn-group-sm">
 <button type="button" class="btn btn-default">1</button>
 <button type="button" class="btn btn-default">2</button>
 <button type="button" class="btn btn-default">3</button>
</div>
<div class="btn-group btn-group-xs">
 <button type="button" class="btn btn-default">1</button>
 <button type="button" class="btn btn-default">2</button>
 <button type="button" class="btn btn-default">3</button>
</div>

嵌套分組

　　很多時(shí)候，我們常把下拉菜單和普通的按鈕組排列在一起，實(shí)現(xiàn)類似于導(dǎo)航菜單的效果。使用的時(shí)候，只需要把當(dāng)初制作下拉菜單的“dropdown”的容器換成“btn-group”，并且和普通的按鈕放在同一級(jí)

<div class="btn-group">
 <button class="btn btn-default" type="button">首頁</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="##">公司簡介</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>

垂直排列

　　默認(rèn)地，按鈕組都是水平顯示的。但在實(shí)際運(yùn)用當(dāng)中，總會(huì)碰到垂直顯示的效果。在Bootstrap框架中也提供了這樣的風(fēng)格。只需要把水平分組的“btn-group”類名換成“btn-group-vertical”即可

<div class="btn-group-vertical">
 <button class="btn btn-default" type="button">首頁</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="##">公司簡介</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>

等分按鈕

　　等分按鈕的效果在移動(dòng)端上特別的實(shí)用。整個(gè)按鈕組寬度是容器的100%，而按鈕組里面的每個(gè)按鈕平分整個(gè)容器寬度。例如，如果按鈕組里面有五個(gè)按鈕，那么每個(gè)按鈕是20%的寬度，如果有四個(gè)按鈕，那么每個(gè)按鈕是25%寬度，以此類推

　　等分按鈕也常被稱為是自適應(yīng)分組按鈕，其實(shí)現(xiàn)方法也非常的簡單，只需要在按鈕組“btn-group”上追加一個(gè)“btn-group-justified”類名

　　實(shí)現(xiàn)原理非常簡單，把“btn-group-justified”模擬成表格（display:table），而且把里面的按鈕模擬成表格單元格（display:table-cell）

　　[注意]在制作等分按鈕組時(shí)，盡量使用<a>標(biāo)簽元素來制作按鈕，因?yàn)槭褂?lt;button>標(biāo)簽元素時(shí)，使用display:table在部分瀏覽器下支持并不友好

.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 > .btn設(shè)置了table-cell，而table-cell是不能設(shè)置margin的，而代碼中設(shè)置了-margin值，用來去除邊框，顯然不會(huì)生效。因此，去除重復(fù)邊框的代碼應(yīng)該是合并表格邊框—— border-collapse: collapse

<div class="btn-group btn-group-justified">
 <a class="btn btn-default" href="#">首頁</a>
 <a class="btn btn-default" href="#">產(chǎn)品展示</a>
 <a class="btn btn-default" href="#">案例分析</a>
 <a class="btn btn-default" href="#">聯(lián)系我們</a>
</div>

　　為了將 <button> 元素用于兩端對(duì)齊的按鈕組中，必須將每個(gè)按鈕包裹進(jìn)一個(gè)按鈕組中。因?yàn)榇蟛糠值臑g覽器不能將CSS 應(yīng)用到對(duì)齊的 <button> 元素上，但是，可以用按鈕式下拉菜單來解決這個(gè)問題

<div class="btn-group btn-group-justified">
 <div class="btn-group" role="group">
  <button class="btn btn-default" >首頁</button>
 </div> 
 <div class="btn-group" role="group">
  <button class="btn btn-default" >產(chǎn)品展示</button>
 </div> 
 <div class="btn-group" role="group">
  <button class="btn btn-default" >案例分析</button>
 </div> 
 <div class="btn-group" role="group">
  <button class="btn btn-default" >聯(lián)系我們</button>
 </div> 
</div>