Bootstrap - Grupos de botones

Los grupos de botones permiten apilar varios botones en una sola línea. Esto es útil cuando desea colocar elementos como botones de alineación juntos. Puede agregar un comportamiento de estilo de casilla de verificación y radio de JavaScript opcional con el complemento de botón Bootstrap .

La siguiente tabla resume las clases importantes que Bootstrap proporciona para usar grupos de botones:

Clase	Descripción	Muestra de código
.btn-group	Esta clase se utiliza para un grupo de botones básico. Envuelva una serie de botones con clase.btn en .btn-group.	`<div class = "btn-group"> <button type = "button" class = "btn btn-default">Button1</button> <button type = "button" class = "btn btn-default">Button2</button> </div>`
.btn-barra de herramientas	Esto ayuda a combinar conjuntos de <div class = "btn-group"> en una <div class = "btn-toolbar"> para componentes más complejos.	`<div class = "btn-toolbar" role = "toolbar"> <div class = "btn-group">...</div> <div class = "btn-group">...</div> </div>`
.btn-grupo-lg, .btn-grupo-sm, .btn-grupo-xs	Estas clases se pueden aplicar al grupo de botones en lugar de cambiar el tamaño de cada botón.	`<div class = "btn-group btn-group-lg">...</div> <div class = "btn-group btn-group-sm">...</div> <div class = "btn-group btn-group-xs">...</div>`
.btn-group-vertical	Esta clase hace que un conjunto de botones aparezca apilado verticalmente en lugar de horizontalmente.	`<div class = "btn-group-vertical"> ... </div>`

Grupo de botones básico

El siguiente ejemplo demuestra el uso de class .btn-group discutido en la tabla anterior -

<div class = "btn-group">
   
   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>
   <button type = "button" class = "btn btn-default">Button 3</button>
   
</div>

Barra de herramientas de botones

El siguiente ejemplo demuestra el uso de class .btn-toolbar discutido en la tabla anterior -

<div class = "btn-toolbar" role = "toolbar">
   
   <div class = "btn-group">
      <button type = "button" class = "btn btn-default">Button 1</button>
      <button type = "button" class = "btn btn-default">Button 2</button>
      <button type = "button" class = "btn btn-default">Button 3</button>
   </div>
   
   <div class = "btn-group">
      <button type = "button" class = "btn btn-default">Button 4</button>
      <button type = "button" class = "btn btn-default">Button 5</button>
      <button type = "button" class = "btn btn-default">Button 6</button>
   </div>
   
   <div class = "btn-group">
      <button type = "button" class = "btn btn-default">Button 7</button>
      <button type = "button" class = "btn btn-default">Button 8</button>
      <button type = "button" class = "btn btn-default">Button 9</button>
   </div>
   
</div>

Tamaño del botón

El siguiente ejemplo demuestra el uso de class .btn-group-* discutido en la tabla anterior -

<div class = "btn-group btn-group-lg">
   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>
   <button type = "button" class = "btn btn-default">Button 3</button>
</div>

<div class = "btn-group btn-group-sm">
   <button type = "button" class = "btn btn-default">Button 4</button>
   <button type = "button" class = "btn btn-default">Button 5</button>
   <button type = "button" class = "btn btn-default">Button 6</button>
</div>

<div class = "btn-group btn-group-xs">
   <button type = "button" class = "btn btn-default">Button 7</button>
   <button type = "button" class = "btn btn-default">Button 8</button>
   <button type = "button" class = "btn btn-default">Button 9</button>
</div>

Anidamiento

Puede anidar grupos de botones dentro de otro grupo de botones, es decir, colocar un .btn-group dentro de otro .btn-group . Esto se hace cuando desea que los menús desplegables se mezclen con una serie de botones.

<div class = "btn-group">
   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>
   
   <div class = "btn-group">
      <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
         Dropdown
         <span class = "caret"></span>
      </button>
      
      <ul class = "dropdown-menu">
         <li><a href = "#">Dropdown link 1</a></li>
         <li><a href = "#">Dropdown link 2</a></li>
      </ul>
   </div>
  
</div>

Buttongroup vertical

El siguiente ejemplo demuestra el uso de class .btn-group-vertical discutido en la tabla anterior -

<div class = "btn-group-vertical">
   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>
   
   <div class = "btn-group-vertical">
      <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
         Dropdown
         <span class = "caret"></span>
      </button>
      
      <ul class = "dropdown-menu">
         <li><a href = "#">Dropdown link 1</a></li>
         <li><a href = "#">Dropdown link 2</a></li>
      </ul>
   </div>
  
</div>

↰ Previous page Next page ↱