Pereiti prie pagrindinio turinio Pereiti prie dokumentų naršymo
in English

Figūros

Dokumentacija ir pavyzdžiai, kaip rodyti susijusius vaizdus ir tekstą su figūros komponentu „Bootstrap“.

Šiame puslapyje

Kaskart, kai reikia rodyti turinio dalį, pvz., vaizdą su pasirenkama antrašte, apsvarstykite galimybę naudoti <figure>.

Naudokite įtrauktas .figure, .figure-imgir .figure-captionklases, kad pateiktumėte kai kuriuos pradinius HTML5 <figure>ir <figcaption>elementų stilius. Paveikslėliai neturi aiškaus dydžio, todėl būtinai pridėkite .img-fluidklasę prie savo <img>, kad ji atitiktų.

Placeholder 400x300
Antraštė aukščiau pateiktam paveikslėliui.
<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

Paveikslo antraštę sulygiuoti paprasta naudojant mūsų teksto priemones .

Placeholder 400x300
Antraštė aukščiau pateiktam paveikslėliui.
<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

Kintamieji

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