Source

Mga figure

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

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.

400x300
Isang caption para sa larawan sa itaas.
<figure class="figure">
  <img src=".../400x300" 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>

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

400x300
Isang caption para sa larawan sa itaas.
<figure class="figure">
  <img src=".../400x300" 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>