Bootstrap 5 | Grupo de botones

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 -->
        <link rel="stylesheet" 
              href=
            integrity=
    "sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" 
             crossorigin="anonymous">
      
    </head>
      
    <body>
        <div style="text-align: center;
               width: 600px; margin-top:100px;">
            <h1 style="color: green;">
                GeeksforGeeks
            </h1>
        </div>
        <div style="width: 600px;height: 200px;
             margin:20px;text-align: center;">
            <div class="btn-group">
                <button type="button" class="btn btn-primary">
                              Primary</button>
                <button type="button" class="btn btn-secondary">
                              Secondary</button>
                <button type="button" class="btn btn-success">
                              Success</button>
                <button type="button" class="btn btn-danger">
                              Danger</button>
            </div>
            <div class="btn-group" style="margin-top: 10px;">
                <button type="button" class="btn btn-warning">
                         Warning</button>
                <button type="button" class="btn btn-info">
                         Info</button>
                <button type="button" class="btn btn-light">
                        Light</button>
                <button type="button" class="btn btn-dark">
                        Dark</button>
                <button type="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 -->
        <link rel="stylesheet" 
              href=
            integrity=
    "sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" 
            crossorigin="anonymous">
    </head>
      
    <body style="text-align:center;">
        <div class="container mt-3">
      
            <h1 style="color:green;">
                GeeksforGeeks
            </h1>
      
            <div class="btn-group-vertical">
                <button type="button" 
                        class="btn btn-success">
                    HTML
                </button>
      
                <button type="button" 
                        class="btn btn-primary">
                    CSS
                </button>
      
                <button type="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 -->
        <link rel="stylesheet" 
              href=
            integrity=
    "sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
            crossorigin="anonymous">
      
    </head>
      
    <body style="text-align:center;">
        <div class="container mt-3">
      
            <h1 style="color:green;">
                GeeksforGeeks
            </h1>
      
            <div class="container">
                <div class="btn-group btn-group-lg">
                    <button type="button" 
                            class="btn btn-success">
                        HTML
                    </button>
      
                    <button type="button" class="btn btn-dark">
                        CSS
                    </button>
      
                    <button type="button"
                            class="btn btn-secondary">
                        JavaScript
                    </button>
                </div>
      
                <br><br>
      
                <div class="btn-group btn-group-md">
                    <button type="button" 
                            class="btn btn-success">
                        HTML
                    </button>
      
                    <button type="button" 
                            class="btn btn-dark">
                        CSS
                    </button>
      
                    <button type="button" 
                            class="btn btn-secondary">
                        JavaScript
                    </button>
                </div>
      
                <br><br>
      
                <div class="btn-group btn-group-sm">
                    <button type="button" 
                            class="btn btn-success">
                        HTML
                    </button>
      
                    <button type="button" 
                            class="btn btn-dark">
                        CSS
                    </button>
      
                    <button type="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 -->
        <link rel="stylesheet" 
              href=
            integrity=
    "sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" 
            crossorigin="anonymous">
        <script src=
            integrity=
    "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
            crossorigin="anonymous">
        </script>
        <script src=
            integrity=
    "sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
            crossorigin="anonymous">
      </script>
    </head>
      
    <body style="text-align:center;">
        <div class="container mt-3">
      
            <h1 style="color:green;">
                GeeksforGeeks
            </h1>
      
            <div class="container">
                <div class="btn-group">
                    <button type="button" 
                            class="btn btn-success">
                        HTML
                    </button>
      
                    <button type="button"
                            class="btn btn-success btn-group">
                        CSS
                    </button>
      
                    <div class="btn-group">
                        <div class="dropdown">
                            <button type="button" 
    class="btn btn-success dropdown-toggle" data-toggle="dropdown">
                                JavaScript<span class="caret"></span>
                         </button>
      
                         <ul class="dropdown-menu" role="menu">
                           <li><a class="dropdown-item" href="#">React</a></li>
                           <li><a class="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 -->
        <link rel="stylesheet"
              href=
            integrity=
    "sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" 
            crossorigin="anonymous">
      
        <script src=
            integrity=
    "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
            crossorigin="anonymous">
        </script>
        <script src=
            integrity=
    "sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
            crossorigin="anonymous">
       </script>
    </head>
      
    <body style="text-align:center;">
        <div class="container mt-3">
      
            <h1 style="color:green;">
                GeeksforGeeks
            </h1>
      
            <div class="container">
                <div class="btn-group">
                    <button type="button"
                            class="btn btn-success">
                        HTML
                    </button>
      
                    <button type="button"
                            class="btn btn-primary btn-group">
                        CSS
                    </button>
      
                    <div class="btn-group">
                        <button type="button" 
                                class="btn btn-secondary">
                            JavaScript
                        </button>
                        <button type="button" 
                           class="btn btn-dark dropdown-toggle"
                           data-toggle="dropdown">
                            <span class="caret"></span>
                        </button>
      
                        <ul class="dropdown-menu" role="menu">
                            <li>
                              <a class="dropdown-item" href="#">
                                    React</a></li>
                            <li><a class="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 -->
        <link rel="stylesheet" 
              href=
             integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" 
             crossorigin="anonymous">
        <script src=
            integrity=
    "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
            crossorigin="anonymous">
         </script>
        <script src=
            integrity=
    "sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
            crossorigin="anonymous">
        </script>
    </head>
      
    <body style="text-align:center;">
        <div class="container mt-3">
      
            <h1 style="color:green;">
                GeeksforGeeks
            </h1>
      
            <div class="container">
                <div class="btn-group-vertical">
                  <button type="button" class="btn btn-info">
                        HTML
                  </button>
      
                    <button type="button" 
                           class="btn btn-danger">
                        CSS
                    </button>
      
                    <div class="btn-group">
                        <button type="button" 
    class="btn btn-secondary dropdown-toggle" 
                            data-toggle="dropdown">
                            JavaScript
                        </button>
      
                        <ul class="dropdown-menu" role="menu">
                            <li><a class="dropdown-item" href="#">
                                    React</a></li>
                            <li><a class="dropdown-item" href="#">
                                    Vue</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </body>
      
    </html>

    Producción:

Publicación traducida automáticamente

Artículo escrito por gurrrung y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *