Les media objets avec Bootstrap 4

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.   Démo Editer dans jsfiddle   À quoi sert un media objet ? Bootstrap propose les media objets comme un […]

Posté le par Benoît Philibert|990 vues

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.

 

Démo

Editer dans jsfiddle

 

À 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 :

dribbble
dribbble
twitter
twitter
medium
medium

 
 
 
 
 
 
 

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>

 

Démo

Editer dans jsfiddle

 


Ces articles pourraient vous intéresser

Tags

Commenter
Votre adresse email ne sera pas publiée. Champs obligatoire *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.