Arranque 4 | Objetos multimedia

Posted on by Rudeus Greyrat

Los objetos multimedia Bootstrap, como imágenes o videos, se pueden alinear a la izquierda o a la derecha con el 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.
Objeto multimedia básico: use la clase .media para el elemento contenedor y coloque el contenido multimedia dentro del contenedor secundario con la clase .media-body . 
Ejemplo: 

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Media Object</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <h1 class="text-success text-center">GeeksforGeeks</h1>
    <h2 class="text-center">Media Object</h2>
    <div class="container mt-3">
        <div class="media border p-3">
            <img src=
"https://www.geeksforgeeks.org/wp-content/uploads/gfg_transparent_white_small.png"
                alt="Geeks"
                class="mr-3 mt-3 rounded-circle bg-success"
                    style="width:40px;">
            <div class="media-body">
                <h3>GeeksforGeeks
                    <small>
                        <i>Post published on 14th May, 2019</i>
                    </small>
                </h3>
                 
<p>
                    GeeksforGeeks is a computer science portal.
                    It is a best programming platform.
                </p>
 
            </div>
        </div>
    </div>
</body>
</html>

Producción: 

Objetos multimedia anidados: el objeto multimedia se puede agregar dentro del objeto multimedia. Se llama objeto multimedia anidado.
Ejemplo: 

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Media Object</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <h1 class="text-success text-center">GeeksforGeeks</h1>
    <h2 class="text-center">Nested Media Objects</h2>
    <div class="container mt-3">
        <div class="media border p-3">
            <img src=
"https://www.geeksforgeeks.org/wp-content/uploads/gfg_transparent_white_small.png"
                alt="Geeks"
                class="mr-3 mt-3 rounded-circle bg-success"
                style="width:40px;">
            <div class="media-body">
                <h3>GeeksforGeeks
                    <small>
                        <i>Post published on 14th May, 2019</i>
                    </small>
                </h3>
                 
<p>
                    GeeksforGeeks is a computer science portal.
                    It is a best programming platform.
                </p>
 
                <div class="media p-3">
                    <img src=
"https://www.geeksforgeeks.org/wp-content/uploads/gfg_transparent_white_small.png"
                        alt="Geeks"
                        class="mr-3 mt-3 rounded-circle bg-success"
                        style="width:40px;">
                    <div class="media-body">
                        <h5>GeeksforGeeks
                            <small>
                                <i>Post Modified on 15th May, 2019</i>
                            </small>
                        </h5>
                         
<p>
                            GeeksforGeeks is a computer science portal.
                            It is a best programming platform.
                        </p>
 
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Producción: 

Imagen multimedia alineada a la derecha: agregue una imagen después del contenedor .media-body para configurar la imagen alineada a la derecha.
Ejemplo: 

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Media Object</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <h1 class="text-success text-center">GeeksforGeeks</h1>
    <h2 class="text-center">Right-Aligned Media Objects</h2>
    <div class="container mt-3">
        <div class="media border p-3">
            <div class="media-body">
                <h3>GeeksforGeeks
                    <small>
                        <i>Post published on 14th May, 2019</i>
                    </small>
                </h3>
                 
<p>
                    GeeksforGeeks is a computer science portal.
                    It is a best programming platform.
                </p>
 
            </div>
            <img src=
"https://www.geeksforgeeks.org/wp-content/uploads/gfg_transparent_white_small.png"
                alt="Geeks"
                class="mr-3 mt-3 rounded-circle bg-success"
                style="width:40px;">
        </div>
    </div>
</body>
</html>

Producción: 

Alineación de medios superior, media e inferior: las clases .align-self-* se utilizan para establecer el objeto de medios en la parte superior, media o inferior del elemento.
Ejemplo: 

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Media Object</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <h1 class="text-success text-center">GeeksforGeeks</h1>
    <h2 class="text-center">
        Top, Middle or Bottom Media Alignment
    </h2>
    <div class="container mt-3">
        <div class="media border p-3">
            <img src=
"https://www.geeksforgeeks.org/wp-content/uploads/gfg_transparent_white_small.png"
                alt="Geeks"
                class="align-self-start mr-3 mt-3
                        rounded-circle bg-success"
                style="width:40px;">
            <div class="media-body">
                <h3>GeeksforGeeks
                    <small>
                        <i>Post published on 14th May, 2019</i>
                    </small>
                </h3>
                 
<p>
                    GeeksforGeeks is a computer science portal.
                    It is a best programming platform. It contains
                    well written, well thought and well explained
                    computer science and programming articles,
                    quizzes and ...
                </p>
 
            </div>
        </div>
        <div class="media border p-3">
            <img src=
"https://www.geeksforgeeks.org/wp-content/uploads/gfg_transparent_white_small.png"
                alt="Geeks"
                class="align-self-center mr-3 mt-3
                        rounded-circle bg-success"
                style="width:40px;">
            <div class="media-body">
                <h3>GeeksforGeeks
                    <small>
                        <i>Post published on 14th May, 2019</i>
                    </small>
                </h3>
                 
<p>
                    GeeksforGeeks is a computer science portal.
                    It is a best programming platform. It contains
                    well written, well thought and well explained
                    computer science and programming articles,
                    quizzes and ...
                </p>
 
            </div>
        </div>
        <div class="media border p-3">
            <img src=
"https://www.geeksforgeeks.org/wp-content/uploads/gfg_transparent_white_small.png"
                alt="Geeks"
                class="align-self-end mr-3 mt-3
                        rounded-circle bg-success"
                style="width:40px;">
            <div class="media-body">
                <h3>GeeksforGeeks
                    <small>
                        <i>Post published on 14th May, 2019</i>
                    </small>
                </h3>
                 
<p>
                    GeeksforGeeks is a computer science portal.
                    It is a best programming platform. It contains
                    well written, well thought and well explained
                    computer science and programming articles,
                    quizzes and ...
                </p>
 
            </div>
        </div>
    </div>
</body>
</html>

Producción: 

Navegador compatible:

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

Publicación traducida automáticamente

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