Slaan oor na hoofinhoud Slaan oor na dokumentnavigasie
Check
in English

Beelde

Dokumentasie en voorbeelde vir die keuse van beelde in responsiewe gedrag (sodat hulle nooit wyer as hul ouer word nie) en voeg liggewigstyle daarby – alles via klasse.

Responsiewe beelde

Prente in Bootstrap word reageer met .img-fluid. Dit geld max-width: 100%;en height: auto;vir die beeld sodat dit skaal met die ouerwydte.

Placeholder Responsive image
html
<img src="..." class="img-fluid" alt="...">

Prent-kleinkiekies

Benewens ons grensradius-hulpmiddels , kan jy gebruik .img-thumbnailom 'n prent 'n afgeronde 1px-randvoorkoms te gee.

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera 200x200
html
<img src="..." class="img-thumbnail" alt="...">

Belyn beelde

Belyn beelde met die helper-float-klasse of teksbelyningsklasse . block-vlak beelde kan gesentreer word met behulp van die .mx-automarge-nutsklas .

Placeholder 200x200 Placeholder 200x200
html
<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">
Placeholder 200x200
html
<img src="..." class="rounded mx-auto d-block" alt="...">
Placeholder 200x200
html
<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

Prent

As jy die <picture>element gebruik om veelvuldige <source>elemente vir 'n spesifieke , te spesifiseer <img>, maak seker dat jy die .img-*klasse by die <img>en nie by die <picture>merker voeg nie.

<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>

Sass

Veranderlikes

Veranderlikes is beskikbaar vir prent-kleinkiekies.

$thumbnail-padding:                 .25rem;
$thumbnail-bg:                      $body-bg;
$thumbnail-border-width:            $border-width;
$thumbnail-border-color:            var(--#{$prefix}border-color);
$thumbnail-border-radius:           $border-radius;
$thumbnail-box-shadow:              $box-shadow-sm;