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. El marco se basa en bootstrap, que es similar a SaaS. 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.
Media Object en Foundation CSS agrega los medios (generalmente una imagen) con algún contenido (generalmente texto) mediante el uso de clases de objetos multimedia. Podemos usar estas clases para agregar medios y contenido textual. 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 : esta clase se utiliza para crear la división de los medios y el contenido.
- media-object-section: esta clase se utiliza para crear las secciones.
Alineación de la sección en el objeto multimedia: de forma predeterminada, la sección se alinea con la parte superior del contenedor. Con la ayuda de las clases media e inferior de alineación de sección , podemos alinear la sección tanto en la posición media como en la inferior.
Sintaxis:
<div class="media-object">
<div class="media-object-section middle/bottom">
.....
</div>
<div class="media-object-section middle/bottom">
.....
</div>
</div>
Nota: Descargue los archivos necesarios de https://get.foundation/sites/docs/installation.html o https://codepen.io/ZURBFoundation/pen/aWKpOj para probar ejemplos. Es posible que el CSS comprimido no funcione correctamente (es decir, se llama a través de CDN).
Ejemplo 1 : este ejemplo ilustra el objeto multimedia central de alineación de sección en Foundation CSS.
HTML
<!DOCTYPE html> <html> <head> <title>Foundation CSS Media Object Section Alignment</title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> </head> <body style="margin: 2rem; width: 50%;"> <center> <h2 style="color: green;"> GeeksforGeeks </h2> <h4>Foundation CSS Media Object Section Alignment - middle</h4> </center> <div class="media-object"> <div class="media-object-section middle"> <div class="thumbnail"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20210201163555/gfg-100x100.jpeg"> </div> </div> <div class="media-object-section main-section"> <h5><strong>GeeksforGeeks</strong></h5> <p> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles. 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. 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. 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:
Alineación de la sección de objetos de medios CSS de Foundation
Ejemplo 2 : este ejemplo ilustra el objeto multimedia inferior de alineación de sección en Foundation CSS.
HTML
<!DOCTYPE html> <html> <head> <title>Foundation CSS Media Object Section Alignment</title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> </head> <body style="margin: 2rem; width: 50%;"> <center> <h2 style="color: green;"> GeeksforGeeks </h2> <h4>Foundation CSS Media Object Section Alignment - bottom</h4> </center> <div class="media-object"> <div class="media-object-section bottom"> <div class="thumbnail"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20210201163555/gfg-100x100.jpeg"> </div> </div> <div class="media-object-section main-section"> <h5><strong>GeeksforGeeks</strong></h5> <p> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles. 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. 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. 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:
Alineación de la sección de objetos de medios CSS de Foundation
Referencia: https://get.foundation/sites/docs/media-object.html#section-alignment