Figuren

Jedes Mal, wenn Sie einen Inhalt anzeigen müssen, z. B. ein Bild mit einer optionalen Beschriftung, sollten Sie die Verwendung einer <figure>.

Verwenden Sie die enthaltenen .figure, .figure-imgund .figure-caption-Klassen, um einige grundlegende Stile für HTML5 <figure>und <figcaption>-Elemente bereitzustellen. Bilder in Abbildungen haben keine explizite Größe, fügen Sie also unbedingt die .img-fluidKlasse zu Ihrer hinzu <img>, damit sie reagiert.

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

Das Ausrichten der Bildunterschrift ist mit unseren Textdienstprogrammen ganz einfach .

<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

Variablen

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