Grupo de botones CSS básicos

Posted on by Rudeus Greyrat

Foundation CSS es un marco front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que facilita el diseño de hermosos sitios web, aplicaciones y correos electrónicos receptivos que se ven increíbles y pueden ser accesibles para cualquier dispositivo. Es utilizado por muchas empresas como Facebook, eBay, Mozilla, Adobe e incluso Disney. El marco se basa en un arranque similar a SaaS. Es más sofisticado, flexible y fácilmente personalizable. También viene con CLI, por lo que es fácil de usar con paquetes de módulos. Ofrece la herramienta Fastclick.js para una renderización más rápida en dispositivos móviles.

Foundation CSS nos ofrece un Grupo de Botones donde se pueden agrupar botones de idéntica naturaleza. Foundation CSS permite que los botones en el grupo de botones se apilen verticalmente usando la clase apilada . Echemos un vistazo a cómo lograrlo.

Grupo de botones CSS básicos:

  • Básicos : esto crea un grupo de botones básico en Foundation CSS.
  • Dimensionamiento : Esto se utiliza para crear diferentes tamaños de botones. Los diferentes tamaños de grupos de botones son diminutos, pequeños y grandes.
  • Coloreado : Esto se usa para dar colores a los botones.
  • Hueco y claro : Esto se usa para dar estilos huecos y claros a los botones. 
  • Sin espacios : esto se usa para eliminar el espacio de 1 px entre los botones en el grupo de botones.
  • Grupo de ancho uniforme : se usa para crear un contenedor de grupo de botones de ancho completo. 
  • Apilamiento : Esto apila los botones en el grupo de botones verticalmente.
  • Botones divididos : Esto permite que los botones en el grupo de botones se dividan donde cada botón se separa con un borde consistente.
  • Grupo de botones de Flexbox : los botones se colocan utilizando las clases de utilidad de Flexbox en Foundation CSS.

Sintaxis:

<div class="button-group button-group-class">
   ....
</div>

Nota: Utilice la sintaxis anterior según la necesidad mediante una combinación de las clases mencionadas anteriormente. Consulte los ejemplos a continuación para una mejor comprensión de las clases.

Ejemplo 1: este es un ejemplo básico que ilustra el grupo de botones de tamaño básico creado con Foundation CSS.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Foundation CSS Button Group</title>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
    <link rel="stylesheet" href=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" />
    <!-- Compressed JavaScript -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js">
    </script>
    <style>
        body {
            margin-left: 10px;
            margin-right: 10px;
        }
    </style>
</head>
 
<body>
    <h1 style="color:green;">GeeksforGeeks</h1>
    <strong>Foundation CSS Button Group Basics</strong>
 
    <div class="button-group">
        <a class="button">Button Group Basics-1</a>
        <a class="button">Button Group Basics-2</a>
        <a class="button">Button Group Basics-3</a>
    </div>
    <b>Button Group Sizing</b>
    <div class="button-group tiny">
        <a class="button">Button Group Sizing-1</a>
    </div>
    <div class="button-group small">
        <a class="button">Button Group Sizing-2</a>
    </div>
    <div class="button-group large">
        <a class="button">Button Group Sizing-3</a>
    </div>
 
    <script>
        $(document).foundation();
    </script>
</body>
 
</html>

Producción:

 

Ejemplo 2: Este es un ejemplo básico que ilustra un grupo de botones coloreado , hueco y claro, y sin espacios creado con Foundation CSS.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Foundation CSS Button Group</title>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
    <link rel="stylesheet" href=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" />
    <!-- Compressed JavaScript -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js">
    </script>
    <style>
        body {
            margin-left: 10px;
            margin-right: 10px;
        }
    </style>
</head>
 
<body>
    <h1 style="color:green;">GeeksforGeeks</h1>
    <strong> Foundation CSS Button Group</strong>
 
    <b>Button Group Coloring</b>
    <div class="button-group">
        <a class="secondary button">Button Group Coloring-1</a>
        <a class="success button">Button Group Coloring-2</a>
        <a class="warning button">Button Group Coloring-3</a>
        <a class="alert button">Button Group Coloring-4</a>
    </div>
    <b>Button Group Hollow and Clear</b>
    <div class="button-group">
        <a class="secondary button hollow">Button Group Hollow</a>
        <a class="success button hollow">Button Group Hollow</a>
        <a class="warning button clear">Button Group Clear</a>
        <a class="alert button clear">Button Group Clear</a>
    </div>
    <b>Button Group No Gaps</b>
    <div class="primary button-group no-gaps">
        <a class="button">No Gaps-1</a>
        <a class="button">No Gaps-2</a>
        <a class="button">No Gaps-3</a>
        <a class="button">No Gaps-4</a>
    </div>
    <script>
        $(document).foundation();
    </script>
</body>
 
</html>

Producción:

 

Ejemplo 3: este es un ejemplo básico que ilustra el grupo de botones de ancho uniforme, apilamiento y división creado con Foundation CSS.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Foundation CSS Button Group</title>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
    <link rel="stylesheet" href=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" />
    <!-- Compressed JavaScript -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js">
    </script>
    <style>
        body {
            margin-left: 10px;
            margin-right: 10px;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green;">GeeksforGeeks</h1>
    <strong> Foundation CSS Button Group</strong>
 
    <b>Button Group Even Width</b>
    <div class="expanded button-group">
        <a class="button">EvenWidth-1</a>
        <a class="button">EvenWidth-2</a>
        <a class="button">EvenWidth-3</a>
    </div>
    <b>Button Group Stacking</b>
    <div class="stacked-for-small button-group">
        <a class="button">One</a>
        <a class="button">Two</a>
        <a class="button">Three</a>
        <a class="button">Four</a>
        <a class="button">Five</a>
    </div>
    <b>Button Group Split Buttons</b>
    <div class="button-group">
        <a class="button">Primary Action</a>
        <a class="dropdown button arrow-only"></a>
    </div>
    <script>
        $(document).foundation();
    </script>
</body>
 
</html>

Producción:

 

Ejemplo 4: Este es un ejemplo básico que ilustra el grupo de botones Flexbox creado con Foundation CSS.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Foundation CSS Button Group</title>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
    <link rel="stylesheet" href=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" />
    <!-- Compressed JavaScript -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js">
    </script>
    <style>
        body {
            margin-left: 10px;
            margin-right: 10px;
        }
    </style>
</head>
 
<body>
    <h1 style="color:green;">GeeksforGeeks</h1>
    <strong> Foundation CSS Button Group</strong>
 
    <b>Flexbox Button Group</b>
    <div class="button-group align-center">
        <a class="button">Center</a>
        <a class="button">Center</a>
        <a class="button">Center</a>
    </div>
 
    <div class="button-group align-right">
        <a class="button">Right</a>
        <a class="button">Right</a>
        <a class="button">Right</a>
    </div>
 
    <div class="button-group align-spaced">
        <a class="button">Spaced</a>
        <a class="button">Spaced</a>
        <a class="button">Spaced</a>
    </div>
 
    <div class="button-group align-justify">
        <a class="button">Justify</a>
        <a class="button">Justify</a>
        <a class="button">Justify</a>
    </div>
    <script>
        $(document).foundation();
    </script>
</body>
 
</html>

Producción:

 

Referencia: https://get.foundation/sites/docs/button-group.html

Publicación traducida automáticamente

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