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.

Op dëser Säit

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-thumbnailfir 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-autoMargin 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;