Figury

Dokumentacja i przykłady wyświetlania powiązanych obrazów i tekstu z komponentem figury w Bootstrap.

Na tej stronie

Za każdym razem, gdy chcesz wyświetlić jakąś treść, np. obraz z opcjonalnym podpisem, rozważ użycie <figure>.

Użyj klas include i .figure, aby zapewnić style bazowe dla HTML5 i elementów. Obrazy na rysunkach nie mają określonego rozmiaru, więc pamiętaj, aby dodać klasę do swojej , aby była responsywna..figure-img.figure-caption<figure><figcaption>.img-fluid<img>

Podpis do powyższego obrazu.

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

Dzięki naszym narzędziom tekstowym wyrównanie podpisu pod rysunkiem jest łatwe .

Podpis do powyższego obrazu.

<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

Zmienne

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