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.
Clase básica del grupo de botones:
- grupo de botones: esta clase se utiliza para crear un elemento de grupo de botones básico.
Sintaxis:
<div class="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 button-group para hacer el grupo de elementos de botón.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Button Group Basics</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 Basics</h3> <div class="button-group 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.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Button Group Basics</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 Basics</h3> <div class="button-group 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#basics