Source

Grupo de botóns

Agrupa unha serie de botóns nunha soa liña co grupo de botóns e potencialos con JavaScript.

Exemplo básico

Envolve unha serie de botóns .btncon .btn-group. Engade a radio de JavaScript opcional e o comportamento do estilo de caixa de verificación co noso complemento de botóns .

<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 ser correcto rolee proporcionar unha etiqueta

Para que as tecnoloxías de asistencia (como os lectores de pantalla) transmitan que se agrupan unha serie de botóns, é rolenecesario proporcionar un atributo adecuado. Para os grupos de botóns, isto sería role="group", mentres que as barras de ferramentas deberían ter un role="toolbar".

Ademais, os grupos e as barras de ferramentas deben recibir unha etiqueta explícita, xa que a maioría das tecnoloxías de asistencia non os anunciarán, a pesar da presenza do atributo de rol correcto. Nos exemplos proporcionados aquí, usamos , pero tamén se poden usar aria-labelalternativas como .aria-labelledby

Barra de ferramentas de botóns

Combina conxuntos de grupos de botóns en barras de ferramentas de botóns para obter compoñentes máis complexos. Use as clases de utilidade segundo sexa necesario para espaciar grupos, botóns e moito máis.

<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>

Non dubides en mesturar grupos de entrada con grupos de botóns nas túas barras de ferramentas. Semellante ao exemplo anterior, é probable que necesites algunhas utilidades para espaciar as cousas 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>

Talla

En lugar de aplicar clases de tamaño dos botóns a cada botón dun grupo, só tes que engadir .btn-group-*a cada un .btn-group, incluído cada un cando anidan 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>

Aniñación

Coloque un .btn-groupdentro doutro .btn-groupcando quere menús despregables mesturados cunha serie de botóns.

<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

Fai que un conxunto de botóns aparezan apilados verticalmente en lugar de horizontal. Aquí non se admiten os menús despregables dos botóns divididos.

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