Les images en Bootstrap

1. 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

Renommé .img-responsive en .img-fluid.
Renommé .img-rounded en .rounded.
Renommé .img-circle en .rounded-circle.

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:



Afficher la solution

• .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-fluid s’applique max-width: 100%;et height: auto;à l’image.

Alignement des images

1. Les classes .float-left et .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">

Faites attention à l’impact de la propriété float sur le design général de vos pages.

2. La classe .text-center.

• La classe .text-center nous permettre de centrer l’image sur son parent

3. 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">

Encore un peu de pratique

Mise en forme des images

Bootstrap donne la possibilité de modifier l’apparence des bordures des images. Il y a pour cela 3 classes utilisables :
Classe :


• img-rounded Image à coins arrondis
• rounded-circle Image circulaire
• img-thumbnail Image avec liseré blanc
Voici un exemple illustratif de ces trois effets :

Bootstrap

<div class="container">
<div class="col-lg-2">
<img src="img/tigre5.jpg" class="img-rounded">
</div>
 <div class="col-lg-2">
 img src="img/tigre5.jpg" class="rounded-circle">
 </div>
 <div class="col-lg-2">
 <img src="img/tigre5.jpg" class="img-thumbnail">
 </div>
 </div>
 

Ce qui nous donne la figure





Voilà, nous avons vu en détails les possibilités de la grille de Bootstrap. Nous avons aussi étudié la manière de faire des mises en page adaptés
à différents types de supports. Ainsi, le moment est venu pour mettre en application toutes ces connaissances avec des applications pratiques.

Alors sans plus tarder, passons aux choses intéressantes et contemplons tous en ensemble la beauté de Bootstrap.

combinaison des classes col-*

Nous avons vu des mises en page utilisant sélectivement les classes pour les colonnes prévues pour les différents formats de supports. Nous allons à présent envisager leur combinaison pour gérer certains cas. Dans la page à réaliser, je veux avoir des petites photos côte à côte. Supposons que je parte de cette structure pour cette partie de la page :

Supposons que je veuille affciher les images sur ma page. Je souhaite en afficher six sur une même colonne sur un grand écran et deux sur une même colone sur un écran réduit

Alors comment et quoi faire? Il suffit tout simplement de combiner les classes col-* en fonction de la taille de l'écran

Déjà nous savons que le système de grilles nous dit que nous avons 12 colonnes. Comme nous voulons afficher qsix images sur un grand écran, nous allons diviser
douze par six; ce qui nous donne deux. Donc pour un grand écran, nous ferons col-lg-2 pour chaque image. Ce qui signifie que chaque image occupera deux colonnes sur les douze

Pour plus de précision et de compréhension, observons l'exemple suivant :

    <section class="row">
    <div class="col-xs-4 col-sm-3 col-md-2 col-6 item active"> <img src="img/tigre1.jpg" alt="Tigre" class="img-thumbnail"> </div>
    <div class="col-xs-4 col-sm-3 col-md-2 col-6"> <img src="img/tigre2.jpg" alt="Tigre" class="img-thumbnail"> </div>
    <div class="col-xs-4 col-sm-3 col-md-2 col-6"> <img src="img/tigre3.jpg" alt="Tigre" class="img-thumbnail"> </div>
    <div class="col-xs-4 col-sm-3 col-md-2 col-6"> <img src="img/tigre4.jpg" alt="Tigre" class="img-thumbnail"> </div>
    <div class="col-xs-4 col-sm-3 col-md-2 col-6"> <img src="img/tigre5.jpg" alt="Tigre" class="img-thumbnail"> </div>
    <div class="col-xs-4 col-sm-3 col-md-2 col-6"> <img src="img/tigre6.jpg" alt="Tigre" class="img-thumbnail"> </div>
    <div class="col-xs-4 col-sm-3 col-md-2 col-6"> <img src="img/tigre7.jpg" alt="Tigre" class="img-thumbnail"> </div>
    <div class="col-xs-4 col-sm-3 col-md-2 col-6"> <img src="img/tigre8.jpg" alt="Tigre" class="img-thumbnail"> </div>
    <div class="col-xs-4 col-sm-3 col-md-2 col-6"> <img src="img/tigre9.jpg" alt="Tigre" class="img-thumbnail"> </div>
    <div class="col-xs-4 col-sm-3 col-md-2 col-6"> <img src="img/tigre10.jpg" alt="Tigre" class="img-thumbnail"> </div>
    <div class="col-xs-4 col-sm-3 col-md-2 col-6"> <img src="img/tigre11.jpg" alt="Tigre" class="img-thumbnail"> </div>
    <div class="col-xs-4 col-sm-3 col-md-2 col-6"> <img src="img/tigre12.jpg" alt="Tigre" class="img-thumbnail"> </div><br>
    <h1 class="carousel-caption text-danger"> </h1>
    </section>
  

Résultat































Cette fois-ci jee souhaite en afficher seulement qautre sur une même colonne sur un grand écran et deux sur une même colone sur un écran réduit

Pour plus de précision et de compréhension, observons l'exemple suivant :

    <section class="row">
    <div class="col-lg-3 col-sm-3 col-md-3 col-6 item active"> <img src="img/tigre1.jpg" alt="Tigre" class="img-thumbnail"> </div>
    <div class="col-lg-3 col-sm-3 col-md-3 col-6"> <img src="img/tigre2.jpg" alt="Tigre" class="img-thumbnail"> </div>
    <div class="col-lg-3 col-sm-3 col-md-3 col-6"> <img src="img/tigre3.jpg" alt="Tigre" class="img-thumbnail"> </div>
    <div class="col-lg-3 col-sm-3 col-md-3 col-6"> <img src="img/tigre4.jpg" alt="Tigre" class="img-thumbnail"> </div>
    <div class="col-lg-3 col-sm-3 col-md-3 col-6"> <img src="img/tigre5.jpg" alt="Tigre" class="img-thumbnail"> </div>
    <div class="col-lg-3 col-sm-3 col-md-3 col-6"> <img src="img/tigre6.jpg" alt="Tigre" class="img-thumbnail"> </div>
    <div class="col-lg-3 col-sm-3 col-md-3 col-6"> <img src="img/tigre7.jpg" alt="Tigre" class="img-thumbnail"> </div>
    <div class="col-lg-3 col-sm-3 col-md-3 col-6"> <img src="img/tigre8.jpg" alt="Tigre" class="img-thumbnail"> </div>
    <div class="col-lg-3 col-sm-3 col-md-3 col-6"> <img src="img/tigre9.jpg" alt="Tigre" class="img-thumbnail"> </div>
    <div class="col-lg-3 col-sm-3 col-md-3 col-6"> <img src="img/tigre10.jpg" alt="Tigre" class="img-thumbnail"> </div>
    <div class="col-lg-3 col-sm-3 col-md-3 col-6"> <img src="img/tigre11.jpg" alt="Tigre" class="img-thumbnail"> </div>
    <div class="col-lg-3 col-sm-3 col-md-3 col-6"> <img src="img/tigre12.jpg" alt="Tigre" class="img-thumbnail"> </div><br>
    <h1 class="carousel-caption text-danger"> </h1>
    </section>
  

Résultat




























Précédent
Suivant