常用的class:
- .btn-group 用于形成基本的按钮组
- .btn-toolbar 是按钮工具栏,把几组 <div class="btn-group"> 结合到一个 <div class="btn-toolbar"> 中,一般获得更复杂的组件
- .btn-group-lg, .btn-group-sm, .btn-group-xs 可调整个按钮组的大小,而不需要对每个按钮进行大小调整
- .btn-group-vertical 让一组按钮垂直堆叠显示,而不是水平堆叠显示
<div class="btn-group">
<button type="button" class="btn btn-default">海贼王</button>
<button type="button" class="btn btn-default">火影忍者</button>
<button type="button" class="btn btn-default">斗破苍穹</button>
</div>
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default">海贼王</button>
<button type="button" class="btn btn-default">火影忍者</button>
<button type="button" class="btn btn-default">灌篮高手</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">猫和老鼠</button>
<button type="button" class="btn btn-default">唐老鸭</button>
<button type="button" class="btn btn-default">米奇乐园</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">镇魂街</button>
<button type="button" class="btn btn-default">画江湖</button>
<button type="button" class="btn btn-default">一人之下</button>
</div>
</div>
<div class="btn-group-vertical">
<button type="button" class="btn btn-default">海贼王</button>
<button type="button" class="btn btn-default">火影忍者</button>
<div class="btn-group-vertical">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
樱桃小丸子
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">丸子</a></li>
<li><a href="#">乔治</a></li>
</ul>
</div>
</div>
嵌套
在一个按钮组内嵌套另一个按钮组,即,在一个 .btn-group 内嵌套另一个 .btn-group
下拉菜单与一系列按钮组合使用时,就会用到这个
<div class="btn-group">
<button type="button" class="btn btn-default">海贼王</button>
<button type="button" class="btn btn-default">火影忍者</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">斗破苍穹
<span class="caret"></span>
</button>
<ul class="dropdown-menu" style="margin-left: 11.875rem;">
<li><a href="#">熊大</a></li>
<li><a href="#">熊二</a></li>
</ul>
</div>