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 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 : 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
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 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>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
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.
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>Médias alignés au centre
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.
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>Médias alignés en bas
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.
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>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
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">
<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>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 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>