Vaizdai

Dokumentai ir pavyzdžiai, kaip pasirinkti vaizdams reaguojantį elgesį (kad jie niekada netaptų didesni už pirminius elementus) ir pridėti lengvų stilių – visa tai per klases.

Šiame puslapyje

Atsakingi vaizdai

Vaizdai „Bootstrap“ yra pritaikyti naudojant .img-fluid. Tai taikoma max-width: 100%;ir height: auto;vaizdui, kad jo mastelis atitiktų pagrindinį elementą.

<img src="..." class="img-fluid" alt="...">

Vaizdų miniatiūros

Be mūsų kraštinės spindulio paslaugų , galite naudoti .img-thumbnailnorė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 . blocklygio vaizdus galima centruoti naudojant paraštės .mx-autonaudingumo 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;