Figuroj

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

Sur ĉi tiu paĝo

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.

Bildoteksto por la supra bildo.

html

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

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

Bildoteksto por la supra bildo.

html

<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

Variabloj

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