Les figures FIGURES:Gérer

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> 

Notez que 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. Toutes ces classes participent à l’élaboration de la mise en forme.

Voici l’affichage obtenu :

images/C05-006.png

Voici les classes utilisées pour cette mise en forme :

.figure { 
        display: inline-block; 
} 
.figure-img { 
     ...
Pour consulter la suite, découvrez le livre suivant :
couv_OW24BOO.png
60-signet.svg
En version papier
20-ecran_lettre.svg
En version numérique
41-logo_abonnement.svg
En illimité avec l'abonnement ENI
130-boutique.svg
Sur la boutique officielle ENI
Précédent
Les sources des images
Suivant
Les carousels