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