Arranque 4 | Grupos de botones

Posted on by Rudeus Greyrat

Bootstrap ofrece clases que permiten agrupar botones a lo largo de una misma línea, horizontal o verticalmente. Los botones a agrupar están anidados dentro de un elemento <div> con la clase .btn-group .

Grupos de botones dispuestos horizontalmente: la clase .btn-group se utiliza para crear grupos de botones dispuestos horizontalmente.

Ejemplo:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Button Groups</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.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <div class="container">
        <div class="btn-group">
            <button type="button" 
                class="btn btn-success">
                HTML
            </button>
            <button type="button" 
                class="btn btn-success">
                CSS
            </button>
            <button type="button" 
                class="btn btn-success">
                JavaScript
            </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:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Button Groups</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.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <div class="container">
        <div class="btn-group-vertical">
            <button type="button" 
                class="btn btn-success">
                HTML
            </button>
            <button type="button" 
                class="btn btn-success">
                CSS
            </button>
            <button type="button" 
                class="btn btn-success">
                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:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Button Groups</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.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <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-success">
                CSS
            </button>
            <button type="button" 
                class="btn btn-success">
                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-success">
                CSS
            </button>
            <button type="button" 
                class="btn btn-success">
                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-success">
                CSS
            </button>
            <button type="button" 
                class="btn btn-success">
                JavaScript
            </button>
        </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 los menús desplegables se pueden crear de esta manera.

  1. Menú desplegable de un solo botón:

    Ejemplo:

    html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Bootstrap Button Groups</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.3.1/css/bootstrap.min.css">
        <script src=
    "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
        </script>
        <script src=
    "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
        </script>
        <script src=
    "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
        </script>
    </head>
    <body>
        <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">
                    <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 href="#">React</a></li>
                        <li><a href="#">Vue</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
    </html>

    Producción:

  2. Desplegable del botón Dividir:

    Ejemplo:

    html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Bootstrap Button Groups</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.3.1/css/bootstrap.min.css">
        <script src=
    "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
        </script>
        <script src=
    "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
        </script>
        <script src=
    "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
        </script>
    </head>
    <body>
        <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">
                    <button type="button" 
                        class="btn btn-success">
                        JavaScript
                    </button>
                    <button type="button" 
                        class="btn btn-success dropdown-toggle" 
                        data-toggle="dropdown">
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">React</a></li>
                        <li><a href="#">Vue</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
    </html>

    Producción:

    Sin embargo, el menú desplegable del botón dividido no funciona como se esperaba cuando los botones están anidados en la clase .btn-group-vertical .

    Ejemplo:

    html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Bootstrap Button Groups</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.3.1/css/bootstrap.min.css">
        <script src=
    "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
        </script>
        <script src=
    "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
        </script>
        <script src=
    "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
        </script>
    </head>
    <body>
        <div class="container">
            <div class="btn-group-vertical">
                <button type="button" 
                    class="btn btn-success">
                    HTML
                </button>
                <button type="button" 
                    class="btn btn-success">
                    CSS
                </button>
                <div class="btn-group">
                    <button type="button" 
                        class="btn btn-success dropdown-toggle" 
                        data-toggle="dropdown">
                        JavaScript
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">React</a></li>
                        <li><a href="#">Vue</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
    </html>

    Producción:

Navegador compatible:

  • Google Chrome
  • explorador de Internet
  • Firefox
  • Ópera
  • Safari
     

Publicación traducida automáticamente

Artículo escrito por AasthaBist 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 *