Mga figure

Dokumentasyon at mga halimbawa para sa pagpapakita ng mga kaugnay na larawan at teksto na may bahagi ng figure sa Bootstrap.

Sa pahinang ito

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>para gawin itong tumutugon.

Isang caption para sa larawan sa itaas.

<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 ng caption ng figure ay madali sa aming mga text utilities .

Isang caption para sa larawan sa itaas.

<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;