Grupo de botones

Agrupe una serie de botones en una sola línea con el grupo de botones y superpoderelos con JavaScript.

Ejemplo básico

Envuelve una serie de botones .btncon .btn-group. Agregue el comportamiento opcional de estilo de casilla de verificación y radio de JavaScript con nuestro complemento de botones .

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

Asegúrese de que sea correcto `role`y proporcione una etiqueta

Para que las tecnologías de asistencia (como los lectores de pantalla) transmitan que una serie de botones está agrupada, rolese debe proporcionar un atributo apropiado. Para los grupos de botones, sería role="group", mientras que las barras de herramientas deberían tener una extensión role="toolbar".

Además, los grupos y las barras de herramientas deben recibir una etiqueta explícita, ya que, de lo contrario, la mayoría de las tecnologías de asistencia no los anunciarán, a pesar de la presencia del atributo de rol correcto. En los ejemplos proporcionados aquí, usamos , pero también se pueden usar aria-labelalternativas como .aria-labelledby

Combine conjuntos de grupos de botones en barras de herramientas de botones para componentes más complejos. Use clases de utilidad según sea necesario para espaciar grupos, botones y más.

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="btn-group mr-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-secondary">5</button>
    <button type="button" class="btn btn-secondary">6</button>
    <button type="button" class="btn btn-secondary">7</button>
  </div>
  <div class="btn-group" role="group" aria-label="Third group">
    <button type="button" class="btn btn-secondary">8</button>
  </div>
</div>

Siéntase libre de mezclar grupos de entrada con grupos de botones en sus barras de herramientas. Similar al ejemplo anterior, es probable que necesite algunas utilidades para espaciar las cosas correctamente.

<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text" id="btnGroupAddon">@</div>
    </div>
    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
  </div>
</div>

<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text" id="btnGroupAddon2">@</div>
    </div>
    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
  </div>
</div>

Dimensionamiento

En lugar de aplicar clases de tamaño de botón a cada botón de un grupo, solo agregue .btn-group-*a cada uno .btn-group, incluido cada uno al anidar varios grupos.

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>

Anidamiento

Coloque una .btn-groupdentro de otra .btn-groupcuando desee que los menús desplegables se mezclen con una serie de botones.

<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-secondary">1</button>
  <button type="button" class="btn btn-secondary">2</button>

  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

Variación vertical

Haga que un conjunto de botones aparezcan apilados verticalmente en lugar de horizontalmente. Los menús desplegables de botones divididos no son compatibles aquí.

<div class="btn-group-vertical">
  ...
</div>