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. En este artículo, discutiremos las clases de coloreado de etiquetas en Foundation CSS.
En Foundation CSS , las etiquetas se utilizan para mostrar información adicional sobre el elemento. La coloración de la etiqueta se usa para dar diferentes colores a la etiqueta usando varias clases.
Clases básicas de coloración de etiquetas 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 un amarillo que representa alguna acción de advertencia.
Sintaxis:
<span class="label color">
...
</span>
Ejemplo 1: El siguiente ejemplo ilustra el uso de Label Coloring usando las clases label , primary y secondary .
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">
<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"
crossorigin="anonymous">
</script>
<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 primary">
Primary
</div>
<div class="label secondary">
Secondary
</div>
</center>
</body>
</html>
Producción:
Ejemplo 2: El siguiente ejemplo ilustra el uso de Label Coloring usando las clases label , success , alert y warning .
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">
<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"
crossorigin="anonymous">
</script>
<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:
Referencia: https://get.foundation/sites/docs/label.html#coloring
Publicación traducida automáticamente
Artículo escrito por singhtripti y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA