Bootstrap 按钮组
按钮组
Bootstrap 允许您将一系列按钮分组在一起（在一行上）形成一个按钮组
使用带有类 .btn-group 的 <div> 元素来创建一个按钮组
示例
<div class="btn-group">
<button type="button" class="btn btn-primary">苹果</button>
<button type="button" class="btn btn-primary">三星</button>
<button type="button" class="btn btn-primary">索尼</button>
</div>
亲自尝试 »
提示： 而不是对按钮组中的每个按钮应用按钮尺寸，使用类 .btn-group-lg|sm|xs 来调整按钮组中所有按钮的尺寸
示例
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">苹果</button>
<button type="button" class="btn btn-primary">三星</button>
<button type="button" class="btn btn-primary">索尼</button>
</div>
亲自尝试 »
垂直按钮组
Bootstrap 也支持垂直按钮组
使用类 .btn-group-vertical 来创建一个垂直按钮组
示例
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">苹果</button>
<button type="button" class="btn btn-primary">三星</button>
<button type="button" class="btn btn-primary">索尼</button>
</div>
亲自尝试 »
两端对齐按钮组
要跨越整个屏幕宽度，请使用 .btn-group-justified 类
带有 <a> 元素的示例
示例
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">苹果</a>
<a href="#" class="btn btn-primary">三星</a>
<a href="#" class="btn btn-primary">索尼</a>
</div>
亲自尝试 »
注意： 对于 <button> 元素，您必须将每个按钮包装在一个 .btn-group 类中
示例
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-primary">苹果</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">三星</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">索尼</button>
</div>
</div>
亲自尝试 »
嵌套按钮组和下拉菜单
嵌套按钮组以创建下拉菜单
示例
<div class="btn-group">
<button type="button" class="btn btn-primary">苹果</button>
<button type="button" class="btn btn-primary">三星</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
索尼 <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">平板电脑</a></li>
<li><a href="#">智能手机</a></li>
</ul>
</div>
</div>
亲自尝试 »
分割按钮下拉菜单
示例
<div class="btn-group">
<button type="button" class="btn btn-primary">索尼</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">平板电脑</a></li>
<li><a href="#">智能手机</a></li>
</ul>
</div>
亲自尝试 »
