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. Tiene numerosos componentes de sitio web preconstruidos que hacen que nuestro sitio web se vea profesional y mejora la experiencia del usuario del sitio web. Uno de esos componentes útiles en Foundation CSS es Media Object .
En este artículo, aprenderemos sobre el componente Media Object de Foundation CSS. El objeto multimedia es un componente muy útil para mostrar una imagen junto con algún contenido, generalmente texto en una alineación diferente con él. También podemos crear cuadrículas y objetos de medios anidados utilizando las diferentes características del objeto de medios.
- objeto multimedia: esta clase es la clase contenedora para crear objetos multimedia.
- media-object-section: esta clase denota las diferentes secciones del objeto multimedia.
- stack-on-small: esta clase permitirá que las imágenes obtengan un ancho del 100% y el texto cambie de tamaño e incluso se apilen cuando el tamaño de la pantalla sea pequeño.
Alineación de la sección : en Foundation CSS, cada sección está alineada en la parte superior de forma predeterminada. Ahora, podemos cambiar la alineación de cada sección usando las siguientes clases:
- medio: esta clase alinea la sección a la mitad del contenedor de objetos de medios.
- bottom: esta clase alinea la sección con la parte inferior del contenedor de objetos multimedia.
- align-self-middle: Esta clase alinea cada sección al medio.
- align-self-bottom: esta clase alinea cada sección con la parte superior del contenedor de objetos multimedia.
- align-middle: esta clase alinea todas las secciones secundarias del contenedor de objetos multimedia con el medio al mismo tiempo.
- align-bottom: esta clase alinea todas las secciones secundarias del contenedor de objetos multimedia en la parte inferior, todas a la vez.
Sintaxis:
<div class="media-object"> ... </div>
Ejemplo 1: El siguiente ejemplo es de dos objetos multimedia. El primero está alineado en la parte inferior y el segundo está alineado en el medio. Pero ambos responden.
HTML
<!DOCTYPE html> <html lang="en"> <head> <!-- CDN Links for Foundation CSS --> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css"> <!-- CDN for jQuery --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"> </script> <!-- CDN Links for Foundation JS --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.min.js"> </script> </head> <body style="margin: 20px;"> <h1 style="color: green;">GeeksforGeeks</h1> <h3>Foundation CSS Media Object</h3> <p>Middle aligned media object</p> <div> <div class="media-object stack-for-small"> <div class="media-object-section middle"> <img width="90px" height="90px" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220313120926/image-195x200.png"> </div> <div class="media-object-section main-section"> <h4>Header of the first media object</h4> <p> This is the sample text for the displaying the media object in Foundation CSS. This article about media object is published in GeeksforGeeks website. GeeksforGeeks is the best website for gaining knowledge about different technologies and computer subjects. You can find lots of articles published on GeeksforGeeks website on Foundation CSS. It a great source for learning and mastering any technology.GeeksforGeeks is the best website for gaining knowledge about different technologies and computer subjects. You can find lots of articles published on GeeksforGeeks website on Foundation CSS. It a great source for learning and mastering any technology. </p> </div> </div> </div> <p>Bottom aligned media object</p> <div class="media-object stack-for-small"> <div class="media-object-section bottom"> <img width="90px" height="90px" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220313120926/image-195x200.png" > </div> <div class="media-object-section main-section"> <h4>Header of the second media object</h4> <p> This is the sample text for the displaying the media object in Foundation CSS. This article about media object is published in GeeksforGeeks website. GeeksforGeeks is the best website for gaining knowledge about different technologies and computer subjects. You can find lots of articles published on GeeksforGeeks website on Foundation CSS. It a great source for learning and mastering any technology.GeeksforGeeks is the best website for gaining knowledge about different technologies and computer subjects. You can find lots of articles published on GeeksforGeeks website on Foundation CSS. It a great source for learning and mastering any technology. </p> </div> </div> <script> $(document).foundation(); </script> </body> </html>
Producción:
Ejemplo 2: podemos crear fácilmente objetos multimedia anidados mediante la inserción de un objeto multimedia dentro de otro objeto multimedia.
HTML
<!DOCTYPE html> <html lang="en"> <head> <!-- CDN Links for Foundation CSS --> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css"> <!-- CDN for jQuery --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"> </script> <!-- CDN Links for Foundation JS --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.min.js"> </script> </head> <body style="margin: 20px;"> <h1 style="color: green;">GeeksforGeeks</h1> <h3>Foundation CSS Media Object</h3> <p>Middle aligned media object</p> <div class="media-object"> <div class="media-object-section"> <div class="thumbnail"> <img width="90px" height="90px" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220313120926/image-195x200.png"> </div> </div> <div class="media-object-section"> <h4>I'm the parent</h4> <p> This is the sample text for the displaying the media object in Foundation CSS. This article about media object is published in GeeksforGeeks website. GeeksforGeeks is the best website for gaining knowledge about different technologies and computer subjects. You can find lots of articles published on GeeksforGeeks website on Foundation CSS. It a great source for learning and mastering any technology.GeeksforGeeks is the best website for gaining knowledge about different technologies and computer subjects. You can find lots of articles published on GeeksforGeeks website on Foundation CSS. It a great source for learning and mastering any technology. </p> <!-- Nested media object starts here --> <div class="media-object"> <div class="media-object-section"> <div class="thumbnail"> <img width="90px" height="90px" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220313120926/image-195x200.png"> </div> </div> <div class="media-object-section"> <h4>I'm the first child.</h4> <p> This is the sample text for the displaying the media object in Foundation CSS. This article about media object is published in GeeksforGeeks website. GeeksforGeeks is the best website for gaining knowledge about different technologies and computer subjects. You can find lots of articles published on GeeksforGeeks website on Foundation CSS. It a great source for learning and mastering any technology.GeeksforGeeks is the best website for gaining knowledge about different technologies and computer subjects. You can find lots of articles published on GeeksforGeeks website on Foundation CSS. It a great source for learning and mastering any technology. </p> </div> </div> <div class="media-object"> <div class="media-object-section"> <div class="thumbnail"> <img width="90px" height="90px" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220313120926/image-195x200.png"> </div> </div> <div class="media-object-section"> <h4>I'm the second child.</h4> <p> This is the sample text for the displaying the media object in Foundation CSS. This article about media object is published in GeeksforGeeks website. GeeksforGeeks is the best website for gaining knowledge about different technologies and computer subjects. You can find lots of articles published on GeeksforGeeks website on Foundation CSS. It a great source for learning and mastering any technology.GeeksforGeeks is the best website for gaining knowledge about different technologies and computer subjects. You can find lots of articles published on GeeksforGeeks website on Foundation CSS. It a great source for learning and mastering any technology. </p> </div> </div> <!-- And ends here --> </div> </div> <script> $(document).foundation(); </script> </body> </html>
Producción:
Referencia: https://get.foundation/sites/docs/media-object.html
Publicación traducida automáticamente
Artículo escrito por saikatmohanta43434 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA