Button group

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

Ejemplo básico

Envuelva una serie de botones con .btn in .btn-group . Agregue el comportamiento de estilo de casilla de verificación y radio de JavaScript opcional 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 corregir `role` y proporcionar una etiqueta

Para que las tecnologías de asistencia (como los lectores de pantalla) transmitan que una serie de botones está agrupada, es necesario proporcionar un role atributo apropiado. Para los grupos de botones, esto 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 tener una etiqueta explícita, ya que la mayoría de las tecnologías de asistencia no los anunciarán, a pesar de la presencia del atributo de función correcto. En los ejemplos proporcionados aquí, usamos aria-label , pero aria-labelledby también se pueden usar alternativas como.

Combine conjuntos de grupos de botones en barras de herramientas de botones para obtener componentes más complejos. Utilice las clases de servicios públicos 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. Al igual que en el 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, simplemente agréguelo .btn-group-* a cada uno .btn-group , incluso cada uno cuando anide 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 un .btn-group dentro de otro .btn-group cuando 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 aparezca apilado verticalmente en lugar de horizontalmente. Los menús desplegables de botones divididos no son compatibles aquí.


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