¿Qué es un objeto de medios y explica sus tipos en Bootstrap?

Posted on by Rudeus Greyrat

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:

Ejemplo de objeto multimedia

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:

Objeto multimedia anidado

  • 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:

Objeto multimedia alineado al inicio, medio e inferior

  • 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:

Lista de objetos multimedia

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *