BOOTSTRAP LES IMAGES

Les images responsives

Bootstrap utilise par défaut des images responsives qui vont donc s’adapter aux
tailles des écrans de diffusion.
Voici le code d’un exemple simple d’une image insérée dans une grille :

<div class="container">
<div class="row">
<div class="col">
<p>Une photo de Venise :</p>
<img src="venise.jpg" class="img-fluid" alt="Un canal à Venise">
</div>
</div>
</div>
L’image occupe toute la place disponible dans la colonne.
Sur un petit écran, l’image occupe aussi toute la place disponible dans la colonne
mais elle est réduite proportionnellement
Voici la règle CSS de la classe .img-fluid :
.img-fluid {
max-width: 100%;
height: auto;
}

Les bordures de l’image

La classe .img-thumbnail permet d’afficher une bordure fine et des coins arrondis à
une image qui reste responsive :
<div class="row">
<div class="col">
<p>La même photo de Venise, avec une fine bordure :</p>
<img src="venise.jpg" class="img-thumbnail" alt="Un canal à Venise">
</div>
</div>
Voici la règle CSS de la classe .img-thumbnail :
.img-thumbnail {
padding: .25rem;
background-color: #fff;
border: 1px solid #dee2e6;
border-radius: .25rem;
max-width: 100%;
height: auto;
}

1
Aligner les images

Les classes .float-right et .float-left permettent d’aligner à droite et à gauche, les

images dans une même colonne d’une grille.
Voici le code de cet exemple simple :
<div class="row">
<div class="col">
<img src="dorsoduro-01.jpg" class="float-left" alt="Dorsoduro à
Venise">
<img src="dorsoduro-02.jpg" class="float-right" alt="Dorsoduro à
Venise">
</div>
</div>
Voici les règles CSS des classes utilisées :
.float-left {
float: left!important;
}
.float-right {
float: right!important;
}
Vous pouvez centrer une image avec la classe .text-center appliquée à la
colonne <div class="col text-center"> :
<div class="row">
<div class="col text-center">
<img src="dorsoduro-03.jpg" class="rounded" alt="Dorsoduro à
Venise">
</div>
</div>

Voici la règle CSS de la classe .text-center :

.text-center {
text-align: center!important;
}

Les sources des images

Dans le design de vos sites web, vous pouvez souhaiter prendre en considération les
types d’écrans de vos visiteurs. Ceux-ci peuvent avoir des écrans standards ou des
écrans à haute définition. Pour ces derniers il faut prévoir des images à haute
définition aussi. Pour mettre en place cette dualité, vous devez utiliser les
éléments <picture>, <source> et <img>.

2
Voici une structure simple :

<picture>
<source srcset="venise-hd.jpg" type="image/svg+xml">
<img src="venise.jpg" class="img-fluid img-thumbnail" alt="Venise">
</picture>

● Tous les éléments sont insérés dans l’élément <picture>.

● L’image à haute définition est placée dans l’élément <source>.

● L’image standard est placée dans l’élément classique <img>.

Les figures

Les figures dans l’élément <figure>, comportent l’image dans l’élément <img>, et sa
légende dans l’élément <figcaption>.
Voici la structure de cet exemple :
<div class="row">
<div class="col text-center">
<figure class="figure">
<img src="dorsoduro-01.jpg" class="figure-img img-fluid rounded"
alt="Venise">
<figcaption class="figure-caption">Basilique Santa Maria della
Salute.</figcaption>
</figure>
</div>
</div>

L’élément <figure> utilise la classe .figure, que l’image <img> utilise notamment la
classe .figure-img et que l’élément <figcaption> utilise la classe .figure-caption.
Voici les classes utilisées pour cette mise en forme :
.figure {
display: inline-block;
}
.figure-img {
margin-bottom: .5rem;
line-height: 1;
}
.figure-caption {
font-size: 90%;
color: #6c757d;
}
article, aside, dialog, figcaption, figure, footer, header,
3
 hgroup, main, nav, section {
display: block; }

Les carroussels

