Les images avec Bootstrap 3

Dans ce tutoriel vous apprenez à appliquer le style aux images, créer des vignettes, des  grilles d'images et de vidéos et plus à l'aide de Bootstrap.

Tutoriel Bootstrap 3

Style d’images avec Bootstrap 3

Les images sont très importantes dans la conception web moderne.

Le style des images et les placer correctement sur les pages web estt donc très important pour améliorer l'expérience utilisateur.

En utilisant les classes intégrées de Bootstrap, vous pouvez facilement manipuler des images telles que faire les images de style acculés ou circulaires ronds, ou leur donner un effet de miniatures.

Coins arrondis

La classe .img-rounded ajoute des coins arrondis à une image (IE8 ne supporte pas les coins arrondis) :

Sélectionner le code

  <img src=" images/coq.jpg" class=" img-rounded" alt="image coq coins arrondis">

 

Vignette

La classe .img-thumbnail façonne l'image sous la forme d'une vignette :

Sélectionner le code

  <img src=" images/coq.jpg" class=" img-thumbnail" alt=" image coq forme vibnette ">

 

Cercle

La classe .img-circle façonne l'image d'un cercle (IE8 ne supporte pas les coins arrondis) :

Sélectionner le code

  <img src=" images/coq.jpg" class=" img-circle" alt=" image coq forme vibnette ">

 

Créer des vidéos et des Images responsives

En Bootstrap vous pouvez faire les images responsives, donc des images sensibles qui s'ajustent automatiquement pour s'adapter à la taille de l'écran.

Il suffit d'ajouter la classe .img-responsive à la balise <img> . Cette classe applique principalement les styles max-width: 100%; et height: auto; à l'image afin qu'elle s'adapte bien pour adapter l'élément conteneur — au cas où la largeur de l'image est plus grande que l'élément conteneur lui-même.

Sélectionner le code

  <img src=" images/nature.jpg" class=" img-responsive" alt="image nature responsive">

 
 

Vous pouvez aussi faire des  vidéos ou un diaporama intégrée dans une page web responsive sans affecter ses proportions d'origine. 

Le Bootstrap réactif incorporer des classes qui peuvent être appliquées directement sur les éléments <iframe><embed><video> et <object> .

Dans l'exemple ci-dessous, nous avons créé deux vidéos responsives avec deux proportions différentes (16:9 et 4:3) en  ajoutant à leurs blocs contenant respectivement les classes .embed-responsive-16by9 et .embed-responsive-4by3 et la classe .embed-responsive-item à l'élément enfant <iframe> .

Sélectionner le code

  <!—proportion écran 16:9 -->
  <div class="embed-responsive embed-responsive-16by9">
      <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/eCA3UihP-mM" frameborder="0" allowfullscreen></iframe>
  </div> 
  <!-- proportion écran 4:3  -->
  <div class="embed-responsive embed-responsive-4by3">
      <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/eCA3UihP-mM" frameborder="0" allowfullscreen></iframe>
  </div>

 
      

chapitre précédent chapitre suivant

Par carabde 25 decembre 2015