Objeto multimedia

Documentación y ejemplos para el objeto de medios de Bootstrap para construir componentes altamente repetitivos como comentarios de blogs, tweets y similares.

Ejemplo

El objeto multimedia ayuda a construir componentes complejos y repetitivos donde algunos medios se colocan junto con el contenido que no envuelve dichos medios. Además, hace esto con solo dos clases obligatorias gracias a flexbox.

A continuación se muestra un ejemplo de un único objeto multimedia. Solo se requieren dos clases: el envoltorio .media y el .media-body entorno a su contenido. El margen y el relleno opcionales se pueden controlar mediante utilidades de espaciado .

Placeholder 64x64
Encabezado de medios
Cras sit amet nibh libero, en gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. 

  <div class="media">
    <img src="..." class="mr-3" alt="...">
    <div class="media-body">
      <h5 class="mt-0">Media heading</h5>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
  </div>
Flexbug # 12: los elementos en línea no se tratan como elementos flexibles

Internet Explorer 10-11 no rinde los elementos en línea como enlaces o imágenes (o ::beforey ::after pseudo-elementos) como elementos flexibles. La única solución consiste en establecer un no-inline display valor (por ejemplo, block, inline-block, o flex ). Sugerimos utilizar .d-flex una de nuestras utilidades de visualización como solución fácil.

Fuente: Flexbugs en GitHub

Anidamiento

Los objetos multimedia se pueden anidar infinitamente, aunque le sugerimos que se detenga en algún momento. Coloque anidado .media dentro .media-body de un objeto multimedia principal.

Placeholder 64x64
Encabezado de medios
Cras sit amet nibh libero, en gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Placeholder 64x64
Encabezado de medios
Cras sit amet nibh libero, en gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. 

  <div class="media">
    <img src="..." class="mr-3" alt="...">
    <div class="media-body">
      <h5 class="mt-0">Media heading</h5>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  
      <div class="media mt-3">
        <a class="mr-3" href="#">
          <img src="..." class="mr-3" alt="...">
        </a>
        <div class="media-body">
          <h5 class="mt-0">Media heading</h5>
          Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
        </div>
      </div>
    </div>
  </div>

Alineación

Los medios de un objeto multimedia se pueden alinear con las utilidades de flexbox en la parte superior (predeterminada), en el medio o al final de su .media-body contenido.

Placeholder 64x64
Medios alineados en la parte superior

Cras sit amet nibh libero, en gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 


  <div class="media">
    <img src="..." class="align-self-start mr-3" alt="...">
    <div class="media-body">
      <h5 class="mt-0">Top-aligned media</h5>
      <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
      <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    </div>
  </div>
Placeholder 64x64
Medios alineados al centro

Cras sit amet nibh libero, en gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 


  <div class="media">
    <img src="..." class="align-self-center mr-3" alt="...">
    <div class="media-body">
      <h5 class="mt-0">Center-aligned media</h5>
      <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
      <p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    </div>
  </div>
Placeholder 64x64
Medios alineados hacia abajo

Cras sit amet nibh libero, en gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 


  <div class="media">
    <img src="..." class="align-self-end mr-3" alt="...">
    <div class="media-body">
      <h5 class="mt-0">Bottom-aligned media</h5>
      <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
      <p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    </div>
  </div>

Orden

Cambie el orden del contenido en los objetos multimedia modificando el propio HTML o agregando un CSS flexible personalizado para establecer la order propiedad (en un número entero de su elección).

Objeto multimedia
Cras sit amet nibh libero, en gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Placeholder 64x64 

  <div class="media">
    <div class="media-body">
      <h5 class="mt-0 mb-1">Media object</h5>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
    <img src="..." class="ml-3" alt="...">
  </div>

Lista de medios

Debido a que el objeto multimedia tiene tan pocos requisitos estructurales, también puede usar estas clases en elementos HTML de lista. En su <ul>o <ol> , agregue .list-unstyled para eliminar cualquier estilo de lista predeterminado del navegador y luego aplíquelo .media a su <li> correo electrónico. Como siempre, utilice las utilidades de espaciado donde sea necesario para realizar ajustes.

  • Placeholder 64x64
    Objeto multimedia basado en listas
    Cras sit amet nibh libero, en gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  • Placeholder 64x64
    Objeto multimedia basado en listas
    Cras sit amet nibh libero, en gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  • Placeholder 64x64
    Objeto multimedia basado en listas
    Cras sit amet nibh libero, en gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. 

  <ul class="list-unstyled">
    <li class="media">
      <img src="..." class="mr-3" alt="...">
      <div class="media-body">
        <h5 class="mt-0 mb-1">List-based media object</h5>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      </div>
    </li>
    <li class="media my-4">
      <img src="..." class="mr-3" alt="...">
      <div class="media-body">
        <h5 class="mt-0 mb-1">List-based media object</h5>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      </div>
    </li>
    <li class="media">
      <img src="..." class="mr-3" alt="...">
      <div class="media-body">
        <h5 class="mt-0 mb-1">List-based media object</h5>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      </div>
    </li>
  </ul>

Imágenes en base a un ancho o alto

