[url]http://v2.bootcss.com/components.html#buttonGroups[/url]
[img]http://dl2.iteye.com/upload/attachment/0105/8369/2efa1772-128c-3098-ba56-3930627d7d5e.jpg[/img][img]http://dl2.iteye.com/upload/attachment/0105/8392/a3a6baad-7c06-3106-beaf-bb788c8380f9.jpg[/img][img]http://dl2.iteye.com/upload/attachment/0105/8394/16eaa993-79be-3781-84b0-b0e44a09b59f.jpg[/img]
<div class="bs-docs-example">
<div class="btn-toolbar" style="margin: 0;">
<!--单一按钮组:将带有.btn类的一系列按钮包裹在.btn-group中-->
<div class="btn-group">
<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn">3</button>
<button class="btn">4</button>
</div>
<!--多维按钮组:多个<div class="btn-group">放入<div class="btn-toolbar">中即可获得多维按钮组;垂直按钮组:.btn-group-vertical让一组按钮呈现出垂直方向堆叠的样式-->
<div class="btn-group btn-group-vertical">
<button class="btn"><i class="icon-align-left"></i></button>
<button class="btn"><i class="icon-align-center"></i></button>
<button class="btn"><i class="icon-align-right"></i></button>
</div>
<!--按钮放入.btn-group中,并为其添加适当的菜单标签,即可让此按钮触发下拉菜单-->
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">8<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li><a href="#">11</a></li>
<li class="divider"></li>
<li><a href="#">12</a></li>
</ul>
</div>
<!--分列式按钮:左侧是一个标准形式的按钮,右侧是一个可触发下拉菜单的链接。-->
<div class="btn-group">
<button class="btn btn-danger">8</button>
<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li><a href="#">11</a></li>
<li class="divider"></li>
<li><a href="#">12</a></li>
</ul>
</div><!-- /btn-group -->
<!--按钮式下拉菜单-->
<!--给.dropdown-menu的直接父节点添加一个类就可以让下拉菜单由下到上显示。.caret将会自动翻转,菜单的位置也会变为由下到上而不是由上到下了-->
<div class="btn-group dropup">
<button class="btn">18Dropup</button>
<button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">19</a></li>
<li><a href="#">20</a></li>
<li><a href="#">21</a></li>
<li class="divider"></li>
<li><a href="#">22</a></li>
</ul>
</div><!-- /btn-group -->
</div>
</div>
[img]http://dl2.iteye.com/upload/attachment/0105/8369/2efa1772-128c-3098-ba56-3930627d7d5e.jpg[/img][img]http://dl2.iteye.com/upload/attachment/0105/8392/a3a6baad-7c06-3106-beaf-bb788c8380f9.jpg[/img][img]http://dl2.iteye.com/upload/attachment/0105/8394/16eaa993-79be-3781-84b0-b0e44a09b59f.jpg[/img]