W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

Bootstrap 按钮组



基础按钮组

按钮组允许多个按钮被堆叠在同一行上。当你想要把按钮对齐在一起时,这就显得非常有用。您可以通过 Bootstrap 按钮插件 添加可选的 JavaScript 单选框和复选框样式行为。

<div> 元素上添加 .btn-group 类便可以轻松创建一组按钮组:

Example

<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 加上 .btn-group-* 类,就省去为按钮组中的每个按钮都赋予尺寸类了,如果包含了多个按钮组时也适用。

Example

<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 类便可以创建一个垂直的按钮组:

Example

<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> 元素的实例:

Example

<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> 元素用于两端对齐的按钮组中,必须将每个按钮包裹进一个按钮组中。大部分的浏览器不能将我们的 CSS 应用到对齐的 <button> 元素上,但是,由于我们支持按钮式下拉菜单,我们可以解决这个问题。

Example

<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>
尝试一下 »

嵌套&下拉菜单

想要把下拉菜单混合到一系列按钮中,只须把 .btn-group 放入另一个 .btn-group 中。

Example

<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>
尝试一下 »

分裂式按钮下拉菜单

相似地,分裂式按钮下拉菜单也需要同样的改变一些标记,但只是多一个分开的按钮。

Example

<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>
尝试一下 »