Vous le savez depuis quelques jours, Bootstrap 4 est disponible en version Alpha. Grâce au site officiel, on peut en savoir un peu plus sur les nouveautés qu’apportera cette version. Aujourd’hui, (re)découvrons les media objets.
À quoi sert un media objet ?
Bootstrap propose les media objets comme un composant taillé pour des espaces de discussion tels qu’un forum, un blog ou tout autres site web proposant un système avec des blocks de commentaires, d’articles à lires ou de tweets.
Quelques exemples de media objets :
La structure
L’élément de classe .media englobe le contenu du media objet. Sur cet exemple, on utilise une image alignée à gauche du contenu et un titre avec son paragraphe sur la droite.
La classe .media-left aligne l’image. La classe .media-body gère le contenu de droite.
<div class="media"> <a class="media-left" href="#"> <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image"> </a> <div class="media-body"> <h4 class="media-heading">Media heading</h4> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. 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>
Le Nesting
Le nesting est un système d’imbrication mêlant plusieurs media objets. Cela donne un look proche du commentaire composé d’une ou plusieurs réponses.
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
</a></div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. 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">
<a class="media-left" href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
<div class="media-body">
<h4 class="media-heading">Nested media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. 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>
La nouveauté Bootstrap 4 : gestion de l’alignement
Auparavant, le framework ne nous donnait pas la possibilité d’adapter l’alignement vertical de l’image media. Cette dernière peut s’aligner en haut, au milieu et en bas du contenu placé dans la balise de classe .media-body.
Alignement vertical au milieu :
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
</a></div>
<div class="media-body">
<h4 class="media-heading">Middle aligned media</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. 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>
</div>
Alignement vertical bas :
<div class="media">
<div class="media-left media-bottom">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
</a></div>
<div class="media-body">
<h4 class="media-heading">Bottom aligned media</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. 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>
</div>