Figures

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

A wannan shafi

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.

Taken hoto na sama.

<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <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 .

Taken hoto na sama.

<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

Masu canji

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