Source

Figuroj

Dokumentado kaj ekzemploj por montri rilatajn bildojn kaj tekston kun la figura komponanto en Bootstrap.

Kiam ajn vi bezonas montri enhavon—kiel bildon kun laŭvola bildoteksto, konsideru uzi <figure>.

Uzu la inkluditajn .figure, .figure-imgkaj .figure-captionklasojn por provizi kelkajn bazliniajn stilojn por la HTML5 <figure>kaj <figcaption>elementoj. Bildoj en figuroj ne havas eksplicitan grandecon, do nepre aldonu la .img-fluidklason al via <img>por ke ĝi respondu.

400x300
Bildoteksto por la supra bildo.
<figure class="figure">
  <img src=".../400x300" 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>

Vicigi la bildotekston de la figuro estas facila kun niaj tekstaj utilecoj .

400x300
Bildoteksto por la supra bildo.
<figure class="figure">
  <img src=".../400x300" 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>