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 cómo cambiar el color de las llamadas realizadas con Foundation CSS.
Las llamadas combinan paneles y alertas de Foundation 5 en un componente de contenedor genérico. Foundation CSS usa la clase «llamada» en el elemento <div> para crear llamadas. Para cambiar el color del fondo de la llamada, usamos CSS base, clases de color contextuales, junto con la clase «llamada».
Clase de coloración de llamadas CSS de la Fundación:
- primario: esta clase se utiliza para establecer el color de la llamada en el color primario de la paleta. El color predeterminado es azul.
- secundario: esta clase se utiliza para establecer el color de la llamada en el color secundario de la paleta. El color predeterminado es gris.
- éxito: esta clase se utiliza para establecer el color de la llamada en el color de éxito de la paleta. El color predeterminado es verde.
- alerta: esta clase se utiliza para establecer el color de la llamada en el color de alerta de la paleta. El color predeterminado es rojo.
- advertencia: esta clase se utiliza para establecer el color de la llamada en el color de advertencia de la paleta. El color predeterminado es amarillo.
Sintaxis:
<div class="callout color-class">contents...</div>
Ejemplo: este ejemplo demuestra todas las variaciones de color de la llamada realizada con Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <!-- 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 style="padding: 30px;"> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <strong>Foundation CSS Callout</strong> <br/><br/> </center> <div class="callout primary"> Primary <br/> This is a basic callout. </div> <div class="callout secondary"> Secondary <br/> This is a basic callout. </div> <div class="callout success"> Success <br/> This is a basic callout. </div> <div class="callout alert"> Alert <br/> This is a basic callout. </div> <div class="callout warning"> Warning <br/> This is a basic callout. </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA