Vaizdai
Dokumentai ir pavyzdžiai, kaip pasirinkti vaizdams reaguojantį elgesį (kad jie niekada netaptų platesni nei jų tėvai) ir pridėti lengvų stilių – visa tai per klases.
Atsakingi vaizdai
Vaizdai „Bootstrap“ yra pritaikyti naudojant .img-fluid
. Tai taikoma max-width: 100%;
ir height: auto;
vaizdui, kad jo mastelis atitiktų pagrindinį plotį.
<img src="..." class="img-fluid" alt="...">
Vaizdų miniatiūros
Be mūsų kraštinės spindulio paslaugų , galite naudoti .img-thumbnail
norėdami suteikti vaizdui apvalią 1 pikselio kraštinę.
<img src="..." class="img-thumbnail" alt="...">
Vaizdų lygiavimas
Sulygiuokite vaizdus su pagalbinėmis float klasėmis arba teksto lygiavimo klasėmis . block
lygio vaizdus galima centruoti naudojant paraštės .mx-auto
naudingumo klasę .
<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">
<img src="..." class="rounded mx-auto d-block" alt="...">
<div class="text-center">
<img src="..." class="rounded" alt="...">
</div>
Paveikslėlis
Jei naudojate <picture>
elementą, norėdami nurodyti kelis <source>
konkretaus elemento elementus <img>
, būtinai pridėkite .img-*
klases prie žymos, <img>
o ne prie <picture>
žymos.
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>
Sass
Kintamieji
Galimi vaizdų miniatiūrų kintamieji.
$thumbnail-padding: .25rem;
$thumbnail-bg: $body-bg;
$thumbnail-border-width: $border-width;
$thumbnail-border-color: $gray-300;
$thumbnail-border-radius: $border-radius;
$thumbnail-box-shadow: $box-shadow-sm;