Utilice esta clase cover para hacer que su imagen se acomode en base a un ancho determinado o un alto determinado , el ancho o alto debe ir en la propiedad del elemento como lo muestra el ejemplo, pero solo uno de ambas propiedades. 


    <img src="..." class="mr-3" alt="..." width="100px">
    <img src="..." class="mr-3" alt="..." height="100px">

Guia para toma de foto

Utilice estas clases para visualizar la guia tanto para web y para movil


  .overlay-web {
    position:  absolute;
    height:  350px;
    width:  510px;
  }
  

  .overlay-helper-web {
    position:  relative;
    display:  flex;
    align-items:  center;
    height:  350px;
    width:  510px;
  }
  

  .overlay-element-web {
    position:  relative;
    margin:  0px auto;
    height:  350px;
    width:  510px;
  }
  

  .overlay-web .top-left-web {
    border:  3px solid $success;
    text-align:  left;
    border-radius:  25px;
    z-index:  4;
  }
  

  .box-photo-web {
    border:  3px solid $success;
    width:  140px;
    height:  130px;
    border-radius:  15px;
  }
  

  .overlay-mobile {
    position:  absolute;
    height:  510px;
    width:  350px;
  }
  

  .overlay-helper-mobile {
    position:  relative;
    display:  flex;
    height:  100%;
    width:  100%;
  }
  

  .overlay-element-mobile {
    position:  relative;
    margin:  0px auto;
    height:  440px;
    width:  290px;
  }
  

  .overlay-mobile .top-left-mobile {
    border:  3px solid $success;
    top:  32px;
    bottom:  32px;
    text-align:  left;
    border-radius:  25px;
    z-index:  3;
    }
  

  .box-photo-mobile {
    border:  3px solid $success;
    width:  130px;
    height:  140px;
    border-radius:  15px;
  }
  

  .box-photo-back-mobile {
    border:  3px solid $success;
    width:  177px;
    height:  25px;
    border-radius:  8px;
  }
  

  .box-photo-back-web {
    border:  3px solid $success;
    width:  45px;
    height:  250px;
    border-radius:  15px;
  }
  

  .camera-container-web {
    width:  510px;
    height:  350px;
  }
  

  .camera-container-mobile {
    width:  350px;
    height:  510px;
  }
  

  

  <div class="overlay-web">
    <div class="overlay-helper-web">
      <div class="overlay-element-web top-left-web">
        <div class="box-photo-web mt-5 ml-4">
        </div>
      </div>
    </div>
  </div>
  <video class="p-0 mx-auto" id="stream" width="350px"  height="510px">
  

  <div class="overlay-mobile">
    <div class="overlay-helper-mobile">
      <div class="overlay-element-mobile top-left-mobile d-flex justify-content-end">
        <div class="box-photo-mobile mt-5 mr-5">
        </div>
      </div>
    </div>
  </div>
  <video class="p-0 mx-auto" id="stream" width="350px"  height="510px">
  

  <div class="overlay-web">
    <div class="overlay-helper-web">
      <div class="overlay-element-web top-left-web d-flex justify-content-end align-items-center">
        <div class="box-photo-back-web m-3">
        </div>
      </div>
    </div>
  </div>
  <video class="p-0 mx-auto" id="stream" width="350px"  height="510px">
  

  <div class="overlay-mobile">
    <div class="overlay-helper-mobile">
      <div class="overlay-element-mobile top-left-mobile d-flex align-items-end justify-content-center">
        <div class="box-photo-back-mobile m-3">
        </div>
      </div>
    </div>
  </div>
  <video class="p-0 mx-auto" id="stream" width="350px"  height="510px">

Guia para toma de foto circular

Utilice estas clases para visualizar la guia tanto para web y para movil


  .overlay-web-selfie {
    position:  absolute;
    height:  510px;
    width:  510px;
  }
  

  .overlay-element-web-selfie {
    position:  relative;
    margin:  0px auto;
    height:  450px;
    width:  450px;
  }
  

  .guide-circle {
    border:  3px solid $success;
    height:  430px;
    width:  430px;
    border-radius:  50%;
  }
  

  
  .guide-mobile-mobile {
    border:  3px solid $success;
    width:  280px;
    height:  28px;
    border-radius:  50%;
  }
  

  .float-camera {
    top:  80px !important;
    right:  23px !important;
    width:  40px;
    height:  43px;
    border-radius:  50px !important;
  }
  

  .camera-container-web-selfie {
    width:  510px;
    height:  510px;
  }
  

  .camera-container-mobile-selfie {
    width:  360px;
    height:  360px;
  }
  

  

  <div class="overlay-web">
    <div class="overlay-helper-web">
      <div class="overlay-element-web top-left-web">
        <div class="box-photo-web mt-5 ml-4">
        </div>
      </div>
    </div>
  </div>
  <video class="p-0 mx-auto" id="stream" width="350px"  height="510px">

Voltear horizontalmente una imagen

Utilice la clase: .rotate-image-horizontally para voltear horizontalmente una imagen

Foto original

Foto con volteo horizontal


  <img class="rotate-image-horizontally">
    src="../../media/illustration/call-center.svg">
  </>