Sommaire

Les listes d’images COMPOSANTS WEB:Liste d’images

1. L’objectif

Bootstrap nous propose une mise en page pour afficher des médias sous forme de liste. Chaque média est placé dans une boîte <div> ayant pour classe .media. Dans cette boîte, vous pouvez placer d’autres éléments : titre, texte et bien sûr l’image.

Au clic sur une des images, vous pourriez afficher l’image en plein écran à l’aide d’une fonction JavaScript à créer.

Utilisez le fichier Bootstrap-04-COMP-Web/04_ media.html.

2. La liste des images

Là encore, dans cet exemple, nous avons placé toutes les boîtes <div> des images dans une structure classique Bootstrap (.container et .row), car les boîtes des images ont une largeur fixée à 100 % de l’élément parent.

Voici le code utilisé pour trois boîtes d’images :

<div class="container">
   <div class="row"> 
      <div class="media"> 
         <a class="pull-left" href="#"> 
            <img class="media-object" src="tigre.jpg" alt="Tigre"> 
         </a> 
         <div class="media-body"> 
            <h4 class="media-heading">Le tigre</h4>  ...