Slaan oor na hoofinhoud Slaan oor na dokumentnavigasie
Check
in English

Syfers

Dokumentasie en voorbeelde vir die vertoon van verwante beelde en teks met die figuurkomponent in Bootstrap.

Op hierdie bladsy

Enige tyd wat jy 'n stukkie inhoud moet vertoon—soos 'n prent met 'n opsionele onderskrif, oorweeg dit om 'n <figure>.

Gebruik die ingeslote .figure, .figure-imgen .figure-captionklasse om 'n paar basislynstyle vir die HTML5 <figure>en <figcaption>elemente te verskaf. Prente in figure het geen eksplisiete grootte nie, so maak seker dat jy die .img-fluidklas by jou voeg <img>om dit responsief te maak.

Placeholder 400x300
'n Onderskrif vir die bogenoemde prent.
html
<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

Om die figuur se byskrif in lyn te bring is maklik met ons tekshulpprogramme .

Placeholder 400x300
'n Onderskrif vir die bogenoemde prent.
html
<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

Veranderlikes

$figure-caption-font-size:          $small-font-size;
$figure-caption-color:              $gray-600;