Explicar los objetos multimedia y 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 Bootstrap pueden ser útiles para colocar contenido además de algunos medios que ayudan a crear contenido atractivo e interesante para los sitios web. Los objetos de medios, como imágenes o videos, se pueden alinear a la izquierda o a la derecha de algún contenido de una manera fácil y eficiente. Los objetos de medios Bootstrap se utilizan donde algunos datos se colocan junto con el contenido para construir componentes complicados y recursivos del contenido.

Las dos clases principales de objetos multimedia son: 

  • .medios de comunicación 
  • .media-cuerpo 

Acercarse:

  • Envuelva los elementos secundarios dentro de una clase .media .
  • Luego use una etiqueta <img> para especificar el contenido multimedia como imágenes.
  • Luego dentro del . clase media-body , agregue los contenidos multimedia.
  • También podemos crear contenido multimedia anidado dentro de una clase principal .media-body .

Para incluir los objetos multimedia de Bootstrap en el sitio web, debemos realizar los siguientes pasos:

Paso 1: Incluya Bootstrap CSS en la sección HTML <head> para cargar la hoja de estilo.

<enlace rel=”hoja de estilo” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css” integridad=”sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm” origen cruzado=”anónimo” >

Agregue el complemento y la dependencia de JavaScript de Bootstrap.

<guión src=”https://code.jquery.com/jquery-3.2.1.slim.min.js” integridad=”sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN” crossorigin=”anónimo”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js” integridad=”sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q” crossorigin=”anónimo ”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js” integridad=”sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl” crossorigin=”anónimo ”></guion>

Paso 2: podemos copiar directamente la plantilla de inicio de Bootstrap como se indica en la documentación oficial de Bootstrap.

HTML

<!doctype html>
<html lang="en">
<head>
      
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1, 
                   shrink-to-fit=no">
                     
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" 
          href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
          integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
          crossorigin="anonymous">
    <title>Hello, world!</title>
</head>
  
<body>
    <h1>Hello, world!</h1>
      
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      
    <script src=
"https://code.jquery.com/jquery-3.2.1.slim.min.js" 
            integrity=
"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
            crossorigin="anonymous">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
            integrity=
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
            crossorigin="anonymous">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
            integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
            crossorigin="anonymous">
    </script>
</body>
</html>

Utilizaremos la plantilla de inicio para construir la página web usando el objeto multimedia Bootstrap.

  • Objeto multimedia básico: usaremos la clase .media para el elemento contenedor y colocaremos el contenido multimedia dentro del contenedor secundario con la clase .media-body . 

 Ejemplo 1: Este ejemplo ilustra el uso de Bootstrap Media Object.

HTML

<!doctype html>
<html lang="en">
<head>
      
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1, 
                   shrink-to-fit=no">
                     
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" 
          href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
          integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
          crossorigin="anonymous">
    <title>GeeksforGeeks!</title>
</head>
  
<body>
    <h1 style="color: green;">GeeksforGeeks!</h1>
    <div class="media"> 
        <img class="mr-3" 
             src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
             width="100" 
             height="100" 
             alt="Alternate image">
        <div class="media-body">
            <h4 class="mt-0">
                Media heading Example1
            </h4> 
            GeeksforGeeks Bootstrap Media Content 
        </div>
    </div>
</body>
</html>

Producción:

  • Listas en objetos multimedia Bootstrap: podemos hacer una lista de objetos multimedia colocándolos dentro de nuestra etiqueta <ul> o <ol> y agregando la clase .list-unstyled para eliminar el estilo de lista predeterminado del navegador particular utilizado. Luego podemos agregar un .media a nuestra etiqueta <li> para hacer la lista de medios.

Ejemplo 2:  Este ejemplo ilustra el objeto Bootstrap Media en forma de lista.

HTML

<!doctype html>
<html lang="en">
  
<head>
      
    <!-- Required meta tags -->
    <meta charset="utf-8">
      
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1, 
                   shrink-to-fit=no">
                     
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" 
          href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
          integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
          crossorigin="anonymous">
    <title>GeeksforGeeks!</title>
</head>
  
<body>
    <h1 class="text-success">GeeksforGeeks!</h1>
    <ul class="list-unstyled">
        <li class="media"> 
            <img class="mr-3" 
                 src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
                 width="100" 
                 height="100" 
                 alt="Alternate image">
            <div class="media-body">
                <h5 class="mt-0 mb-1">
                    List-based Media heading Example3
                </h5> 
                GeeksforGeeks Bootstrap Media Content 
            </div>
        </li>
        <li class="media my-3"> 
            <img class="mr-3" 
                 src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
                 width="100" 
                 height="100" 
                 alt="Alternate image">
            <div class="media-body">
                <h5 class="mt-0 mb-1">
                    List-based Media heading Example3
                </h5> 
                GeeksforGeeks Bootstrap Media Content 
            </div>
        </li>
        <li class="media my-3"> 
            <img class="mr-3" 
                 src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
                 width="100" 
                 height="100" 
                 alt="Alternate image">
            <div class="media-body">
                <h5 class="mt-0 mb-1">
                    List-based media object
                </h5> GeeksforGeeks Bootstrap Media Content 
            </div>
        </li>
        <li class="media"> 
            <img class="mr-3" 
                 src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
                 width="100" 
                 height="100" 
                 alt="Alternate image">
            <div class="media-body">
                <h5 class="mt-0 mb-1">
                    List-based media object
                </h5> 
                GeeksforGeeks Bootstrap Media Content
            </div>
        </li>
    </ul>
