in English
Figuren
Documentatie en voorbeelden voor het weergeven van gerelateerde afbeeldingen en tekst met de figuurcomponent in Bootstrap.
Op deze pagina
Telkens wanneer u een stuk inhoud moet weergeven, zoals een afbeelding met een optioneel bijschrift, kunt u overwegen een <figure>
.
Gebruik de meegeleverde .figure
, .figure-img
en .figure-caption
klassen om enkele basislijnstijlen voor de HTML5 <figure>
en <figcaption>
elementen te bieden. Afbeeldingen in figuren hebben geen expliciete grootte, dus zorg ervoor dat u de .img-fluid
klasse aan uw klasse toevoegt <img>
om deze responsief te maken.
<figure class="figure">
<img src="..." class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
Het uitlijnen van het bijschrift van de figuur is eenvoudig met onze teksthulpprogramma's .
<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
Variabelen
$figure-caption-font-size: $small-font-size;
$figure-caption-color: $gray-600;