Ábrák

Bármikor meg kell jelenítenie egy tartalmat – például egy képet opcionális felirattal, fontolja meg a <figure>.

Használja a mellékelt .figure, .figure-imgés .figure-captionosztályokat, hogy megadjon néhány alapstílust a HTML5 -höz <figure>és az <figcaption>elemekhez. Az ábrákon szereplő képeknek nincs kifejezett mérete, ezért ügyeljen arra, hogy adja hozzá az .img-fluidosztályt, <img>hogy érzékeny legyen.

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

Az ábra feliratának igazítása szöveges segédprogramjainkkal egyszerű .

<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

Változók

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