Renommé
.img-responsive
en.img-fluid
.
Renommé.img-rounded
en.rounded
.
Renommé.img-circle
en.rounded-circle
.
<img src="images/01.jpg" class="rounded" alt="Oasis tunisienne">
<img src="images/01.jpg" class="rounded-circle" alt="Oasis tunisienne">
<img src="images/01.jpg" class="img-thumbnail" alt="Oasis tunisienne">
<img src="images/01.jpg" class="img-fluid" alt="Oasis tunisienne">
.img-fluid
s’applique max-width: 100%;
et height: auto;
à l’image..float-left
et .float-right
.<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.
.text-center
..text-center
nous permettre de centrer l’image sur son parent.d-block
..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">
Bootstrap donne la possibilité de modifier l’apparence des bordures des images. Il y a
pour cela 3 classes utilisables :
Classe :
<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>
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.
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>
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>