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

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

Placeholder Responsive image
<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ę.

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera 200x200
<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ę .

Placeholder 200x200 Placeholder 200x200
<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">
Placeholder 200x200
<img src="..." class="rounded mx-auto d-block" alt="...">
Placeholder 200x200
<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;