按钮组
按钮组允许多个按钮被堆叠在同一行上。当你想要把按钮对齐在一起时,这就显得非常有用。
1.按钮组
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">按钮1</button>
<button type="button" class="btn btn-default">按钮2</button>
<button type="button" class="btn btn-default">按钮3</button>
</div>
2.按钮工具栏
多个按钮组结合
<div class="btn-toolbar" role="toolbar">
按钮组
</div>
3.按钮组大小
可应用到整个按钮组的大小调整,而不需要对每个按钮进行大小调整。
<div class="btn-group btn-group-lg">
(大)
按钮组
</div>
<div class="btn-group btn-group">
(正常)
按钮组
</div>
<div class="btn-group btn-group-sm">
(小)
按钮组
</div>
<div class="btn-group btn-group-xs">
(更小)
按钮组
</div>
4.垂直排列的按钮组
<div class="btn-group-vertical">
<button type="button" class="btn btn-default">按钮 1</button>
<button type="button" class="btn btn-default">按钮 2</button>
</div>
5.复选框
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="checkbox" checked>按钮1(默认选中)
</label>
<label class="btn btn-default">
<input type="checkbox" > 按钮2
</label>
<label class="btn btn-default">
<input type="checkbox" > 按钮3
</label>
</div>
6.单选框
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="radio" checked>按钮1(默认选中)
</label>
<label class="btn btn-default">
<input type="radio" > 按钮2
</label>
<label class="btn btn-default">
<input type="radio" > 按钮3
</label>
</div>
7.嵌套
<div class="btn-group">
<button type="button" class="btn btn-default">按钮 1</button>
<button type="button" class="btn btn-default">按钮 2</button>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
下拉
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">下拉链接 1</a></li>
<li><a href="#">下拉链接 2</a></li>
</ul>
</div>
</div>