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.
Los botones son uno de los elementos de interfaz de usuario más comunes. Para crear el botón, usaremos la clase de botón y usaremos la clase de grupo de botones en el contenedor para crear el elemento de grupo de botones. La opción Tamaño de grupo de botones se utiliza para crear diferentes tamaños de botones. Los diferentes tamaños de grupos de botones son diminutos, pequeños y grandes.
Clases de tamaño de grupos de botones:
- tiny: esta clase se utiliza para crear un grupo de botones de tamaño minúsculo.
- pequeño: esta clase se utiliza para crear un pequeño grupo de botones.
- grande: esta clase se utiliza para crear un grupo de botones grande.
Sintaxis:
<div class="Group-Sizing-Classes button-group"> <a class="button">....</a> .... </div>
Ejemplo 1: En este ejemplo, usaremos la etiqueta <a> y la clase de botón para hacer un botón y usaremos la clase de grupo de botones para hacer el grupo de elementos de botón. Además, use clases tiny , small y large para crear diferentes tamaños de grupos de botones.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Button Group Sizing</title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"> </head> <body> <center> <h1 style="color:green;"> GeeksforGeeks </h1> <h3>Foundation CSS Button Group Sizing</h3> <div class="button-group tiny align-center"> <a class="button" href="#"> GeeksforGeeks </a> <a class="button" href="#"> Web Technology </a> <a class="button" href="#"> HTML </a> <a class="button" href="#"> CSS </a> <a class="button" href="#"> JavaScript </a> </div> <div class="button-group small align-center"> <a class="button" href="#"> GeeksforGeeks </a> <a class="button" href="#"> Web Technology </a> <a class="button" href="#"> HTML </a> <a class="button" href="#"> CSS </a> <a class="button" href="#"> JavaScript </a> </div> <div class="button-group large align-center"> <a class="button" href="#"> GeeksforGeeks </a> <a class="button" href="#"> Web Technology </a> <a class="button" href="#"> HTML </a> <a class="button" href="#"> CSS </a> <a class="button" href="#"> JavaScript </a> </div> </center> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, usaremos la etiqueta <button> y la clase de botón para hacer un botón y usaremos button-group para hacer el grupo de elementos de botón. Además, use clases tiny , small y large para crear diferentes tamaños de grupos de botones.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Button Group Sizing</title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"> </head> <body> <center> <h1 style="color:green;"> GeeksforGeeks </h1> <h3>Foundation CSS Button Group Sizing</h3> <div class="button-group tiny align-center"> <button type="button" class="button"> GeeksforGeeks </button> <button type="button" class="button"> Web Technology </button> <button type="button" class="button"> HTML </button> <button type="button" class="button"> CSS </button> <button type="button" class="button"> JavaScript </button> </div> <div class="button-group small align-center"> <button type="button" class="button"> GeeksforGeeks </button> <button type="button" class="button"> Web Technology </button> <button type="button" class="button"> HTML </button> <button type="button" class="button"> CSS </button> <button type="button" class="button"> JavaScript </button> </div> <div class="button-group large align-center"> <button type="button" class="button"> GeeksforGeeks </button> <button type="button" class="button"> Web Technology </button> <button type="button" class="button"> HTML </button> <button type="button" class="button"> CSS </button> <button type="button" class="button"> JavaScript </button> </div> </center> </body> </html>
Producción:
Enlace de referencia https://get.foundation/sites/docs/button-group.html#sizing