Bootstrap 5 es el último lanzamiento importante de Bootstrap en el que renovaron la interfaz de usuario y realizaron varios cambios. El grupo de botones es un componente proporcionado por Bootstrap 5 que ayuda a combinar los botones en una serie en una sola línea. Todos los tipos de botones son compatibles con él.
Sintaxis:
<div class="btn-group"> Buttons... <div>
Tipos: Los siguientes son los nueve tipos de botones disponibles en Bootstrap 5:
- btn-primario
- btn-secundario
- btn-éxito
- btn-peligro
- btn-advertencia
- btn-info
- btn-luz
- btn-oscuro
- enlace btn
Grupos de botones dispuestos horizontalmente: la clase .btn-group se utiliza para crear grupos de botones dispuestos horizontalmente.
-
Ejemplo: este ejemplo muestra el funcionamiento del grupo de botones dispuestos horizontalmente en Bootstrap 5.
<!DOCTYPE html><html><head><title>Bootstrap 5 | Buttons group</title><!-- Load Bootstrap --><linkrel="stylesheet"href=integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"crossorigin="anonymous"></head><body><divstyle="text-align: center;width: 600px; margin-top:100px;"><h1style="color: green;">GeeksforGeeks</h1></div><divstyle="width: 600px;height: 200px;margin:20px;text-align: center;"><divclass="btn-group"><buttontype="button"class="btn btn-primary">Primary</button><buttontype="button"class="btn btn-secondary">Secondary</button><buttontype="button"class="btn btn-success">Success</button><buttontype="button"class="btn btn-danger">Danger</button></div><divclass="btn-group"style="margin-top: 10px;"><buttontype="button"class="btn btn-warning">Warning</button><buttontype="button"class="btn btn-info">Info</button><buttontype="button"class="btn btn-light">Light</button><buttontype="button"class="btn btn-dark">Dark</button><buttontype="button"class="btn btn-link">Link</button></div></div></body></html>Producción:
- Grupos de botones dispuestos verticalmente: la clase .btn-group-vertical se usa en el div principal para crear un grupo de botones verticales.
Ejemplo: este ejemplo muestra el funcionamiento del grupo de botones dispuestos verticalmente en Bootstrap 5.
<!DOCTYPE html><html><head><title>Bootstrap 5 | Buttons group</title><!-- Load Bootstrap --><linkrel="stylesheet"href=integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"crossorigin="anonymous"></head><bodystyle="text-align:center;"><divclass="container mt-3"><h1style="color:green;">GeeksforGeeks</h1><divclass="btn-group-vertical"><buttontype="button"class="btn btn-success">HTML</button><buttontype="button"class="btn btn-primary">CSS</button><buttontype="button"class="btn btn-danger">JavaScript</button></div></div></body></html>Producción:
- Tamaño del grupo de botones: todo el grupo de botones puede tener el mismo tamaño al incluir la clase btn-group-* (* podría ser sm, md o lg) en el elemento principal .btn-group, en lugar de incluir clases de tamaño en cada botón. .
Ejemplo: este ejemplo muestra el funcionamiento de los tamaños de los botones con el grupo de botones en Bootstrap 5.
<!DOCTYPE html><html><head><title>Bootstrap 5 | Buttons group</title><!-- Load Bootstrap --><linkrel="stylesheet"href=integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"crossorigin="anonymous"></head><bodystyle="text-align:center;"><divclass="container mt-3"><h1style="color:green;">GeeksforGeeks</h1><divclass="container"><divclass="btn-group btn-group-lg"><buttontype="button"class="btn btn-success">HTML</button><buttontype="button"class="btn btn-dark">CSS</button><buttontype="button"class="btn btn-secondary">JavaScript</button></div><br><br><divclass="btn-group btn-group-md"><buttontype="button"class="btn btn-success">HTML</button><buttontype="button"class="btn btn-dark">CSS</button><buttontype="button"class="btn btn-secondary">JavaScript</button></div><br><br><divclass="btn-group btn-group-sm"><buttontype="button"class="btn btn-success">HTML</button><buttontype="button"class="btn btn-dark">CSS</button><buttontype="button"class="btn btn-secondary">JavaScript</button></div></div></div></body></html>Producción:
- Anidar grupos de botones y hacer menús desplegables: un grupo de botones se puede anidar dentro de otro grupo de botones y se pueden crear menús desplegables de esta manera.
Menú desplegable de un solo botón:
Ejemplo:<!DOCTYPE html><html><head><title>Bootstrap 5 | Buttons group</title><!-- Load Bootstrap --><linkrel="stylesheet"href=integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"crossorigin="anonymous"><scriptsrc=integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"crossorigin="anonymous"></script><scriptsrc=integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"crossorigin="anonymous"></script></head><bodystyle="text-align:center;"><divclass="container mt-3"><h1style="color:green;">GeeksforGeeks</h1><divclass="container"><divclass="btn-group"><buttontype="button"class="btn btn-success">HTML</button><buttontype="button"class="btn btn-success btn-group">CSS</button><divclass="btn-group"><divclass="dropdown"><buttontype="button"class="btn btn-success dropdown-toggle"data-toggle="dropdown">JavaScript<spanclass="caret"></span></button><ulclass="dropdown-menu"role="menu"><li><aclass="dropdown-item"href="#">React</a></li><li><aclass="dropdown-item"href="#">Vue</a></li></ul></div></div></div></div></div></body></html>Producción:
- Desplegable del botón Dividir:
Ejemplo:<!DOCTYPE html><html><head><title>Bootstrap 5 | Buttons group</title><!-- Load Bootstrap --><linkrel="stylesheet"href=integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"crossorigin="anonymous"><scriptsrc=integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"crossorigin="anonymous"></script><scriptsrc=integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"crossorigin="anonymous"></script></head><bodystyle="text-align:center;"><divclass="container mt-3"><h1style="color:green;">GeeksforGeeks</h1><divclass="container"><divclass="btn-group"><buttontype="button"class="btn btn-success">HTML</button><buttontype="button"class="btn btn-primary btn-group">CSS</button><divclass="btn-group"><buttontype="button"class="btn btn-secondary">JavaScript</button><buttontype="button"class="btn btn-dark dropdown-toggle"data-toggle="dropdown"><spanclass="caret"></span></button><ulclass="dropdown-menu"role="menu"><li><aclass="dropdown-item"href="#">React</a></li><li><aclass="dropdown-item"href="#">Vue</a></li></ul></div></div></div></div></body></html>Producción:
- Bootstrap 5 también es compatible con Split Button Vertical Dropdown .
Ejemplo:<!DOCTYPE html><html><head><title>Bootstrap 5 | Buttons group</title><!-- Load Bootstrap --><linkrel="stylesheet"href=integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"crossorigin="anonymous"><scriptsrc=integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"crossorigin="anonymous"></script><scriptsrc=integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"crossorigin="anonymous"></script></head><bodystyle="text-align:center;"><divclass="container mt-3"><h1style="color:green;">GeeksforGeeks</h1><divclass="container"><divclass="btn-group-vertical"><buttontype="button"class="btn btn-info">HTML</button><buttontype="button"class="btn btn-danger">CSS</button><divclass="btn-group"><buttontype="button"class="btn btn-secondary dropdown-toggle"data-toggle="dropdown">JavaScript</button><ulclass="dropdown-menu"role="menu"><li><aclass="dropdown-item"href="#">React</a></li><li><aclass="dropdown-item"href="#">Vue</a></li></ul></div></div></div></div></body></html>Producción:
