Objetos multimedia en Bootstrap con ejemplos

Posted on by Rudeus Greyrat

Los objetos multimedia Bootstrap , 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 clases de objetos multimedia disponibles son:

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

El espaciado Bootstrap se utiliza para controlar el relleno y el margen.

Alineación izquierda y derecha :

  • La clase «media-left» se utiliza para alinear a la izquierda un objeto multimedia.
  • La clase «media-right» se utiliza para alinear a la derecha el objeto multimedia.
  • La clase «media-body» se utiliza para colocar el contenido.

Sintaxis:

<div class="media-left">
    <img src="...">
</div>
<div class="media-body">
    Content to be placed 
</div>

El siguiente programa ilustra la alineación izquierda y derecha:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Link Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
        integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">
    <!-- Link Bootstrap JS and JQuery -->
    <script src=
"https://code.jquery.com/jquery-3.3.1.slim.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js">
    </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js">
    </script>
    <title>GeeksForGeeks Bootstrap Example</title>
</head>
<body>
    <div class="container">
        <h2>Media Object</h2>
        <!-- Left-aligned media object -->
        <div class="media">
            <div class="media-left">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/logo-2.png"
                    class="media-object" style="width:60px">
            </div>
            <div class="media-body">
                <h4 class="media-heading">
                    Left-aligned
                </h4>
                 
<p>
                    Use the "media-left" class to
                    left-align a media object. Text
                    that should appear next to the
                    image, is placed inside a container
                    with class="media-body"
                </p>
 
            </div>
        </div>
        <hr>
        <!-- Right-aligned media object -->
        <div class="media">
            <div class="media-body">
                <h4 class="media-heading">
                    Right-aligned
                </h4>
                 
<p>
                    Use the "media-right" class to
                    right-align the media object.
                    Text that should appear next to
                    the image, is placed inside a
                    container with class="media-body"
                </p>
 
            </div>
            <div class="media-right">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/logo-2.png"
                class="media-object" style="width:60px">
            </div>
        </div>
    </div>
</body>
</html>

Producción:


Alineación superior, media o inferior:

  • Similar a la alineación izquierda y derecha, el objeto multimedia se puede alinear arriba, abajo o en el medio.
  • Para alinear los medios en la parte superior, media o inferior, use las siguientes clases: clase media-top, media-middle o media-bottom

Sintaxis:

<div class="media-top">
    <img src="...">
</div>
<div class="media-body">
    Content to be placed 
</div>

El siguiente programa ilustra el enfoque anterior:

HTML

<!DOCTYPE html>
<html>
<head>
    <!-- Link Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
        integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">
    <!-- Link Bootstrap JS and JQuery -->
    <script src=
"https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
        integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
        crossorigin="anonymous"></script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
        integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
        crossorigin="anonymous"></script>
    <title>GeeksForGeeks Bootstrap Example</title>
</head>
<body>
    <div class="container">
        <h3>Media Object</h3>
        <br>
        <div class="media">
            <img class="align-self-start mr-3" src=
"https://media.geeksforgeeks.org/wp-content/uploads/logo-2.png"
                alt="Generic placeholder image"
                style="width:80px">
            <div class="media-body">
                <h6 class="media-heading">
                    Media Top
                </h6>
                 
<p>
                    The media object can be aligned to
                    top, middle or bottom.
                </p>
 
                <ul>
                    <li>
                        Use the "media-top" class to
                        top-align a media object.
                    </li>
                    <li>
                        Use the "media-middle" class to
                        middle-align a media object.
                    </li>
                    <li>
                        Use the "media-bottom" class to
                        bottom-align a media object.
                    </li>
                </ul>
            </div>
        </div>
        <div class="media">
            <img class="align-self-center mr-3" src=
"https://media.geeksforgeeks.org/wp-content/uploads/logo-2.png"
                alt="Generic placeholder image" style="width:80px">
            <div class="media-body">
                <h6 class="media-heading">Media Top</h6>
                 
<p>
                    The media object can be aligned to
                    top, middle or bottom.
                </p>
 
                <ul>
                    <li>
                        Use the "media-top" class to
                        top-align a media object.
                    </li>
                    <li>
                        Use the "media-middle" class to
                        middle-align a media object.
                    </li>
                    <li>
                        Use the "media-bottom" class to
                        bottom-align a media object.
                    </li>
                </ul>
            </div>
        </div>
        <div class="media">
            <img class="align-self-end mr-3" src=
