基本下拉按钮组
将.btn-group
放置于另一个.btn-group
中。
<div class="btn-group">
<button type="button" class="btn">春天</button>
<button type="button" class="btn">夏天</button>
<div class="btn-group">
<button id="btnGroupDrop1" type="button" class="btn dropdown-toggle" data-toggle="dropdown">未来 <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupDrop1">
<li><a href="#">秋天</a></li>
<li><a href="#">冬天</a></li>
</ul>
</div>
</div>
分裂式下拉按钮组
基本按钮组的变形,将第二个按钮改成图标即可。
<div class="btn-group">
<button type="button" class="btn btn-danger">操作</button>
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">操作</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">编辑</a></li>
<li><a href="#">删除</a></li>
<li class="divider"></li>
<li><a href="#">撤销</a></li>
</ul>
</div>
</div>
上拉按钮组
通过div.dropup实现
<div class="btn-group dropup">
<button type="button" class="btn btn-danger">操作</button>
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">操作</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">编辑</a></li>
<li><a href="#">删除</a></li>
<li class="divider"></li>
<li><a href="#">撤销</a></li>
</ul>
</div>
</div>
大小
通过.btn-lg .btn-sm .btn-xs实现
<!-- 大的 -->
<div class="btn-group">
<button type="button" class="btn btn-lg">左</button>
<button type="button" class="btn btn-lg">中</button>
<button type="button" class="btn btn-lg">右</button>
</div>
<!-- 默认大小 -->
<div class="btn-group">
<button type="button" class="btn">左</button>
<button type="button" class="btn">中</button>
<button type="button" class="btn">右</button>
</div>
<!-- 小的 -->
<div class="btn-group">
<button type="button" class="btn btn-sm">左</button>
<button type="button" class="btn btn-sm">中</button>
<button type="button" class="btn btn-sm">右</button>
</div>
<!-- 超小的 -->
<div class="btn-group">
<button type="button" class="btn btn-xs">左</button>
<button type="button" class="btn btn-xs">中</button>
<button type="button" class="btn btn-xs">右</button>
</div>
颜色
<div class="btn-group">
<button type="button" class="btn">Normal</button>
<button type="button" class="btn btn-primary">.btn-primary</button>
<button type="button" class="btn btn-warning">.btn-warning</button>
<button type="button" class="btn btn-danger">.btn-danger</button>
<button type="button" class="btn btn-success">.btn-success</button>
<button type="button" class="btn btn-info">.btn-info</button>
</div>