Awọn isiro

Iwe ati awọn apẹẹrẹ fun iṣafihan awọn aworan ti o jọmọ ati ọrọ pẹlu paati eeya ni Bootstrap.

Lori iwe yi

Nigbakugba ti o nilo lati ṣe afihan nkan ti akoonu — bii aworan pẹlu akọle yiyan, ronu nipa lilo faili <figure>.

Lo awọn to wa .figure, .figure-imgati .figure-captionawọn kilasi lati pese diẹ ninu awọn aza laini fun HTML5 <figure>ati <figcaption>awọn eroja. Awọn aworan ni awọn isiro ko ni iwọn ti o fojuhan, nitorinaa rii daju lati ṣafikun .img-fluidkilasi naa si rẹ <img>lati jẹ ki o ṣe idahun.

Akọle fun aworan ti o wa loke.

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

Iṣatunṣe akọle eeya naa rọrun pẹlu awọn ohun elo ọrọ wa .

Akọle fun aworan ti o wa loke.

<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

Awọn oniyipada

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