使用方法
創(chuàng)新互聯(lián)公司于2013年成立，是專業(yè)互聯(lián)網(wǎng)技術服務公司，擁有項目網(wǎng)站設計制作、做網(wǎng)站網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元迎江做網(wǎng)站,已為上家服務,為迎江各地企業(yè)和個人服務,聯(lián)系電話:18982081108
按鈕組和下拉菜單組件一樣，需要依賴于button.js插件才能正常運行。不過我們同樣可以直接只調用bootstrap.js文件。因為這個文件已集成了button.js插件功能
同樣地，因為Bootstrap的組件交互效果都是依賴于jQuery庫寫的插件，所以在使用bootstrap.js之前一定要先加載jquery.js才會產(chǎn)生效果
Document
基本用法
按鈕組結構非常的簡單。使用一個名為“btn-group”的容器，把多個按鈕放到這個容器中
為了向屏幕閱讀器的用戶傳達正確的按鈕分組，需要提供一個合適的 role 屬性。對于按鈕組合，應該是 role="group"，對于toolbar（工具欄）應該是 role="toolbar"
此外，按鈕組和工具欄應給定一個明確的label標簽，盡管設置了正確的 role 屬性，但是大多數(shù)輔助技術將不會正確的識讀他們。可以使用 aria-label，也可以使用aria-labelledby
除了可以使用
按鈕工具欄
在富文本編輯器中，將按鈕組分組排列在一起，比如說復制、剪切和粘貼一組；左對齊、中間對齊、右對齊和兩端對齊一組。Bootstrap框架按鈕工具欄也提供了這樣的制作方法，只需要將按鈕組“btn-group”按組放在一個大的容器“btn-toolbar”中
按鈕尺寸
在介紹表單按鈕的博文中，我們知道按鈕是通過btn-lg、btn-sm和btn-xs三個類名來調整padding、font-size、line-height和border-radius屬性值來改變按鈕大小。那么按鈕組的大小，我們也可以通過類似的方法：
.btn-group-lg:大按鈕組
.btn-group-sm:小按鈕組
.btn-group-xs:超小按鈕組
只需要在“.btn-group”類名上追加對應的類名，就可以得到不同大小的按鈕組
嵌套分組
很多時候，我們常把下拉菜單和普通的按鈕組排列在一起，實現(xiàn)類似于導航菜單的效果。使用的時候，只需要把當初制作下拉菜單的“dropdown”的容器換成“btn-group”，并且和普通的按鈕放在同一級
.jpg)
垂直排列
默認地，按鈕組都是水平顯示的。但在實際運用當中，總會碰到垂直顯示的效果。在Bootstrap框架中也提供了這樣的風格。只需要把水平分組的“btn-group”類名換成“btn-group-vertical”即可
等分按鈕
等分按鈕的效果在移動端上特別的實用。整個按鈕組寬度是容器的100%，而按鈕組里面的每個按鈕平分整個容器寬度。例如，如果按鈕組里面有五個按鈕，那么每個按鈕是20%的寬度，如果有四個按鈕，那么每個按鈕是25%寬度，以此類推
等分按鈕也常被稱為是自適應分組按鈕，其實現(xiàn)方法也非常的簡單，只需要在按鈕組“btn-group”上追加一個“btn-group-justified”類名
實現(xiàn)原理非常簡單，把“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-group-justified > .btn設置了table-cell，而table-cell是不能設置margin的，而代碼中設置了-margin值，用來去除邊框，顯然不會生效。因此，去除重復邊框的代碼應該是合并表格邊框—— border-collapse: collapse
為了將
.jpg)
以上所述是小編給大家介紹的Bootstrap按鈕組實例詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！
