En este artículo, aprenderemos sobre el objeto de medios Bootstrap, que es útil para colocar los medios junto al texto. Además, comprenderemos las diversas formas de usar los medios con texto y su implementación a través de los ejemplos. Los objetos de medios son el componente de arranque que ayuda a crear un diseño repetitivo en Bootstrap, donde algunos medios se colocan alineados a la izquierda o a la derecha junto con contenido de texto que no se envuelve alrededor de los medios. Los objetos multimedia requieren dos clases de Bootstrap para envolver el contenido .media y .media-body a su alrededor.
Usaremos los enlaces CDN de Bootstrap para importarlos al archivo HTML.
<!–Enlace CSS de Bootstrap –>
<enlace rel=”hoja de estilo” href=”https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css” integridad=”sha384 -B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l” crossorigin=”anónimo”/><!–Bootstrap Enlace Javascript –>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js” integridad=”sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+ OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p” crossorigin=”anónimo”>
</script>
Después de agregar los enlaces CDN requeridos, usaremos el siguiente código simple para el objeto multimedia en nuestro archivo HTML:
<div class="media"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20211025131754/GFGlogo2.jpg" class="align-self-end mr-3" alt="img" /> <div class="media-body"> <h5 class="mt-0">Media heading</h5> <p> Geeksforgeeks platform has been designed for every geek wishing to expand their knowledge, share their knowledge and is ready to grab their dream job. </p> </div> </div>
Ejemplo: Este ejemplo describe objetos simples de medios y cuerpos de medios .
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity= "sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> <title>Media Object</title> </head> <body> <!--Adding media class--> <div class="media"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20211025131754/GFGlogo2-300x207.jpg" class="mr-3" alt="img"> <!--Adding media-body class--> <div class="media-body"> <h5 class="mt-0">Media heading</h5> <p> Geeksforgeeks platform has been designed for every geek wishing to expand their knowledge, share their knowledge and is ready to grab their dream job. </p> </div> </div> </body> </html>
Producción:
Hay diferentes tipos de objetos multimedia en Bootstrap.
Objeto multimedia anidado: podemos hacer un objeto multimedia anidado dentro de Bootstrap. Para hacer un objeto de medios anidado, tenemos que agregar objetos de medios dentro de la clase .media-body. En el objeto multimedia anidado, el .media se puede colocar dentro de la clase .media-body del objeto multimedia principal.
Sintaxis:
<div class="media-left"> <img src="url"> <div class="media-left"> Content </div> </div>
Ejemplo : este ejemplo describe los objetos de cuerpo multimedia anidados .
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity= "sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> <title>Media Object</title> </head> <body> <!--media class --> <div class="media"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20211025131754/GFGlogo2-300x207.jpg" class="mr-3" alt="img"> <!--media-body class --> <div class="media-body"> <h5 class="mt-0">Media heading</h5> <p> Geeksforgeeks platform has been designed for every geek wishing to expand their knowledge, share their knowledge and is ready to grab their dream job. </p> <!--Nested media class --> <div class="media"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20211025131754/GFGlogo2-300x207.jpg" class="mr-3" alt="img"> <!--Nested media-body class --> <div class="media-body"> <h5 class="mt-0">Media heading</h5> <p> Geeksforgeeks platform has been designed for every geek wishing to expand their knowledge, share their knowledge and is ready to grab their dream job. </p> <!--Nested media class --> <div class="media"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20211025131754/GFGlogo2-300x207.jpg" class="mr-3" alt="img"> <!--Nested media-body class --> <div class="media-body"> <h5 class="mt-0">Media heading</h5> <p> Geeksforgeeks platform has been designed for every geek wishing to expand their knowledge, share their knowledge and is ready to grab their dream job. </p> </div> </div> </div> </div> </div> </div> </body> </html>
Producción:
- Alineación: podemos alinear los medios dentro del objeto de medios con la ayuda de las clases de utilidad de flexbox. Para alinear los medios en la parte superior, media o inferior, podemos usar estas clases: clase media-top , media-middle o media-bottom .
Sintaxis:
<div class="media-top"> <img src="url"> </div> <div class="media-body"> Content </div>
Ejemplo: Este ejemplo describe el objeto de medios alineado con la parte superior, media o inferior de los medios.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity= "sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> <title>Media Object</title> </head> <body> <!--Top alignment--> <div class="media"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20211025131754/GFGlogo2-300x207.jpg" class="align-self-start mr-3" alt="img"> <div class="media-body"> <h5 class="mt-0">Media heading</h5> <p> GeeksforGeeks platform has been designed for every geek wishing to expand their knowledge , share their knowledge and is ready to grab their dream job. </p> </div> </div> <!--Center alignment--> <div class="media"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20211025131754/GFGlogo2-300x207.jpg" class="align-self-center mr-3" alt="img"> <div class="media-body"> <h5 class="mt-0">Media heading</h5> <p> GeeksforGeeks platform has been designed for every geek wishing to expand their knowledge , share their knowledge and is ready to grab their dream job. </p> </div> </div> <!--Bottom alignment--> <div class="media"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20211025131754/GFGlogo2-300x207.jpg" class="align-self-end mr-3" alt="img"> <div class="media-body"> <h5 class="mt-0">Media heading</h5> <p> GeeksforGeeks platform has been designed for every geek wishing to expand their knowledge , share their knowledge and is ready to grab their dream job. </p> </div> </div> </body> </html>
Producción:
- Lista basada en objetos de medios: en Bootstrap, podemos agregar objetos de medios dentro de la lista como elementos de la lista y usarlos para crear una lista basada en objetos de medios.
Sintaxis:
<ul class="list-unstyled"> <li class="media"> <img src="url" /> <div class="media-body">Content</div> </li> </ul>
Ejemplo: Este ejemplo describe la lista basada en objetos multimedia.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity= "sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> <title>Media Object</title> </head> <body> <!--Unordered list style --> <ul class="list-unstyled"> <li class="media"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20211025131754/GFGlogo2-300x207.jpg" class="mr-3" alt="logo"> <div class="media-body"> <h5 class="mt-0 mb-1">List-based media object</h5> <p> GeeksforGeeks platform has been designed for every geek wishing to expand their knowledge, share their knowledge and is ready to grab their dream job. </p> </div> </li> <li class="media my-4"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20211025131754/GFGlogo2-300x207.jpg" class="mr-3" alt="logo"> <div class="media-body"> <h5 class="mt-0 mb-1">List-based media object</h5> <p> GeeksforGeeks platform has been designed for every geek wishing to expand their knowledge, share their knowledge and is ready to grab their dream job. </p> </div> </li> <li class="media"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20211025131754/GFGlogo2-300x207.jpg" class="mr-3" alt="logo"> <div class="media-body"> <h5 class="mt-0 mb-1">List-based media object</h5> <p> GeeksforGeeks platform has been designed for every geek wishing to expand their knowledge, share their knowledge and is ready to grab their dream job. </p> </div> </li> </ul> </body> </html>
Producción:
El objeto de medios en Bootstrap es un componente muy útil que podemos usar para diferentes propósitos, como hacer un clon de Twitter donde podemos usar para crear publicaciones, también podemos usar para crear un clon de sitio web de noticias donde podemos usar este concepto de objeto de medios. Por lo tanto, el objeto de medios facilita mucho nuestros trabajos al colocar los medios junto con el contenido de texto de manera ordenada.
Navegador compatible:
- Google Chrome
- Borde de Microsoft
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por saikatmohanta43434 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA