Bootstrap 按钮组
按钮组
Bootstrap 允许您将一系列按钮(在同一行上)组合在一起,形成一个按钮组。
使用带有类 .btn-group
的 <div>
元素来创建按钮组。
示例
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
自己动手试一试 »
提示:不必为组中的每个按钮单独应用按钮大小,而是使用类 .btn-group-lg|sm|xs
来调整组中所有按钮的大小。
示例
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
自己动手试一试 »
垂直按钮组
Bootstrap 也支持垂直按钮组。
使用类 .btn-group-vertical
来创建垂直按钮组。
示例
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
自己动手试一试 »
占满整个宽度的按钮组
要跨越整个屏幕宽度,请使用 .btn-group-justified
类。
使用 <a>
元素的示例
示例
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">Apple</a>
<a href="#" class="btn btn-primary">Samsung</a>
<a href="#" class="btn btn-primary">Sony</a>
</div>
自己动手试一试 »
注意:对于 <button>
元素,您必须将每个按钮包装在 .btn-group
类中。
示例
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Samsung</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
</div>
</div>
自己动手试一试 »
嵌套按钮组和下拉菜单
嵌套按钮组以创建下拉菜单。
示例
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Sony <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>
</div>
自己动手试一试 »
拆分按钮下拉菜单
示例
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</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="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>
自己动手试一试 »