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.
Media Object agrega los medios con algún contenido mediante el uso de clases de objetos de medios. Cuando queremos demostrar algo con los medios, podemos usar estas clases. Podemos usar la clase media-object para crear la división y la media-object-section para crear las secciones.
Clases básicas de objetos de medios CSS de Foundation:
- media-object: Se utiliza para crear la división de los medios y el contenido.
- media-object-section: Se utiliza para crear las secciones.
Sintaxis:
<div class="media-object">
<div class="media-object-section">
.....
</div>
<div class="media-object-section">
.....
</div>
</div>
Ejemplo 1: el siguiente código demuestra los conceptos básicos del objeto multimedia con algo de contenido.
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"> </head> <body> <center> <h2 style="color: green;"> GeeksforGeeks </h2> <h3>Foundation CSS Media Object Basics</h3> </center> <div class="media-object"> <div class="media-object-section"> <div class="thumbnail"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> </div> </div> <div class="media-object-section main-section"> <h4> <strong>GeeksforGeeks</strong> </h4> <p>A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles.</p> <p>A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles.</p> </div> </div> </body> </html>
Producción:
Ejemplo 2: el siguiente código demuestra los conceptos básicos del objeto multimedia con video, contenido 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"> </head> <body style="padding: 1%;"> <center> <h2 style="color: green;"> GeeksforGeeks </h2> <h3>Foundation CSS Media Object Basics</h3> </center> <div class="media-object"> <div class="media-object-section"> <iframe width="380" height="300" src= "https://www.youtube.com/embed/lQwp_5Hi76Q"> </iframe> </div> <div class="media-object-section main-section"> <h4> <strong>GeeksforGeeks</strong> </h4> <p>A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles.</p> <p>A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles.</p> </div> <div class="media-object-section"> <div class="thumbnail"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20210201163555/gfg-300x300.jpeg"> </div> </div> </div> </body> </html>
Producción:
Referencia: https://get.foundation/sites/docs/media-object.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