</body>
</html>

Producción:

  • Anidación en objetos multimedia Bootstrap: podemos colocar varios objetos multimedia dentro de un objeto multimedia principal simplemente usando varias clases .media dentro del cuerpo .media de la clase multimedia principal.

Ejemplo 3: este ejemplo ilustra los objetos multimedia Bootstrap para anidar los medios junto con el contenido.

HTML

<!doctype html>
<html lang="en">
<head>
      
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1, 
                   shrink-to-fit=no">
                     
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" 
          href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
          integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
          crossorigin="anonymous">
    <title>GeeksforGeeks!</title>
</head>
  
<body>
    <h1 class="text-success">GeeksforGeeks!</h1>
    <div class="media"> 
        <img class="mr-3" 
             src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
             width="100"
             height="100"
             alt="Alternate image">
        <div class="media-body">
            <h5 class="mt-0">
                Media heading Example2
            </h5> 
            GeeksforGeeks Bootstrap Media Content
            <div class="media mt-3">
                <a class="pr-3" href="#">
                     <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
                          width="100" 
                          height="100" 
                          alt="Alternate image"> 
                </a>
                <div class="media-body">
                    <h5 class="mt-0">
                        Media heading Example2 nested
                    </h5> 
                    GeeksforGeeks Bootstrap Media Content 
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Producción:

  • Orden en los objetos multimedia Bootstrap: podemos cambiar el orden de los objetos multimedia colocando las imágenes después del contenido o antes o agregando un CSS personalizado o modificando el H tml para que se vea como queremos.

Ejemplo 4:  este ejemplo ilustra los objetos de medios Bootstrap para ordenar el contenido de los medios junto con los medios.

HTML

<!doctype html>
<html lang="en">
<head>
      
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1, 
                   shrink-to-fit=no">
                     
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" 
          href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
          integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
          crossorigin="anonymous">
    <title>GeeksforGeeks!</title>
</head>
  
<body>
    <h1 style="color: green;">GeeksforGeeks!</h1>
    <div class="media">
        <div class="media-body">
            <h5 class="mt-0 mb-1">
            Media Order
            </h5> 
            GeeksforGeeks Bootstrap Media Content 
        </div> 
        <img class="ml-3" 
             src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
             width="100" 
             height="100" 
             alt="Generic placeholder image"> 
    </div>
</body>
</html>

Producción:

  • Alineación en objetos de medios Bootstrap: podemos usar varias utilidades de flexbox para colocar los objetos de medios en el centro, en la parte superior o al final del contenido de la clase .media-body . 

Las siguientes clases de arranque nos ayudarán a hacerlo:

  • .align-self-start : para colocar los medios al comienzo del contenido.
  • .align-self-center : para colocar el material en el centro.
  • .align-self-end : Para colocar los medios al final.

Ejemplo 5: este ejemplo ilustra los objetos multimedia Bootstrap para alinear los medios y su contenido en la posición especificada utilizando las clases Bootstrap.

HTML

<!doctype html>
<html lang="en">
<head>
      
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1, 
                   shrink-to-fit=no">
                     
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" 
          href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
          integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
          crossorigin="anonymous">
    <title>GeeksforGeeks!</title>
</head>
  
<body>
    <h1 class="text-success">GeeksforGeeks!</h1>
    <div class="media"> 
        <img class="align-self-start mr-3" 
             src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
             width="100" 
             height="100" 
             alt="Generic placeholder image">
        <div class="media-body">
            <h4 class="mt-0">Top-aligned Bootstrap Media Object</h4>
            <p>GeeksforGeeks Bootstrap Media Content</p>
        </div>
    </div>
    <div class="media my-2"> 
        <img class="align-self-center mr-3" 
             src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
             width="100" 
             height="100" 
             alt="Generic placeholder image">
        <div class="media-body">
            <h4 class="mt-0">Center-aligned Bootstrap Media Object</h4>
            <p>GeeksforGeeks Bootstrap Media Content</p>
        </div>
    </div>
    <div class="media"> 
        <img class="align-self-end mr-3" 
             src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
             width="100" 
             height="100" 
             alt="Generic placeholder image">
        <div class="media-body">
            <h4 class="mt-0">Bottom-aligned Bootstrap Media Object</h4>
            <p>GeeksforGeeks Bootstrap Media Content</p>
        </div>
    </div>
</body>
</html>

Producción:

Navegador compatible:

  • Google Chrome
  • explorador de Internet
  • Borde de Microsoft
  • Firefox
  • Ópera
  • Safari

Publicación traducida automáticamente

Artículo escrito por rijushree100guha 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 *