在富文本編輯器中，將按鈕組分組排列在一起，比如說復制、剪切和粘貼一組；左對齊、中間對齊、右對齊和兩端對齊一組，如下圖所示：
那么Bootstrap框架按鈕工具欄也提供了這樣的制作方法，你只需要將按鈕組“btn-group”按組放在一個大的容器“btn-toolbar”中，如下所示：
<div class="btn-toolbar">
<div class="btn-group">
…
</div>
<div class="btn-group">
…
</div>
<div class="btn-group">
…
</div>
<div class="btn-group">
…
</div>
</div>
實現原理主要是讓容器的多個分組“btn-group”元素進行浮動，并且組與組之前保持5px的左外距。代碼如下：
/*源碼請查閱bootstrap.css文件第3162行～第3173行*/
.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”上清除浮動。
/*源碼請查閱bootstrap.css文件第5062行*/
.btn-toolbar:before,
.btn-toolbar:after｛
display: table;
content: " ";
｝
.btn-toolbar:after{
clear: both;
}
運行效果如下：
按鈕組大小設置
在介紹按鈕一節中，我們知道按鈕是通過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-toolbar"> <div class="btn-group btn-group-lg"> … </div> <div class="btn-group"> … </div> <div class="btn-group btn-group-sm"> … </div> <div class="btn-group btn-group-xs"> … </div> </div>
運行效果如下所示：
實現上圖效果樣式代碼如下：
/*源碼請查閱bootstrap.css文件第2320行～第2340行*/
.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;
}
我來試試:完成下面任務
編寫代碼實現按鈕工具欄效果，效果圖：
備注:這一小節沒有正確性驗證，請查看結果窗口與任務所給的結果圖片是否一致，從而判斷輸入代碼是否正確。
參考代碼：
<div class="btn-group btn-group-sm">
<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 btn-group-xs">
<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>
請驗證，完成請求
由于請求次數過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報