¿Cómo creamos grandes grupos de botones en Bootstrap?

Posted on by Rudeus Greyrat

Bootstrap es una colección gratuita y de código abierto de código CSS y JavaScript/jQuery que se utiliza para crear diseños de sitios web dinámicos y aplicaciones web. Es uno de los marcos front-end más populares que tiene realmente un buen conjunto de códigos CSS predefinidos. Utiliza diferentes tipos de clases para hacer sitios web receptivos. Bootstrap 5 es el lanzamiento principal de Bootstrap que ha renovado el diseño de la interfaz de usuario y ha realizado varios cambios. el botónes la clase de componente crucial proporcionada por Bootstrap 5. Mediante el uso de varias clases de botones, ahora podemos diseñar un componente de botón muy receptivo y atractivo. Podemos agregar botones en una página web usando clases predefinidas. Bootstrap proporciona muchos tipos de botones y también admite varios botones personalizados. En este artículo, sabremos cómo crear el grupo de botones grande con la etiqueta usando la clase Bootstrap Buttons.

Sintaxis:

<button class="btn btn-className">Submit</button>

Grupo de botones: el grupo de botones es un componente proporcionado por Bootstrap 5 que básicamente le permite crear un grupo de botones en una serie. Todos los tipos de clases de botones también son compatibles con el grupo de botones. 

Tipos: Los siguientes son los 9 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

Para ver el uso detallado de los botones Bootstrap y otros componentes de botones, consulte los artículos Botones Bootstrap 5 y Botones Bootstrap con ejemplos .

Ahora comprendamos cómo usar la clase btn-group para agrupar la serie de botones en una sola línea, a través de los ejemplos.

Enfoque 1:

  • Use class btn-group y btn-group-lg dentro de una clase div.
  • Dentro de cada clase div, agregue elementos HTML <button> que deseen mostrar en la pantalla con el nombre de clase predefinido de Bootstrap Buttons.

Ejemplo 1: para crear un grupo de botones, debe definir una clase de grupo btn en la etiqueta del contenedor, como <div>.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
  
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,
        initial-scale=1, shrink-to-fit=no" />
  
    <!-- Bootstrap CSS -->
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
        rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous" />
  
    <title>GeeksforGeeks Bootstrap Button</title>
</head>
  
<body>
    <h1 class="text-success">
        GeeksforGeeks
    </h1>
      
    <h4 class="text-secondary">
        Bootstrap button group
    </h4>
  
    <div class="btn-group">
        <button type="button" class="btn btn-primary">
            Primary
        </button>
  
        <button type="button" class="btn btn-success">
            Success
        </button>
    </div>
</body>
  
</html>

Producción:

También creamos un grupo de botones del mismo tamaño al incluir la clase btn-group-* junto con la clase principal .btn-group , en lugar de incluir clases de tamaño en cada botón.

Hay varios tamaños de clases de grupo btn . Esos son los siguientes:

  • btn-group-sm: se utiliza para grupos de botones pequeños.
  • btn-group-md: Usado para grupos de botones medianos.
  • btn-group-lg: se utiliza para grupos de botones grandes.

Ejemplo 2: este ejemplo demuestra el uso de diferentes grupos de tamaños de grupos de botones en Bootstrap.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
  
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, 
        initial-scale=1, shrink-to-fit=no" />
  
    <!-- Bootstrap CSS -->
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
        rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous" />
  
    <title>GeeksforGeeks Bootstrap Button</title>
</head>
  
<body>
    <h1 class="text-success">
        GeeksforGeeks
    </h1>
      
    <h4 class="text-secondary">
        Bootstrap Button group sizing
    </h4>
  
    <div class="container">
        <div class="btn-group btn-group-lg">
            <button type="button" 
                class="btn btn-success">
                HTML
            </button>
        </div>
  
        <div class="btn-group btn-group-md">
            <button type="button" 
                class="btn btn-success">
                CSS
            </button>
        </div>
  
        <div class="btn-group btn-group-sm">
            <button type="button" 
                class="btn btn-success">
                JavaScript
            </button>
        </div>
    </div>
</body>
  
</html>

Producción:

Seguiremos los pasos a continuación para construir Bootstrap Large Buttons Group.

Enfoque 2:

Paso 1: Para usar las clases de componentes de Bootstrap, necesitamos descargar el paquete de Bootstrap o podemos usar el enlace CDN de Bootstrap directamente, desde la página oficial , dentro de la etiqueta <head>, como se muestra a continuación.

<enlace href=”https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css” rel=”stylesheet” integridad=”sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC” crossorigin=” anónimo”>

<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js” integridad=”sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM” crossorigin= ”anónimo”></script>

Paso 2: Declare la clase como un contenedor con valores como .btn-group-lg  en el <div> externo.

<div class="btn-group-lg">
    <button></button>
    <button></button>
</div>

Paso 3: Ahora, agregue diferentes clases de botones predefinidos a la etiqueta HTML interna <button> . Por ejemplo, .btn btn-success establecerá los estilos del botón como clase de éxito de arranque, es decir, botón verde, y así, también puede usar diferentes clases.

<div class="btn-group btn-group-lg">
    <!-- Here basic Bootstrap Button Declared -->
    <button type="button" class="btn btn-success">
        Success
    </button>
</div>

Utilizaremos los dos enfoques anteriores para crear grandes grupos de botones en Bootstrap. 

Grandes grupos de botones dispuestos horizontalmente en bootstrap: la clase .btn-group-lg junto con la clase principal .btn-group se utiliza para crear grandes grupos de botones dispuestos horizontalmente.

Ejemplo 3: En este ejemplo, hemos creado la serie horizontal del grupo de botones grandes en Bootstrap.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Bootstrap 5 Horizontal Large Buttons group
    </title>
  
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous" />
</head>
  
<body class="text-center">
    <div class="container mt-3">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
          
        <h1 class="text-dark">
            Horizontal Large Buttons Group
        </h1>
  
        <div class="btn-group btn-group-lg">
            <button type="button" 
                class="btn btn-primary">
                Btn 1
            </button>
  
            <button type="button" 
                class="btn btn-dark">
                Btn 2
            </button>
  
            <button type="button" 
                class="btn btn-warning">
                Btn 3
            </button>
        </div>
    </div>
</body>
  
</html>

Producción:

Grandes grupos de botones dispuestos verticalmente en bootstrap: la clase .btn-group-lg junto con la clase principal .btn-group-vertical se usa para crear grandes grupos de botones dispuestos horizontalmente.

Ejemplo 4: En este ejemplo, hemos creado una serie vertical de grupos de botones grandes en Bootstrap.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Bootstrap 5 Vertical Large Buttons group
    </title>
  
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" 
        crossorigin="anonymous" />
</head>
  
<body class="text-center">
    <div class="container mt-3">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
          
        <h1 class="text-dark">
            Vertical Large Buttons Group
        </h1>
  
        <div class="btn-group-vertical btn-group-lg">
            <button type="button" 
                class="btn btn-primary">
                Btn 1
            </button>
  
            <button type="button" 
                class="btn btn-dark">
                Btn 2
            </button>
  
            <button type="button" 
                class="btn btn-warning">
                Btn 3
            </button>
        </div>
    </div>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

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