Les images en Bootstrap
Sommaire
Les images en Bootstrap
-
Objectifs
- Etre capable de travailler avec les images Bootstrap 4
-
Présentation
- Bootstrap va nous permettre de centrer des images, d’ajouter des cadres de différentes formes ou encore de faire en sorte que la taille de nos images s’adapte en fonction de celle de leur élément parent.
- Les classes d’images Bootstrap 3 ont été changé dans la version Bootstrap4
-
Les classes utilisées
-
.rounded
- Cette classe nous permettre de rogner les images de façon à ce que sa forme soit légèrement arrondie
<img src="images/01.jpg" class="rounded" alt="Oasis tunisienne">-
.rounded-circle
- Cette classe nous permettre de transformer les images de façon à ce que sa forme soit un ellipse
<img src="images/01.jpg" class="rounded-circle" alt="Oasis tunisienne">-
.img-thumbnail
- Cette classe nous permettre d’ajouter une bordure arrondie de 1px. visible aux images .
<img src="images/01.jpg" class="img-thumbnail" alt="Oasis tunisienne">-
Application
- Utiliser les classes media, media-body et img-thumbnail pour reproduire le schéma suivant:
-
.img-fluid
- Cette classe nous permettre de créer des images réactives. L’image sera alors bien adaptée à l’élément parent.
<img src="images/01.jpg" class="img-fluid" alt="Oasis tunisienne">- La classe
.img-fluids’appliquemax-width: 100%;etheight: auto;à l’image. -
Alignement des images
-
Les classes
.float-leftet.float-right. - Cette classe nous permettre de flotter une image à gauche ou à droite.
<img src="images/01.jpg" class="img-thumbnail float-right" alt="Oasis tunisienne">-
La classe
.text-center. - La classe
.text-centernous permettre de centrer l’image sur son parent -
La classe
.d-block. - La classe
.d-block(pour "display : block") nous permettre de changer le type d’affichage de notre image et lui appliquer une marge auto avec la classe.mx-auto. <img src="images/01.jpg" class="img-thumbnail d-block mx-auto" alt="Oasis tunisienne">
Renommé
.img-responsiveen.img-fluid.
Renommé.img-roundeden.rounded.
Renommé.img-circleen.rounded-circle.
Afficher la solution
Faites attention à l’impact de la propriété
floatsur le design général de vos pages.
