Fundación CSSes un marco front-end responsivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que hace que sea muy fácil diseñar hermosos sitios web, aplicaciones y correos electrónicos receptivos que se ven increíbles y pueden ser accesibles para cualquier dispositivo. 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. 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.
The Kitchen Sink tiene los elementos básicos para funcionar bien en nuestros sitios web y aplicaciones. Callout combina los paneles y las alertas de Foundation 5 en un componente de contenedor genérico. Se puede usar para crear un elemento de cuadro emergente con algunos estilos de borde, relleno y visuales. A menudo se usa para notificar al usuario sobre algo especial: notificaciones, consejos/trucos, descuentos, acción necesaria, otros. Se puede usar aplicando la clase .callout .
Foundation CSS Kitchen Sink Callout Classes:
Los rótulos se pueden colorear con .primary , .secondary , . éxito , .advertencia ,o . Clases de alerta .
- primario: Resalta con un color azul cielo al texto, que marca como importante.
- secundario: Resalta el texto con un color gris que marca como de menor importancia.
- é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 una acción incompleta con peligro.
- advertencia: Resalta el texto con un color amarillo que representa alguna acción de advertencia.
Las llamadas se pueden dimensionar utilizando las clases .small y .large .
- .small: reduce el relleno alrededor del contenido.
- .large: aumenta el relleno alrededor del contenido.
Sintaxis :
<div class="callout Kitchen-Sink-Callout-Classes">
...
</div>
Ejemplo : este ejemplo ilustra la leyenda del fregadero de la cocina en Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Kitchen Sink Callout</title> <!-- 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> <h3>Foundation CSS Kitchen Sink Callout</h3> <br/> <div class="callout"> This is a default callout. </div> <div class="callout primary"> This is a primary class callout. </div> <div class="callout secondary"> This is a secondary class callout. </div> <div class="callout success"> This is a success class callout. </div> <div class="callout alert"> This is an alert class callout. </div> <div class="callout warning"> This is a warning class callout. </div> </center> </body> </html>
Salida :
Llamada de fregadero de cocina Foundation CSS
Ejemplo : este ejemplo ilustra el tamaño de la llamada en Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Foundation CSS Kitchen Sink Callout </title> <!-- 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> <h3>Foundation CSS Kitchen Sink Callout</h3> <br/> <div class="callout"> This is a default callout. </div> <div class="callout small"> This is a small class callout. </div> <div class="callout large"> This is a large class callout. </div> </center> </body> </html>
Salida :
Llamada de fregadero de cocina Foundation CSS
Referencia : https://get.foundation/sites/docs/kitchen-sink.html#callout
Publicación traducida automáticamente
Artículo escrito por vividhpandey13 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA