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ų.

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 .

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;