in English
Figurer
Dokumentation og eksempler til visning af relaterede billeder og tekst med figurkomponenten i Bootstrap.
På denne side
Når som helst du har brug for at vise et stykke indhold – som et billede med en valgfri billedtekst, kan du overveje at bruge en <figure>
.
Brug de inkluderede .figure
, .figure-img
og .figure-caption
klasser til at give nogle baseline-stile til HTML5 <figure>
og <figcaption>
elementer. Billeder i figurer har ingen eksplicit størrelse, så sørg for at tilføje .img-fluid
klassen til din <img>
for at gøre den responsiv.
<figure class="figure">
<img src="..." class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
Det er nemt at justere figurens billedtekst med vores tekstværktøjer .
<figure class="figure">
<img src="..." class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption text-end">A caption for the above image.</figcaption>
</figure>
Sass
Variabler
$figure-caption-font-size: $small-font-size;
$figure-caption-color: $gray-600;