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 hermosos sitios web, aplicaciones y correos electrónicos receptivos para que se vean increíbles y puedan ser accesibles para cualquier dispositivo. 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.
Las llamadas combinan paneles y alertas de Foundation 5 en un componente de contenedor genérico. En una llamada, el contenido se muestra como una ventana emergente sobre el resto del contenido y, por lo general, contiene datos de texto. Foundation CSS usa la clase de llamada en el elemento <div> para crear llamadas.
Sintaxis:
<div class="callout">contents...</div>
Ejemplo 1: este ejemplo demuestra la llamada básica realizada con Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS 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> <strong>Foundation CSS Callout</strong><br/><br/> </center> <div class="callout"> This is a basic callout.<br/> This is made using the Foundation CSS......... </div> </body> </html>
Producción:
Ejemplo 2: este ejemplo muestra la llamada con un encabezado, una descripción, una imagen y un enlace usando Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS 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> <strong>Foundation CSS Callout</strong><br/><br/> </center> <div class="callout"> <h3>Topic </h3> <p> Description Text should be put here.<br/> And this could be any number of lines. </p> <img src= "http://www.geeksforgeeks.org/wp-content/uploads/gfg_200X200-1.png"/><br/> <a href= "https://www.geeksforgeeks.org/">Click here to got to Geeksforgeeks. </a> </div> </body> </html>
Producción:
Enlace de referencia: https://get.foundation/sites/docs/callout.html
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA