Cov duab

Cov ntaub ntawv thiab cov piv txwv rau kev nthuav tawm cov duab ntsig txog thiab cov ntawv nyeem nrog daim duab hauv Bootstrap.

Ntawm nplooj ntawv no

Txhua lub sij hawm koj xav tau los tso saib ib qho ntawm cov ntsiab lus-xws li cov duab nrog ib qho kev xaiv kab lus, xav txog kev siv <figure>.

Siv cov suav nrog .figure, .figure-imgthiab .figure-captioncov chav kawm los muab qee cov qauv hauv qab rau HTML5 <figure>thiab <figcaption>cov ntsiab lus. Cov duab hauv cov duab tsis muaj qhov loj me, yog li nco ntsoov ntxiv cov .img-fluidchav kawm rau koj <img>kom nws teb tau.

Ib kab lus rau daim duab saum toj no.

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>

Aligning daim duab lub npe yog ib qho yooj yim nrog peb cov ntawv siv hluav taws xob .

Ib kab lus rau daim duab saum toj no.

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

Hloov pauv

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