Številke

Dokumentacija in primeri za prikaz sorodnih slik in besedila s komponento figure v programu Bootstrap.

Na tej strani

Kadarkoli morate prikazati del vsebine, na primer sliko z neobveznim napisom, razmislite o uporabi <figure>.

Uporabite vključene razrede in .figure, da zagotovite nekaj osnovnih slogov za HTML5 in elemente. Slike na slikah nimajo eksplicitne velikosti, zato ne pozabite dodati razreda svojemu , da bo odziven..figure-img.figure-caption<figure><figcaption>.img-fluid<img>

Napis za zgornjo sliko.

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

Poravnava napisa slike je preprosta z našimi besedilnimi pripomočki .

Napis za zgornjo sliko.

<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

Spremenljivke

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