Objet multimédia

Documentation et exemples pour l'objet multimédia de Bootstrap pour construire des composants hautement répétitifs tels que des commentaires de blog, des tweets, etc.

Exemple

L' objet multimédia aide à créer des composants complexes et répétitifs dans lesquels certains médias sont positionnés à côté d'un contenu qui ne s'enroule pas autour dudit média. De plus, il le fait avec seulement deux classes requises grâce à flexbox.

Vous trouverez ci-dessous un exemple d'objet multimédia unique. Seules deux classes sont requises : l'habillage .mediaet l' .media-bodyentourage de votre contenu. Le rembourrage et la marge facultatifs peuvent être contrôlés à l'aide d' utilitaires d'espacement .

Rubrique média

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibule en vulputé à, tempus viverra turpis. Fusce condimentum nunc ac nisi fringille vulputée. Donec lacinia congue felis in faucibus.

<div class="media">
  <img class="mr-3" src=".../64x64" alt="Generic placeholder image">
  <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 : les éléments en ligne ne sont pas traités comme des éléments flexibles

Internet Explorer 10-11 ne restitue pas les éléments en ligne tels que les liens ou les images (ou ::beforeles ::afterpseudo-éléments) en tant qu'éléments flexibles. La seule solution consiste à définir une displayvaleur non intégrée (par exemple, block, inline-blockou flex). Nous vous suggérons d'utiliser .d-flex, l'un de nos utilitaires d'affichage , comme solution simple.

Source : Flexbugs sur GitHub

Nidification

Les objets multimédias peuvent être imbriqués à l'infini, bien que nous vous suggérions de vous arrêter à un moment donné. Lieu imbriqué .mediadans le .media-bodyd'un objet multimédia parent.

Rubrique média

<div class="media">
  <img class="mr-3" src=".../64x64" alt="Generic placeholder image">
  <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="pr-3" href="#">
        <img src=".../64x64" alt="Generic placeholder image">
      </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>

Alignement

Les médias dans un objet média peuvent être alignés avec les utilitaires flexbox en haut (par défaut), au milieu ou à la fin de votre .media-bodycontenu.

Médias alignés en haut

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 class="align-self-start mr-3" src=".../64x64" alt="Generic placeholder image">
  <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>

Médias alignés au centre

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 class="align-self-center mr-3" src=".../64x64" alt="Generic placeholder image">
  <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>

Médias alignés en bas

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 class="align-self-end mr-3" src=".../64x64" alt="Generic placeholder image">
  <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>

Ordre

Modifiez l'ordre du contenu dans les objets multimédias en modifiant le code HTML lui-même ou en ajoutant un CSS flexbox personnalisé pour définir la orderpropriété (sur un entier de votre choix).

Objet multimédia

<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 class="ml-3" src=".../64x64" alt="Generic placeholder image">
</div>

Liste des médias

Étant donné que l'objet multimédia a si peu d'exigences structurelles, vous pouvez également utiliser ces classes sur des éléments HTML de liste. Sur votre <ul>ou <ol>, ajoutez le .list-unstyledpour supprimer tous les styles de liste par défaut du navigateur, puis appliquez .media-le à votre <li>s. Comme toujours, utilisez les utilitaires d'espacement chaque fois que nécessaire pour affiner.

Objet multimédia basé sur une liste
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibule en vulputé à, tempus viverra turpis. Fusce condimentum nunc ac nisi fringille vulputée. Donec lacinia congue felis in faucibus.
Objet multimédia basé sur une liste
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibule en vulputé à, tempus viverra turpis. Fusce condimentum nunc ac nisi fringille vulputée. Donec lacinia congue felis in faucibus.
Objet multimédia basé sur une liste
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibule en vulputé à, tempus viverra turpis. Fusce condimentum nunc ac nisi fringille vulputée. Donec lacinia congue felis in faucibus.

<ul class="list-unstyled">
  <li class="media">
    <img class="mr-3" src=".../64x64" alt="Generic placeholder image">
    <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 class="mr-3" src=".../64x64" alt="Generic placeholder image">
    <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 class="mr-3" src=".../64x64" alt="Generic placeholder image">
    <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>

Objet multimédia

Exemple

Rubrique média

Flexbug #12 : les éléments en ligne ne sont pas traités comme des éléments flexibles

Nidification

Rubrique média

Rubrique média

Alignement

Médias alignés en haut

Médias alignés au centre

Médias alignés en bas

Ordre

Objet multimédia

Liste des médias

Objet multimédia basé sur une liste

Objet multimédia basé sur une liste

Objet multimédia basé sur une liste