«Grupos de botones» en Bootstrap es una clase de nombre «btn-group» que se usa para crear series de botones en grupos (sin espacios) vertical u horizontalmente.
Esta es la sintaxis básica de la clase de grupo de botones donde cada botón tiene su propia clase de «btn».
<div class="btn-group">
<button type="button" class="btn">Click</button>
</div>
Los botones tienen un radio de borde predeterminado en el primer y último botón del grupo.
Agregar estilos en los botones: Bootstrap le permite agregar estilos a sus botones usando las siguientes clases:
- .btn-predeterminado
- .btn-primario
- .btn-éxito
- .btn-info
- .btn-advertencia
- .btn-peligro
- .btn-enlace
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"> </script> </head> <body> <div class="btn-group"> <button type="button" class="btn btn-danger">Click</button> <button type="button" class="btn btn-warning">Click</button> <button type="button" class="btn btn-success">Click</button> </div> </body> </html>
Producción:
Tamaño de sus botones: Bootstrap proporciona 4 tamaños de botones que puede agregar directamente a sus botones agregando una clase adicional de «btn-group-*» a su clase «btn-group». No es necesario agregar clases separadas a cada botón.
Los 4 tamaños se pueden utilizar de la siguiente manera:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"> </script> </head> <body> <div class="btn-group btn-group-lg"> <button type="button" class="btn btn-danger">Click</button> <button type="button" class="btn btn-warning">Click</button> <button type="button" class="btn btn-success">Click</button> </div> <div class="btn-group"> <button type="button" class="btn btn-danger">Click</button> <button type="button" class="btn btn-warning">Click</button> <button type="button" class="btn btn-success">Click</button> </div> <div class="btn-group btn-group-sm"> <button type="button" class="btn btn-danger">Click</button> <button type="button" class="btn btn-warning">Click</button> <button type="button" class="btn btn-success">Click</button> </div> <div class="btn-group btn-group-xs"> <button type="button" class="btn btn-danger">Click</button> <button type="button" class="btn btn-warning">Click</button> <button type="button" class="btn btn-success">Click</button> </div> </body> </html>
Producción:
Grupos de botones verticales: Bootstrap también admite grupos de botones verticales apilados de manera vertical en lugar de horizontal. Use la clase «btn-group-vertical» para crear un grupo de botones verticales:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"> </script> </head> <body> <div class="btn-group-vertical"> <button type="button" class="btn btn-danger">Click</button> <button type="button" class="btn btn-warning">Click</button> <button type="button" class="btn btn-success">Click</button> </div> </body> </html>
Producción:
Anidación de botones: Bootstrap le permite crear menús desplegables debajo de sus botones a través de la anidación. Agregue una clase de «btn-group» dentro de su clase principal de «btn-group» para tener un menú desplegable dentro de su botón:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"> </script> </head> <body> <div class="btn-group"> <button type="button" class="btn btn-danger">Click</button> <button type="button" class="btn btn-warning">Click</button> <div class="btn-group"> <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown </button> <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1"> <li><a class="dropdown-item" href="#">Item 1</a></li> <li><a class="dropdown-item" href="#">Item 2</a></li> </ul> </div> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por pihu24aru20pr y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA