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