Sommaire

Les miniatures COMPOSANTS WEB:Miniatures

1. L’objectif

Lorsque vous avez beaucoup d’images, de photos à présenter dans votre site Web, vous pouvez les afficher sous forme de miniatures, de vignettes (thumbnail en anglais). Quand le visiteur clique sur l’une de ces miniatures, l’image s’affiche en plein écran. Bootstrap nous propose d’utiliser une mise en forme « prête à l’emploi », mais sans la partie interaction avec l’utilisateur.

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

2. La structure pour une miniature simple

Nous utilisons une structure Bootstrap « classique » (.container et .row). Puis nous y plaçons notre boîte <div> en design adaptatif. Le lien sur l’image utilise la classe .thumbnail.

Voici le code HTML utilisé :

<div class="container"> 
   <div class="row"> 
      <div class="col-sm-6 col-md-3"> 
         <a href="#" class="thumbnail"> 
            <img src="tigre-grand.jpg" alt="Un tigre"> 
         </a> 
      </div> 
   </div> 
</div>

Voilà l’affichage :

images/C10-003.png

Voici tous les sélecteurs CSS utilisés dans cet exemple :

.thumbnail, .img-thumbnail { 
   (-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.075);)  ...