Mga figure

Anumang oras na kailangan mong magpakita ng isang piraso ng nilalaman—tulad ng isang larawang may opsyonal na caption, isaalang-alang ang paggamit ng <figure>.

Gamitin ang kasama .figure, .figure-imgat mga .figure-captionklase upang magbigay ng ilang mga istilo ng baseline para sa HTML5 <figure>at mga <figcaption>elemento. Ang mga larawan sa mga figure ay walang tahasang laki, kaya siguraduhing idagdag ang .img-fluidklase sa iyong <img>upang gawin itong tumutugon.

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

Ang pag-align sa caption ng figure ay madali sa aming mga text utilities .

<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

Mga variable

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