TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

¿Cómo crear un grupo de botones Bootstrap 5?

1

El grupo de botones, como su nombre lo indica, es simplemente un grupo de botones alineados para mostrarlos como un solo elemento. En nuestro tutorial de botones anterior, hemos explicado cómo crear botones con casillas de verificación y botones de radio utilizando el concepto de grupo de botones. En este tutorial, expliquemos diferentes tipos de grupos de botones con ejemplos en Bootstrap 5.

Tutorial de grupo de botones de Bootstrap 5

Este tutorial cubre los siguientes capítulos:

  1. Crear grupo de botones horizontales
  2. Barra de herramientas del grupo de botones
  3. Dimensionamiento de grupos de botones
  4. Grupo de botones anidado con menú desplegable
  5. Grupo de botones verticales
  6. Grupo de botones verticales anidados

1 grupo de botones horizontales

El grupo de botones horizontal es la forma simple de agrupar dos o más botones. Creemos un grupo de botones de cuatro botones usando la clase ".btn-group" con una etiqueta div. Cada botón usa una clase contextual diferente para mostrarlo en diferentes colores.

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 5 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap 5 CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <!-- Start of Button Group --> <div class="btn-group" role="group" aria-label="Horizontal Button Group"> <button type="button" class="btn btn-primary">Button 1 </button> <button type="button" class="btn btn-warning">Button 2</button> <button type="button" class="btn btn-danger">Button 3</button> <button type="button" class="btn btn-info">Button 4</button> </div> <!-- End of Button Group --> <!-- Bootstrap 5 Scripts --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> </body> </html>

El "rol" y la "etiqueta de aria" son opcionales y se utilizan principalmente desde el punto de vista de la accesibilidad en los lectores de pantalla.

Esto producirá el siguiente resultado en el navegador.

¿Cómo crear un grupo de botones Bootstrap 5?

El código anterior es un código de plantilla completo que utiliza CDN CSS y enlaces de script. Simplemente puede reemplazar el bloque entre el inicio y el final del grupo de botones con el código que se proporciona en los ejemplos a continuación para crear y probar diferentes estilos de grupos de botones.

Barra de herramientas de grupo de 2 botones

La opción de agrupación le permite tener una distribución similar a la de la barra de herramientas agregando el atributo add role = "toolbar”. También puede utilizar el grupo de botones junto con los grupos de entrada para crear barras de herramientas con entrada de texto. El código de muestra se proporciona a continuación:

<div class="btn-toolbar" role="toolbar" aria-label="Button Group Toolbar"> <div class="btn-group" role="group" aria-label="Button Group"> <button type="button" class="btn btn-primary">A</button> <button type="button" class="btn btn-warning">B</button> <button type="button" class="btn btn-info">C</button> <button type="button" class="btn btn-success">D</button> </div> <div class="input-group"> <span class="input-group-addon" id="id1">@</span> <input type="text" class="form-control" placeholder="This is input group box" aria-describedby="id1"> </div> </div>

Producirá el siguiente resultado en el navegador:

¿Cómo crear un grupo de botones Bootstrap 5?

Como puede ver, los elementos del grupo de botones y del grupo de entrada no tienen ningún espacio. Debe usar CSS personalizado para agregar margen entre estos dos elementos para alinearlos correctamente.

3 tamaños diferentes de grupos de botones

Bootstrap 5 le permite tener tres clases de tamaño para grande (btn-group-lg), predeterminado y pequeño (btn-group-sm). Puede agregar directamente una clase grande o pequeña a la clase ".btn-group" para cambiar el tamaño.

<!-- Start of Large Button Group Size --> <div class="btn-group btn-group-lg" role="group" aria-label="Large Button Group"> <button type="button" class="btn btn-primary">Large Button 1</button> <button type="button" class="btn btn-warning">Large Button 2</button> <button type="button" class="btn btn-danger">Large Button 3</button> </div> <!-- Start of Default Button Group Size --> <div class="btn-group" role="group" aria-label="Default Button Group"> <button type="button" class="btn btn-primary">Default Button 1</button> <button type="button" class="btn btn-warning">Default Button 2</button> <button type="button" class="btn btn-danger">Default Button 3</button> </div> <!-- Start of Small Button Group Size --> <div class="btn-group btn-group-sm" role="group" aria-label="Small Button Group"> <button type="button" class="btn btn-primary">Small Button 1</button> <button type="button" class="btn btn-warning">Small Button 2</button> <button type="button" class="btn btn-danger">Small Button 3</button> </div>

El código anterior producirá los resultados como se muestra a continuación:

¿Cómo crear un grupo de botones Bootstrap 5?

4 Creación de grupos de botones anidados con menú desplegable

Los grupos de botones anidados son fáciles de crear colocando la clase ".btn-group" dentro de otra clase ".btn-group". De esta manera puede mostrar algunos botones y luego un menú desplegable con enlaces adicionales.

<div class="btn-group" role="group" aria-label="Nested Button Group"> <button type="button" class="btn btn-primary">Button 1</button> <button type="button" class="btn btn-info">Button 2</button> <div class="btn-group" role="group"> <button id="nested1" type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown 1 </button> <div class="dropdown-menu" aria-labelledby="nested1"> <a class="dropdown-item text-danger" href="#">Dropdown Link 1</a> <div class="dropdown-divider"></div> <a class="dropdown-item text-info" href="#">Dropdown Link 2</a> </div> </div> </div>

El resultado debería verse como a continuación:

¿Cómo crear un grupo de botones Bootstrap 5?

5 grupos de botones verticales

Los botones se pueden agrupar verticalmente usando la clase ".vertical" junto con la clase ".btn-group".

<div class="btn-group-vertical"> <button type="button" class="btn btn-primary">Button 1 </button> <button type="button" class="btn btn-warning">Button 2</button> <button type="button" class="btn btn-danger">Button 3</button> </div>

El resultado del código debería producir el siguiente grupo de botones:

¿Cómo crear un grupo de botones Bootstrap 5?

6 Grupo de botones verticales anidados

De manera similar al anidamiento horizontal, los grupos de botones verticales también se pueden anidar con el menú desplegable.

<div class="btn-group-vertical" role="group" aria-label="Nested Button Group"> <button type="button" class="btn btn-primary">Button 1</button> <button type="button" class="btn btn-secondary">Button 2</button> <div class="btn-group" role="group"> <button id="nested2" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown 1 </button> <div class="dropdown-menu" aria-labelledby="nested2"> <a class="dropdown-item text-danger" href="#">Dropdown Link 1</a> <div class="dropdown-divider"></div> <a class="dropdown-item text-danger" href="#">Dropdown Link 2</a> </div> </div> </div>

A continuación se muestra cómo se verá el resultado:

¿Cómo crear un grupo de botones Bootstrap 5?

Tenga en cuenta que los botones de división no son compatibles con el anidamiento vertical.


Aprenda Bootstrap 5 (índice )


Fuente de grabación: webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More