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 sitios web, aplicaciones y correos electrónicos receptivos sorprendentes que parecen increíbles y pueden ser accesibles para cualquier dispositivo. Es utilizado por muchos grupos, incluidos Facebook, eBay, Mozilla, Adobe e incluso Disney. El marco está construido sobre un sistema de arranque similar a Saas. Es más sofisticado, flexible y fácilmente personalizable. Además, viene con CLI, por lo que es fácil de aplicar con paquetes de módulos. Proporciona la herramienta Fastclick.js para una renderización más rápida en dispositivos móviles.
Las insignias se utilizan para crear etiquetas con números que muestran una cantidad de elementos no leídos y también ayudan a hacer coincidir el tamaño de los elementos principales inmediatos con tamaños de fuente relativos. Foundation CSS generalmente usa .badgeclass con el elemento <span> para crear insignias.
Sintaxis:
<span class="badge"> Contents </span>
Ejemplo: Este ejemplo demuestra la insignia básica creada con Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Badge</title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"> <!-- Compressed JavaScript --> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" crossorigin="anonymous"> </script> </head> <body> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <strong>Foundation CSS Badge</strong> <br/> <span class="badge">1</span> <span class="badge">Hello</span> <span class="badge">GeeksforGeeks</span> </center> </body> </html>
Producción:
Insignia CSS de la Fundación
Personalización del color: para personalizar el color de las insignias, podemos usar las clases de color proporcionadas por Foundation CSS junto con las clases de insignias.
Sintaxis:
<span class="badge color-class"> Content </span>
Los siguientes son los 5 tipos de clases de color disponibles en Foundation CSS:
- primario: Se utiliza para resaltar la información con un color azul cielo al texto, que marca como importante.
- secundario: Resalta el texto con un color grisáceo que marca el texto menos importante.
- éxito: Resalta el texto con un color verde que representa la finalización de alguna acción.
- alerta: Resalta el texto con un color rojo que representa la acción incompleta con peligro.
- advertencia: Resalta el texto con una que representa alguna acción de advertencia.
Ejemplo: Este ejemplo muestra la insignia básica con las diversas clases de color disponibles en Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Color Badge</title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"> <!-- Compressed JavaScript --> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" crossorigin="anonymous"> </script> </head> <body> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <strong>Foundation CSS Badge</strong> <br/> <span class="badge primary">Primary</span> <span class="badge secondary">Secondary</span> <span class="badge success">Success</span> <span class="badge alert">Alert</span> <span class="badge warning">Warning</span> </center> </body> </html>
Producción:
Insignia de color CSS de la fundación
Referencia: https://get.foundation/sites/docs/badge.html
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA