Skaitļi

Ikreiz, kad nepieciešams parādīt satura daļu, piemēram, attēlu ar neobligātu parakstu, apsveriet iespēju izmantot <figure>.

Izmantojiet iekļautās .figure, .figure-imgun .figure-captionklases, lai nodrošinātu dažus bāzes stilus HTML5 <figure>un <figcaption>elementiem. Attēliem attēlos nav precīza izmēra, tāpēc noteikti pievienojiet .img-fluidklasi savai klasei, lai <img>tā būtu atsaucīga.

<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

Attēla parakstu līdzināšana ir vienkārša, izmantojot mūsu teksta utilītas .

<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

Mainīgie lielumi

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