"https://media.geeksforgeeks.org/wp-content/uploads/logo-2.png"
                alt="Generic placeholder image"
                style="width:80px">
            <div class="media-body">
                <h6 class="media-heading">Media Top</h6>
                 
<p>
                    The media object can be aligned to
                    top, middle or bottom.
                </p>
 
                <ul>
                    <li>
                        Use the "media-top" class to
                        top-align a media object.
                    </li>
                    <li>
                        Use the "media-middle" class to
                        middle-align a media object.
                    </li>
                    <li>
                        Use the "media-bottom" class to
                        bottom-align a media object.
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

Producción:

Objetos multimedia en formato anidado:

  • Si desea un medio debajo del segundo medio, puede usar el anidamiento en los objetos de medios
  • Los .media anidados se pueden colocar dentro de la clase .media-body del objeto multimedia principal.

Sintaxis:

<div class="media-left">
    <img src="...">
    <div class="media-left">
        Content to be placed 
    </div>
</div>

Ejemplo 1:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Link Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
        integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">
    <!-- Link Bootstrap JS and JQuery -->
    <script src=
"https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
        integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
        crossorigin="anonymous"></script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
        integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
        crossorigin="anonymous"></script>
    <title>GeeksForGeeks Bootstrap Example</title>
</head>
<body>
    <div class="container">
        <h3>Nested Media Objects</h3>
        <br>
        <div class="media">
            <div class="media-left">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png"
                    class="media-object" style="width:45px">
            </div>
            <div class="media-body">
                <h4 class="media-heading">
                    GeeksForGeeks
                    <small><br><i>Media Object 1</i></small></h4>
                <!-- Nested media object -->
                <div class="media">
                    <div class="media-left">
                        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks14-2.png"
                            class="media-object" style="width:45px">
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading">
                            GeeksForGeeks
                            <small><br><i>Media Object 2</i></small>
                        </h4>
                        <!-- Nested media object -->
                        <div class="media">
                            <div class="media-left">
                                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/transition-property_CSS_img1.png"
                                    class="media-object"
                                    style="width:45px">
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">
                                    GeeksForGeeks
                                    <small><br><i>
                                        Media Object 3
                                    </i></small>
                                </h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Producción:

Ejemplo 2:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Link BootStrap CSS -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
        integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">
    <!-- Link Bootstrap JS and JQuery -->
    <script src=
"https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
        integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
        crossorigin="anonymous"></script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
        integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
        crossorigin="anonymous"></script>
    <title>GeeksForGeeks Bootstrap Example</title>
</head>
<body>
    <div class="container">
        <h3>Nested Media Objects</h3>
        <br>
        <div class="media">
            <div class="media-left">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png"
                    class="media-object" style="width:45px">
            </div>
            <div class="media-body">
                <h6 class="media-heading">
                    GeeksForGeeks <small><br><i>
                        Media Object 1</i></small></h6>
                <!-- Nested media object -->
                <div class="media">
                    <div class="media-left">
                        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks14-2.png"
                            class="media-object" style="width:45px">
                    </div>
                    <div class="media-body">
                        <h6 class="media-heading">
                            GeeksForGeeks <small><br><i>
                                Media Object 2</i></small></h6>
                        <!-- Nested media object -->
                        <div class="media">
                            <div class="media-left">
                                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/transition-property_CSS_img1.png"
                                    class="media-object"
                                    style="width:45px">
                            </div>
                            <div class="media-body">
                                <h6 class="media-heading">
                                    GeeksForGeeks <small><br><i>
                                        Media Object 3</i></small></h6>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="media">
                    <div class="media-left">
                        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks14-2.png"
                            class="media-object" style="width:45px">
                    </div>
                    <div class="media-body">
                        <h6 class="media-heading">
                            GeeksForGeeks <small><br><i>
                                Media Object 4</i></small></h6>
                    </div>
                </div>
            </div>
        </div>
        <div class="media">
            <div class="media-left">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png"
                    class="media-object" style="width:45px">
            </div>
            <div class="media-body">
                <h6 class="media-heading">
                    GeeksForGeeks <small><br><i>
                        Media Object 5</i></small></h6>
            </div>
        </div>
    </div>
</body>
</html>

Producción:

Navegador compatible:

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

Publicación traducida automáticamente

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