Postavy

Dokumentace a příklady pro zobrazení souvisejících obrázků a textu s komponentou obrázek v Bootstrapu.

Na této straně

Kdykoli potřebujete zobrazit obsah – například obrázek s volitelným popiskem, zvažte použití souboru <figure>.

Použijte přiložené .figuretřídy .figure-imga .figure-captionk poskytnutí některých základních stylů pro HTML5 <figure>a <figcaption>prvky. Obrázky v obrázcích nemají žádnou explicitní velikost, takže nezapomeňte přidat .img-fluidtřídu, <img>aby byla responzivní.

Popisek k obrázku výše.

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

Zarovnání popisku obrázku je snadné s našimi textovými nástroji .

Popisek k obrázku výše.

<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

Proměnné

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