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 .stacked. Echemos un vistazo a cómo lograrlo. En un Flexbox de grupo de botones, los botones se colocan utilizando las clases de utilidad de Flexbox en Foundation CSS.
Clases de Flexbox del grupo de botones de Foundation CSS:
- align-center: esta clase proporciona la alineación central a todos los elementos secundarios dentro de este elemento.
- align-right: esta clase proporciona la alineación correcta a todos los elementos secundarios dentro del elemento.
- align-spaced: esta clase distribuye uniformemente el espacio entre cada columna con la primera y la última columna ancladas al borde.
- align-justify: esta clase distribuye uniformemente el espacio entre cada columna con la primera y la última columna que pueden no estar ancladas al borde.
Sintaxis del grupo de botones huecos y claros:
<div class="button-group Flexbox-Class"> <a class="button">...</a> .... </div>
Ejemplo 1: Este es un ejemplo básico que ilustra el grupo de botones huecos y claros usando Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Button Group Flexbox</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> </head> <body> <center> <h1 style="color: green;">GeeksforGeeks</h1> <strong>Foundation CSS Button Group Flexbox</strong> <div class="button-group"> <a class="secondary button hollow"> View </a> <a class="success button hollow"> Edit </a> <a class="warning button hollow"> Share </a> <a class="alert button hollow"> Delete </a> </div> <div class="button-group"> <a class="secondary button clear"> View </a> <a class="success button clear"> Edit </a> <a class="warning button clear"> Share </a> <a class="alert button clear"> Delete </a> </div> </center> <script> $(document).foundation(); </script> </body> </html>
Producción:
Flexbox del grupo de botones CSS de Foundation
Ejemplo 2: este es un ejemplo básico que ilustra el grupo de botones de ancho uniforme utilizando Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Button Group Flexbox</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> </head> <body> <center> <h1 style="color: green;">GeeksforGeeks</h1> <strong>Foundation CSS Button Group Flexbox</strong> <div class="expanded button-group"> <a class="button"> Expanded </a> <a class="button"> Button </a> <a class="button"> Group </a> </div> </center> <script> $(document).foundation(); </script> </body> </html>
Producción:
Flexbox del grupo de botones CSS de Foundation
Ejemplo 3: Este es un ejemplo básico que ilustra el grupo Flexbox Button utilizando Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Button Group Flexbox</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> </head> <body> <center> <h1 style="color: green;">GeeksforGeeks</h1> <strong>Foundation CSS Button Group Flexbox</strong> <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> </center> <script> $(document).foundation(); </script> </body> </html>
Producción:
Flexbox del grupo de botones CSS de Foundation
Referencia: https://get.foundation/sites/docs/button-group.html#flexbox-button-group
Publicación traducida automáticamente
Artículo escrito por tpraneeth2001 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA