Biller
Dokumentatioun an Beispiller fir Biller a reaktiounsfäeger Verhalen ze wielen (sou datt se ni méi breet ginn wéi hiren Elterendeel) a liichte Stiler derbäi ginn - alles iwwer Klassen.
Reaktiounsfäeger Biller
Biller am Bootstrap gi reaktiounsfäeger mat .img-fluid
. Dëst gëllt max-width: 100%;
a height: auto;
fir d'Bild sou datt et mat der Elterenbreet skaléiert.
<img src="..." class="img-fluid" alt="...">
Bild Miniaturbiller
Zousätzlech zu eise Grenzradius-Utilities , kënnt Dir benotze .img-thumbnail
fir e Bild e gerundeten 1px Grenzoptrëtt ze ginn.
<img src="..." class="img-thumbnail" alt="...">
Ausriichten Biller
Alignéiert Biller mat den Helper Float Klassen oder Text Ausrichtung Klassen . block
-Niveau Biller kënne mat der .mx-auto
Margin Utility Klass zentréiert ginn .
<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>
Bild
Wann Dir d' <picture>
Element benotzt fir e puer <source>
Elementer fir e spezifescht ze spezifizéieren <img>
, gitt sécher datt d' .img-*
Klassen un d' Tag addéieren <img>
an net .<picture>
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>
Sass
Variablen
Variablen si verfügbar fir Miniaturbiller.
$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;