Syfers

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.

<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 .

<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;