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 coloración de insignias en Foundation CSS.
En Foundation CSS Badges se utilizan para crear información adicional sobre el contenido. También ayuda a hacer coincidir el tamaño de los elementos primarios inmediatos con tamaños de fuente relativos.
Foundation CSS Badge Clases para colorear:
- 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="badge color">
.......
</span>
Ejemplo 1: El siguiente ejemplo ilustra el uso de Badge Coloring utilizando las clases primaria y secundaria .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Foundation CSS Badge 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>
.badge{
font-size: 1.5rem;
}
</style>
</head>
<body>
<center>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>Foundation CSS Badge Coloring</h3>
<div class="badge primary">
Primary
</div>
<div class="badge secondary">
Secondary
</div>
</center>
</body>
</html>
Producción:
Foundation CSS Badge Coloring con clases primarias y secundarias
Ejemplo 2: El siguiente ejemplo ilustra el uso de Badge Coloring usando la clase success , alert y WARNING .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Foundation CSS Badge 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>
.badge{
font-size: 1.5rem;
}
</style>
</head>
<body>
<center>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>Foundation CSS Badge Coloring</h3>
<div class="badge success">
Success
</div>
<div class="badge alert">
Alert
</div>
<div class="badge warning">
Warning
</div>
</center>
</body>
</html>
Producción:
Foundation CSS Badge Coloring con clases de éxito, Alerta y Advertencia
Referencia: https://get.foundation/sites/docs/badge.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