Source

Syfers

Dokumentasie en voorbeelde vir die vertoon van verwante beelde en teks met die figuurkomponent in Bootstrap.

Enige tyd wat jy 'n stukkie inhoud moet vertoon—soos 'n prent met 'n opsionele onderskrif, oorweeg dit om 'n <figure>.

Gebruik die ingeslote .figure, .figure-imgen .figure-captionklasse om 'n paar basislynstyle vir die HTML5 <figure>en <figcaption>elemente te verskaf. Prente in figure het geen eksplisiete grootte nie, so maak seker dat jy die .img-fluidklas by jou voeg <img>om dit responsief te maak.

400 x 300
'n Onderskrif vir die bogenoemde prent.
<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>

Om die figuur se opskrif in lyn te bring is maklik met ons tekshulpprogramme .

400 x 300
'n Onderskrif vir die bogenoemde prent.
<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>