1. Un carroussel simple
Un carroussel avec un défilement automatique des images.
<div id="venise" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="dorsoduro-01.jpg"
alt="Dorsoduro">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="dorsoduro-02.jpg"
alt="Dorsoduro">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="dorsoduro-03.jpg"
alt="Dorsoduro">
</div>
</div>
</div>
Le conteneur général est une boîte <div> ayant un identifiant et une classe
dédiée : <div id="venise" class="carousel slide" data-ride="carousel">.
Le carousel en lui-même est dans une boîte <div> avec aussi une classe
dédiée : <div class="carousel-inner">.
Ensuite, chaque image est placée dans une nouvelle boîte <div>, avec la
classe .carousel-item. Notez que la première image du carousel a en plus la
classe .active.
Chaque image est insérée dans un élément classique <img>, avec la classe
dédiée .d-block. La classe .w-100 permet d’indiquer que l’image doit occuper 100%
de la place disponible dans son conteneur.
Un carroussel avec des boutons de contrôle
Pour ce deuxième exemple, nous allons ajouter des boutons de contrôle afin que les
visiteurs puissent naviguer à leur guise entre les images. Nous afficherons aussi des
indicateurs d’ordre pour l’affichage des images.
Voici le code utilisé :

4
<div id="venise-btn" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#venise-btn" data-slide-to="0" class="active"></li>
<li data-target="#venise-btn" data-slide-to="1"></li>
<li data-target="#venise-btn" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="dorsoduro-01.jpg" alt Dorsoduro">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="dorsoduro-02.jpg" alt="Dorsoduro">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="dorsoduro-03.jpg" alt="Dorsoduro">
</div>
</div>
<a class="carousel-control-prev" href="#venise-btn" role="button" data-slide ="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Précédent</span>
</a>
<a class="carousel-control-next" href="#venise-btn" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Suivant</span>
</a>
</div>
Nous avons la même structure que précédemment pour le carroussel.
Juste après la balise d’ouverture du conteneur général, nous avons une liste <ol> qui
permet d’afficher un tiret long par défaut pour indiquer le numéro d’ordre de l’image.
Avant la fermeture du conteneur général, nous avons deux liens <a>. Ces liens
utilisent les classes dédiées .carousel-control-prev et .carousel-control-next.
L’attribut href reprend pour valeur l’identifiant du conteneur général.
Dans les liens <a>, nous avons deux éléments <span> qui permettent d’afficher les
icônes des boutons précédent et suivant.

5
3. Un carroussel avec des légendes
Pour parfaire l’affichage du carroussel, nous pouvons insérer des légendes pour
chaque image, avec une boîte <div class="carousel-caption d-none d-md-block">.
Voici le code de cet exemple :
<div id="venise-legende" class="carousel slide"
data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="dorsoduro-01.jpg"
alt="Dorsoduro">
<div class="carousel-caption">
<h5>Basilique Santa Maria della Salute</h5>
<p>Vue de la rive opposée</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="dorsoduro-02.jpg"
alt="Dorsoduro">
<div class="carousel-caption">
<h5>Fin du Grand Canal</h5>
<p>Vu de Santa Maria della Salute</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100"
src="dorsoduro-03.jpg" alt="Dorsoduro">
<div class="carousel-caption">
<h5>Des gondoles à Santa Maria della Salute</h5>
<p>Vue sur le parvis</p>
</div>
</div>
</div>
</div>
Pour avoir ces légendes, il suffit d’ajouter une boîte <div> sous chaque image. Cette
boîte <div> utilise la classe dédiée .carousel-caption. Dans cette boîte <div>, vous
pouvez insérer n’importe quel élément HTML.

TP
1. Récupérer le squelette tp1.html
2. Télécharger 8 images d’un thème (plantes,animaux,voitures…)
3. Créer une page tp1.html avec une galerie photo avec 1 à 4 images par ligne
selon les écrans (LG 4 images MD 3 SM 2 sinon on empile)
4. Créer un carrousel tp2.html avec ces photos

6
5. Déposez une archive avec les deux sources HTML et les photos