¿Cuál es el propósito de la clase .media-list en bootstrap?

Posted on by Rudeus Greyrat

En este artículo, aprenderemos el uso de la clase ‘.media-list’ en Bootstrap. La clase .media-list es una de las clases de objetos multimedia de bootstrap. La clase ‘.media’ se usa para alinear o flotar los elementos multimedia como audio, video e imágenes, mientras que la clase ‘.media-list’ se usa cuando los elementos multimedia se muestran en forma de una lista desordenada . . Puede usar las clases de medios dentro de los elementos de la lista para alinearlos según el requisito.

Sintaxis:

<ul class="media-list">
    <li></li>
<ul>

Aquí está la lista de algunas clases de medios útiles comunes que puede usar dentro de los elementos de la lista:

  • .media: puede crear un contenedor de medios utilizando esta clase.
  • .media-body: use esta clase para mostrar el texto o el contenido.
  • .media-left: esta clase se usa para alinear los medios a la izquierda.
  • .media-right: esta clase se utiliza para alinear los medios a la derecha.
  • .media-heading: esta clase contiene el encabezado del contenedor de medios.
  • .media-object: esta clase contiene el tipo de medio (puede ser audio, video o una imagen).

Ejemplo 1: Los siguientes ejemplos demuestran el uso de la clase ‘.media-list’ en bootstrap:

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" />
  
    <!-- Bootstrap cdn to link the bootstrap with HTML document -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
        integrity=
"sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" 
          crossorigin="anonymous" />
  
    <title>Explain the use of.media-list class in Bootstrap</title>
    <style>
        .media2 {
            /* margin-bottom: 5px; */
            width: 60vw;
            height: 50vh;
            display: flex;
            background-color: green;
            color: white;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
        }
    </style>
</head>
  
<body>
    <ul class="media-list media2">
        <li class="media">
            <div class="media-left">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220125210128/gfglogo.png"
                    alt="GeeksforGeeks" class="media-object" 
                     height="100px" width="100px" />
            </div>
  
            <div class="media-body">
                <h2 class="media-heading">
                    Welcome to GeeksforGeeks
                </h2>
                <p>
                    A Computer Science portal for all geeks. <br>
                    This is left aligned item.
                </p>
            </div>
        </li>
  
        <li class="media">
            <div class="media-body">
                <h2 class="media-heading">
                    Welcome to GeeksforGeeks
                </h2>
                <p>
                    A Computer Science portal for all geeks. <br>
                    This is right aligned item.
                </p>
            </div>
            <div class="media-right">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220125210128/gfglogo.png"
                    alt="GeeksforGeeks" class="media-object" 
                     height="100px" width="100px" />
            </div>
        </li>
    </ul>
  
    <!-- Bootstrap jQuery link -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
        integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"
        integrity=
"sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF"
        crossorigin="anonymous"></script>
</body>
  
</html>

Producción:

Ejemplo 2:

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" />
  
    <!-- Bootstrap cdn to link the 
        bootstrap with HTML document -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
        integrity=
"sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" 
        crossorigin="anonymous" />
  
    <title>
        Explain the use of.media-list 
        class in Bootstrap
    </title>
      
    <style>
        .media2 {
            width: 60vw;
            height: 80vh;
            display: flex;
            background-color: green;
            color: white;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
        }
    </style>
</head>
  
<body>
    <ul class="media-list media2">
        <li class="media">
            <div class="media-left">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220125210128/gfglogo.png"
                    alt="GeeksforGeeks" class="media-object" 
                    height="100px" width="100px" />
            </div>
  
            <div class="media-body">
                <h2 class="media-heading">
                    Hey Geek, Welcome to GeeksforGeeks
                </h2>
                  
                <p>
                    A computer science portal for all geeks. 
                    <br>This is parent, left aligned item.
                </p>
            </div>
        </li>
  
        <ul class="media-list">
            <li class="media">
                <div class="media-body">
                    <h2 class="media-heading">
                        Hey Geek, Welcome to GeeksforGeeks
                    </h2>
                    <p>
                        A computer science portal for all geeks.
                        <br>This is child, right aligned item.
                    </p>
                </div>
                <div class="media-right">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220125210128/gfglogo.png"
                        alt="GeeksforGeeks" class="media-object"
                        height="100px" width="100px" />
                </div>
            </li>
        </ul>
  
        <ul class="media-list">
            <li class="media">
                <div class="media-left">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220125210128/gfglogo.png"
                        alt="GeeksforGeeks" class="media-object"
                        height="100px" width="100px" />
                </div>
  
                <div class="media-body">
                    <h2 class="media-heading">
                        Hey Geek, Welcome to GeeksforGeeks
                    </h2>
                    <p>
                        A computer science portal for all geeks.
                        <br>This is child, left aligned item.
                    </p>
                </div>
            </li>
        </ul>
  
        <li class="media">
            <div class="media-body">
                <h2 class="media-heading">
                    Hey Geek, Welcome to GeeksforGeeks
                </h2>
                <p>
                    A computer science portal for all geeks.
                    <br>This is parent, right aligned item.
                </p>
            </div>
            <div class="media-right">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220125210128/gfglogo.png"
                    alt="GeeksforGeeks" class="media-object"
                    height="100px" width="100px" />
            </div>
        </li>
    </ul>
  
    <!-- Bootstrap jQuery link -->
    <script src=
"https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
        integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous">
    </script>
      
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"
        integrity=
"sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF"
        crossorigin="anonymous">
    </script>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

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