Botón: Las clases .btn se usan con el elemento <button> para crear el botón básico usando Bootstrap. Los botones en bootstrap se usan en formularios, diálogos, etc.
Grupos de botones en Bootstrap: en Bootstrap, los grupos de botones tienen un grupo de botones juntos en una sola línea. El grupo de botones se crea usando la clase .btn-group .
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"> </script> </head> <body> <center> <div class="container"> <h1 style="color:green;"> GeeksForGeeks </h1> <h2>Button Group</h2> <div class="btn-group"> <button type="button" class="btn btn-primary"> login </button> <button type="button" class="btn btn-primary"> signup </button> <button type="button" class="btn btn-primary"> signin </button> </div> </div> </center> </body> </html>
Producción:
En el ejemplo anterior, el grupo de botones se crea como único, ya que hay 3 botones de inicio de sesión, registro e inicio de sesión dispuestos en una sola línea. Estos botones se crean usando la clase btn-group.
Grupos de botones verticales: en Bootstrap, los grupos de botones verticales se organizan en orden vertical. Estos grupos de botones verticales se crean utilizando la clase .btn-group-vertical.
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/3.4.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"> </script> </head> <body> <center> <h1 style="color:green">GeeksForGeeks</h1> <div class="container"> <h2>Vertical Button Group</h2> <div class="btn-group-vertical"> <button type="button" class="btn btn-primary"> Login </button> <button type="button" class="btn btn-primary"> Signup </button> <button type="button" class="btn btn-primary"> Signin </button> </div> </div> </center> </body> </html>
Producción:
En el ejemplo anterior, se crea un grupo de botones verticales. Hay 3 botones de inicio de sesión, registro e inicio de sesión dispuestos en orden vertical usando la clase btn-group-vertical.
Grupo de botones justificados: en Bootstrap, los grupos de botones justificados se organizan con el ancho de la pantalla, los botones se justifican con el ancho. El grupo de botones justificado se crea usando la clase .btn-group-justified.
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/3.4.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"> </script> </head> <body> <center> <h1 style="color:green"> GeeksForGeeks </h1> <div class="container"> <h2>Justified Button Groups</h2> <div class="btn-group btn-group-justified"> <a href="#" class="btn btn-primary"> Login </a> <a href="#" class="btn btn-primary"> Signup </a> <a href="#" class="btn btn-primary"> Signin </a> </div> </div> </center> </body> </html>
Producción:
En el ejemplo anterior, se crean grupos de botones justificados. Hay 3 botones de inicio de sesión, registro e inicio de sesión organizados en orden justificado, es decir, los botones están justificados con el ancho de la pantalla. Este grupo de botones justificados se crea utilizando la clase btn-group-justified.
Publicación traducida automáticamente
Artículo escrito por attardeurjita77 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA