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.
Las etiquetas son el título de un elemento en una interfaz de usuario, es decir, proporcionan los metadatos para el campo especificado. Se puede diseñar usando las clases CSS de Foundation particulares.
Etiqueta CSS básica:
- Conceptos básicos: en esto, le damos una clase de etiqueta a un elemento para crear una etiqueta Foundation CSS.
- Colorear: podemos agregar muchas clases de color a nuestra etiqueta para darle un significado adicional.
- Iconos: También podemos adjuntar iconos a nuestras etiquetas.
Sintaxis:
<span class="label coloring-class"> <i class="icons-class"></i> </span>
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 las etiquetas básicas creadas con Foundation CSS.
HTML
<!DOCTYPE html> <html> <head> <title>Foundation CSS Label</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"> </head> <body> <center> <h2 style="color:green;">GeeksforGeeks</h2> <h3>Foundation CSS Label</h3> <span class="label">Label 1</span> <span class="label">Label 2</span> <span class="label">Label 3</span> <span class="label">Label 4</span> </center> </body> </html>
Producción:
Ejemplo 2: Este es un ejemplo básico que ilustra las etiquetas para colorear creadas con Foundation CSS.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Foundation CSS Label Coloring classes</title>
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
crossorigin="anonymous">
<style>
.label{
font-size: 1.5rem;
}
</style>
</head>
<body>
<center>
<h2 style="color:green;">
GeeksforGeeks
</h2>
<h3>Foundation CSS Label Coloring</h3>
<div class="label success">
Success
</div>
<div class="label alert">
Alert
</div>
<div class="label warning">
Warning
</div>
</center>
</body>
</html>
Producción:
Ejemplo 3: Este es un ejemplo básico que ilustra iconos de etiquetas creados con Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Label Icons </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" /> </head> <body> <center> <h1 style="color:green;">GeeksforGeeks</h1> <strong>Foundation CSS Label Icons</strong> <br> <span class="label"> <i class="fi-magnifying-glass"></i> Magnifying Glass </span> <span class="label"> <i class="fi-social-github"></i> Github </span> <span class="label"> <i class="fi-zoom-out"></i> Zoom-out </span> <span class="label"> <i class="fi-bluetooth"></i> Bluetooth </span> <span class="label"> <i class="fi-mail"></i> Mail </span> </center> </body> </html>
Producción:
Referencia: https://get.foundation/sites/docs/label.html