Bootstrap按鈕組的實例詳解
- 零下一度原創
- 2017-07-03 11:40:291419瀏覽
前面的話
單一按鈕在Web頁面中的運用有時候並不能滿足我們的業務需求，常常會看到將多個按鈕組合在一起使用，例如富文本編輯器裡的一組小圖示按鈕等。本文將詳細介紹Bootstrap按鈕組
使用方法
# 按鈕組和下拉式選單元件一樣，需要依賴button.js外掛程式才能正常運作。不過我們同樣可以直接只呼叫bootstrap.js檔。因為這個檔案已經整合了button.js插件功能
同樣地，因為Bootstrap的元件互動效果都是依賴jQuery函式庫寫的插件，所以在使用bootstrap.js之前一定要先載入jquery.js才會產生效果
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css?1.1.11" rel="stylesheet"></head><body><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js?1.1.11"></script><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js?1.1.11"></script></body></html>
基本用法
按鈕群組結構非常的簡單。使用一個名為「btn-group」的容器，把多個按鈕放到這個容器中
為了向螢幕閱讀器的使用者傳達正確的按鈕分組，需要提供一個合適的 role 屬性。對於按鈕組合，應該是 role="group"，對於toolbar（工具列）應該是 role="toolbar"
此外，按鈕組和工具列應給予明確的label標籤，儘管設定了正確的 role 屬性，但是大多數輔助科技將不會正確的識讀他們。可以使用 aria-label，也可以使用aria-labelledby
除了可以使用<button>元素之外，還可以使用其他標籤元素，例如標籤。唯一要保證的是：不管使用什麼標籤，「.btn-group」容器裡的標籤元素需要帶有類別名稱「.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>
按鈕工具列
在富文本編輯器中，將按鈕群組分組排列在一起，比如說複製、剪下和貼上一組；左對齊、中間對齊、右對齊和兩端對齊一組。 Bootstrap框架按鈕工具列也提供了這樣的製作方法，只需要將按鈕組“btn-group”按組放在一個大的容器“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三個類名來調整padding、font-size、line-height和border-radius屬性值來改變按鈕大小。那麼按鈕組的大小，我們也可以用類似的方法：
☑ .btn-group-lg:大按鈕組
☑ .btn-group-sm:小按鈕組
# ☑ .btn-group-xs:超小按鈕群組
只需要在「.btn-group」類別名稱上追加對應的類別名，就可以得到不同大小的按鈕群組
<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>
巢分組
很多時候，我們常常把下拉式選單和普通的按鈕組排列在一起，實現類似導航選單的效果。使用的時候，只需要把當初製作下拉式選單的“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>
垂直排列
預設地，按鈕組都是水平顯示的。但在實際運用當中，總是會碰到垂直顯示的效果。在Bootstrap框架中也提供了這樣的風格。只要將水平分組的“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">产品展示</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>
#
等分按鈕
等分按鈕的效果在行動端上特別的實用。整個按鈕組寬度是容器的100%，而按鈕組裡面的每個按鈕平分整個容器寬度。例如，如果按鈕組裡面有五個按鈕，那麼每個按鈕是20%的寬度，如果有四個按鈕，那麼每個按鈕是25%寬度，以此類推
等分按鈕也常稱為是自適應分組按鈕，其實作方法也非常的簡單，只需要在按鈕群組「btn-group」上追加一個「btn-group-justified」類別名稱
實作原理非常簡單，把「btn-group-justified」模擬成表格（display:table），而且把裡面的按鈕模擬成表格單元格（display:table-cell）
[注意]在製作等分按鈕組時，盡量使用標籤元素來製作按鈕，因為使用<button>標籤元素時，使用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設定了table-cell，而table-cell是無法設定margin的，而程式碼中設定了-margin值，用來去除邊框，顯然不會生效。因此，移除重複邊框的程式碼應該是合併表格邊框－ border-collapse: collapse
<div class="btn-group btn-group-justified"><a class="btn btn-default" href="#">首页</a><a class="btn btn-default" href="#">产品展示</a><a class="btn btn-default" href="#">案例分析</a><a class="btn btn-default" href="#">联系我们</a></div>
为了将 <button> 元素用于两端对齐的按钮组中，必须将每个按钮包裹进一个按钮组中。因为大部分的浏览器不能将CSS 应用到对齐的 <button> 元素上，但是，可以用按钮式下拉菜单来解决这个问题
<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" >产品展示</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" >联系我们</button></div> </div>
以上是Bootstrap按鈕組的實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！