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-img
ir .figure-caption
klases, 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-fluid
klasę prie savo <img>
, kad ji atitiktų.
<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 .
<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;