Foundation CSS es un marco front-end receptivo y de código abierto creado por ZURB en septiembre de 2011 que simplifica la creación de sorprendentes sitios web, aplicaciones y correos electrónicos receptivos que funcionan en cualquier dispositivo. Muchas empresas, como Facebook, eBay, Mozilla, Adobe e incluso Disney, lo utilizan. Este marco se basa en bootstrap, que es similar a SaaS. Es más complejo, versátil y configurable. También viene con una interfaz de línea de comandos, lo que facilita su uso con paquetes de módulos. El marco de correo electrónico le proporciona correos electrónicos HTML receptivos, que se pueden leer en cualquier dispositivo. Foundation for Apps le permite crear aplicaciones web totalmente receptivas.
La llamada se usa para crear el panel para almacenar contenido. El callout es un elemento en el que podemos poner cualquier tipo de contenido como texto, imágenes, videos, etc. Podemos crear el callout usando la clase callout. En este artículo, discutiremos cómo crear la llamada básica.
Clase de conceptos básicos de llamada de CSS de Foundation:
- callout : Se utiliza para crear el callout para poner cualquier tipo de contenido.
Sintaxis:
<div class="callout"> ........ </div>
Ejemplo 1: el siguiente código demuestra los conceptos básicos de la llamada con algo de contenido y enlace.
HTML
<!DOCTYPE html> <html> <head> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"> </head> <body> <center> <h2 style="color: green;"> GeeksforGeeks </h2> <h3> Foundation CSS Callout Basics </h3> </center> <div class="callout"> <h5> This is Basic callout. </h5> <strong> GeeksforGeeks </strong> <p> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles </p> <a href="https://www.geeksforgeeks.org/"> https://www.geeksforgeeks.org/ </a> </div> </body> </html>
Producción:
Ejemplo 2: el siguiente código demuestra los conceptos básicos de llamadas con algo de contenido, botón e imagen.
HTML
<!DOCTYPE html> <html> <head> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"> </head> <body> <center> <h2 style="color: green;"> GeeksforGeeks </h2> <h3> Foundation CSS Callout Basics </h3> </center> <div class="callout"> <h5> This is Basic callout. </h5> <strong> GeeksforGeeks </strong> <p> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles </p> <button class="button"> Button 1 </button> </div> <div class="callout"> <h5>This is Basic callout.</h5> <strong>GeeksforGeeks Image</strong><br> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" alt=""> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png" alt=""> </div> </body> </html>
Producción:
Referencia: https://get.foundation/sites/docs/callout.html#basics
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA