在本教程中，我们将了解Bootstrap中的按钮组。

简单按钮组

要创建按钮组，我们必须将按钮.btn软件包在.btn-group类中。

<div class="btn-group" role="group" aria-label="sample buttons">
  <button type="button" class="btn btn-default">Default button</button>
  <button type="button" class="btn btn-info">Info button</button>
  <button type="button" class="btn btn-success">Success button</button>
</div>

按钮工具栏

为了创建按钮工具栏，我们使用.btn-toolbar类。

<div class="btn-toolbar" role="toolbar" aria-label="toolbar">
  <div class="btn-group" role="group" aria-label="button group">
    <div class="btn btn-default">Cut</div>
    <div class="btn btn-default">Copy</div>
    <div class="btn btn-default">Paste</div>
  </div>
  <div class="btn-group" role="group" aria-label="button group">
    <div class="btn btn-default">Print</div>
    <div class="btn btn-default">Scan</div>
    <div class="btn btn-default">Copy</div>
  </div>
</div>

按钮大小

我们可以使用以下类.btn-group-lg更改较大的按钮，.btn-group-sm更改小按钮，使用.btn-group-xs更改较小的按钮，来更改按钮组的大小。

<!-- large button group size -->
<div class="btn-group btn-group-lg" role="group" aria-label="button group">
  <div class="btn btn-default">Cut</div>
  <div class="btn btn-default">Copy</div>
  <div class="btn btn-default">Paste</div>
</div>

<!-- default button group size -->
<div class="btn-group" role="group" aria-label="button group">
  <div class="btn btn-default">Cut</div>
  <div class="btn btn-default">Copy</div>
  <div class="btn btn-default">Paste</div>
</div>

<!-- small button group size -->
<div class="btn-group btn-group-sm" role="group" aria-label="button group">
  <div class="btn btn-default">Cut</div>
  <div class="btn btn-default">Copy</div>
  <div class="btn btn-default">Paste</div>
</div>

<!-- extra small button group size -->
<div class="btn-group btn-group-xs" role="group" aria-label="button group">
  <div class="btn btn-default">Cut</div>
  <div class="btn btn-default">Copy</div>
  <div class="btn btn-default">Paste</div>
</div>

按钮嵌套

我们可以通过在花药.btn-group中计划.btn-group来嵌套按钮组。

<div class="btn-group" role="group" aria-label="button group nesting">
  <button type="button" class="btn btn-default">Item 1</button>
  <button type="button" class="btn btn-default">Item 2</button>

  <div class="btn-group" role="group">
    <button type="button"
            class="btn btn-default dropdown-toggle"
            data-toggle="dropdown"
            aria-haspopup="true"
            aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
    </ul>
  </div>
</div>

垂直对齐

要垂直创建对齐按钮组，请使用.btn-group-vertical类。

<div class="btn-group-vertical" role="group" aria-label="button group vertical">
  <button type="button" class="btn btn-default">Item 1</button>
  <button type="button" class="btn btn-default">Item 2</button>
  <button type="button" class="btn btn-default">Item 3</button>
  <button type="button" class="btn btn-default">Item 4</button>
</div>

调整的按钮组

我们使用.btn-group-justified类使按钮以相等的大小拉伸并跨越其父项的整个宽度。

<div class="btn-group btn-group-justified" role="group" aria-label="button group justified">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Menu 1</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Menu 2</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Menu 3</button>
  </div>
</div>