Foundation CSS es el marco frontend de CSS que se utiliza para crear sitios web, aplicaciones y correos electrónicos receptivos que funcionan perfectamente en cualquier dispositivo. Está escrito usando HTML, CSS y Javascript y es utilizado por muchas compañías famosas como Amazon, Facebook, eBay, etc. Utiliza paquetes como Grunt y Libsass para una codificación y control rápidos y un compilador Saas para acelerar el desarrollo.
Kitchen Sink tiene los elementos para trabajar en sitios web y aplicaciones. La etiqueta es el estilo en línea utilizado para definir las etiquetas para el elemento de entrada.
Clase de etiqueta de fregadero de cocina Foundation CSS :
- etiqueta : se utiliza para definir la etiqueta del elemento de entrada.
Tipos de etiquetas:
- etiqueta primaria: Se utiliza para crear la etiqueta primaria con un color azul.
- etiqueta secundaria: Se utiliza para crear la etiqueta secundaria con un color gris.
- etiqueta de éxito: Se utiliza para crear la etiqueta de éxito con un color verde.
- etiqueta de alerta: Se utiliza para crear la etiqueta de alerta con un color rojo.
- etiqueta de advertencia: Se utiliza para crear la etiqueta de advertencia con un color amarillo.
Sintaxis:
<span class="primary label">Primary</span>
Ejemplo 1: este ejemplo describe la etiqueta del fregadero de la cocina en Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Kitchen Sink Label</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" crossorigin="anonymous"> </script> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <h1 style="color: green;"> GeeksforGeeks </h1> <h3>Foundation CSS Kitchen Sink Label</h3> <strong>Primary label:</strong> <span class="primary label">Primary Label</span><br> <strong>Secondary label:</strong> <span class="secondary label">Secondary Label</span> </body> </html>
Producción:
Etiqueta de fregadero de cocina
Ejemplo 2: este ejemplo describe la etiqueta del fregadero de la cocina con diferentes clases de etiquetas en Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Kitchen Sink Label</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" crossorigin="anonymous"> </script> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <h1 style="color: green;"> GeeksforGeeks </h1> <h3>Foundation CSS Kitchen Sink Label</h3> <strong>Success Label: </strong> <span class="success label">Success Label</span><br> <strong>Alerting Label: </strong> <span class="alert label">Alert Label</span><br> <strong>Warning Label: </strong> <span class="warning label">Warning Label</span><br> </body> </html>
Producción:
Etiqueta de fregadero de cocina
Referencia: https://get.foundation/sites/docs/kitchen-sink.html#label
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA