Source

Figures

Takaddun bayanai da misalai don nuna hotuna masu alaƙa da rubutu tare da ɓangaren adadi a cikin Bootstrap.

Duk lokacin da kuke buƙatar nuna guntun abun ciki-kamar hoto tare da taken zaɓi, yi la'akari da amfani da <figure>.

Yi amfani da haɗaɗɗen .figure, .figure-imgda .figure-captionazuzuwan don samar da wasu salo na asali don HTML5 <figure>da <figcaption>abubuwa. Hotunan da ke cikin adadi ba su da takamaiman girman, don haka tabbatar da ƙara .img-fluidajin zuwa gare ku <img>don sa ya zama mai karɓa.

400x300
Taken hoto na sama.
<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>

Daidaita taken adadi yana da sauƙi tare da kayan aikin mu na rubutu .

400x300
Taken hoto na sama.
<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>