Bootstrap Demo

按钮组

Class	描述	代码示例
.btn-group	该 class 用于形成基本的按钮组。在 .btn-group 中放置一系列带有 class .btn 的按钮。	<div class="btn-group"> <button type="button" class="btn btn-default">Button1</button> <button type="button" class="btn btn-default">Button2</button> </div>
.btn-toolbar	该 class 有助于把几组 <div class="btn-group"> 结合到一个 <div class="btn-toolbar"> 中，一般获得更复杂的组件。	<div class="btn-toolbar" role="toolbar"> <div class="btn-group">...</div> <div class="btn-group">...</div> </div>
.btn-group-lg, .btn-group-sm, .btn-group-xs	这些 class 可应用到整个按钮组的大小调整，而不需要对每个按钮进行大小调整。	<div class="btn-group btn-group-lg">...</div> <div class="btn-group btn-group-sm">...</div> <div class="btn-group btn-group-xs">...</div>
.btn-group-vertical	该 class 让一组按钮垂直堆叠显示，而不是水平堆叠显示。	<div class="btn-group-vertical"> ... </div>
.btn-group-justified	该 class 让一组按钮拉长为相同的尺寸，填满父元素的宽度。对于按钮组中的按钮式下拉菜单也同样适用。(注意使用a标签与button标签两种不同的结构)	<div class="btn-group btn-group-justified" role="group" aria-label="..."> <div class="btn-group" role="group"> <button type="button" class="btn btn-default">Left</button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-default">Middle</button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-default">Right</button> </div> </div>

.btn-group 常规按钮组

					
<button type="button" class="btn btn-default">default 按钮</button>
<button type="button" class="btn btn-primary">primary 按钮</button>
<button type="button" class="btn btn-success">success 按钮</button>
<button type="button" class="btn btn-info">info 按钮</button>
<button type="button" class="btn btn-warning">warning 按钮</button>
<button type="button" class="btn btn-danger">danger 按钮</button>
<button type="button" class="btn btn-link">link 按钮</button>

					
<button type="button" class="btn btn-default">default 按钮</button>
<button type="button" class="btn btn-default">default 按钮</button>
<button type="button" class="btn btn-default">default 按钮</button>
<button type="button" class="btn btn-default">default 按钮</button>
<button type="button" class="btn btn-default">default 按钮</button>
<button type="button" class="btn btn-default">default 按钮</button>
<button type="button" class="btn btn-default">default 按钮</button>

					
<button type="button" class="btn btn-primary">primary 按钮</button>
<button type="button" class="btn btn-primary">primary 按钮</button>
<button type="button" class="btn btn-primary">primary 按钮</button>
<button type="button" class="btn btn-primary">primary 按钮</button>
<button type="button" class="btn btn-primary">primary 按钮</button>
<button type="button" class="btn btn-primary">primary 按钮</button>
<button type="button" class="btn btn-primary">primary 按钮</button>

.btn-toolbar 按钮工具栏

					
<div class="btn-toolbar" role="toolbar">
	<div class="btn-group">
		<button type="button" class="btn btn-default">default 按钮</button>
		<button type="button" class="btn btn-default">default 按钮</button>
		<button type="button" class="btn btn-default">default 按钮</button>

	</div>
	<div class="btn-group">
		<button type="button" class="btn btn-primary">primary 按钮</button>
		<button type="button" class="btn btn-primary">primary 按钮</button>
		<button type="button" class="btn btn-primary">primary 按钮</button>
	</div>
	<div class="btn-group">
		<button type="button" class="btn btn-success">success 按钮</button>
		<button type="button" class="btn btn-success">success 按钮</button>
		<button type="button" class="btn btn-success">success 按钮</button>
	</div>
</div>

.btn-group-* 按钮组大小(btn-group-lg、btn-group-sm、btn-group-xs)

					
<div class="btn-group btn-group-lg">
	<button type="button" class="btn btn-default">default 大按钮</button>
	<button type="button" class="btn btn-default">default 大按钮</button>
	<button type="button" class="btn btn-default">default 大按钮</button>

</div>
<div class="btn-group btn-group-sm">
	<button type="button" class="btn btn-primary">primary 小按钮</button>
	<button type="button" class="btn btn-primary">primary 小按钮</button>
	<button type="button" class="btn btn-primary">primary 小按钮</button>
</div>
<div class="btn-group btn-group-xs">
	<button type="button" class="btn btn-success btn-lg">success 超小按钮</button>
	<button type="button" class="btn btn-success">success 超小按钮</button>
	<button type="button" class="btn btn-success">success 超小按钮</button>
</div>

.btn-group-vertical 垂直按钮组

					
<div class="btn-group-vertical" role="group">
	<button type="button" class="btn btn-default">default 按钮</button>
	<button type="button" class="btn btn-default">default 按钮</button>
	<button type="button" class="btn btn-default">default 按钮</button>
</div>
<div class="btn-group-vertical" role="group">
	<button type="button" class="btn btn-primary">primary 按钮</button>
	<button type="button" class="btn btn-primary">primary 按钮</button>
	<button type="button" class="btn btn-primary">primary 按钮</button>
</div>
<div class="btn-group-vertical" role="group">
	<button type="button" class="btn btn-success">success 按钮</button>
	<button type="button" class="btn btn-success">success 按钮</button>
	<button type="button" class="btn btn-success">success 按钮</button>
</div>

.btn-group-justified 两端对齐排列的按钮组

a标签形式

default 按钮 default 按钮 default 按钮

primary 按钮 primary 按钮 primary 按钮

success 按钮 success 按钮 success 按钮

					
<div class="btn-group btn-group-justified" role="group">
	<a role="button" class="btn btn-default">default 按钮</a>
	<a role="button" class="btn btn-default">default 按钮</a>
	<a role="button" class="btn btn-default">default 按钮</a>
</div>
<div class="btn-group btn-group-justified" role="group">
	<a role="button" class="btn btn-primary">primary 按钮</a>
	<a role="button" class="btn btn-primary">primary 按钮</a>
	<a role="button" class="btn btn-primary">primary 按钮</a>
</div>
<div class="btn-group btn-group-justified" role="group">
	<a role="button" class="btn btn-success">success 按钮</a>
	<a role="button" class="btn btn-success">success 按钮</a>
	<a role="button" class="btn btn-success">success 按钮</a>
</div>

button标签形式

					
<div class="btn-group btn-group-justified" role="group" aria-label="...">
	<div class="btn-group" role="group">
		<button type="button" class="btn btn-default">default 按钮</button>
	</div>
	<div class="btn-group" role="group">
		<button type="button" class="btn btn-default">default 按钮</button>
	</div>
	<div class="btn-group" role="group">
		<button type="button" class="btn btn-default">default 按钮</button>
	</div>
</div>
<div class="btn-group btn-group-justified" role="group" aria-label="...">
	<div class="btn-group" role="group">
		<button type="button" class="btn btn-primary">primary 按钮</button>
	</div>
	<div class="btn-group" role="group">
		<button type="button" class="btn btn-primary">primary 按钮</button>
	</div>
	<div class="btn-group" role="group">
		<button type="button" class="btn btn-primary">primary 按钮</button>
	</div>
</div>
<div class="btn-group btn-group-justified" role="group" aria-label="...">
	<div class="btn-group" role="group">
		<button type="button" class="btn btn-success">success 按钮</button>
	</div>
	<div class="btn-group" role="group">
		<button type="button" class="btn btn-success">success 按钮</button>
	</div>
	<div class="btn-group" role="group">
		<button type="button" class="btn btn-success">success 按钮</button>
	</div>
</div>