Source

Ábrák

Dokumentáció és példák kapcsolódó képek és szövegek megjelenítéséhez a Bootstrap ábra komponensével.

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.

400x300
Felirat a fenti képhez.
<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

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

400x300
Felirat a fenti képhez.
<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
  <figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
</figure>