Képek

Dokumentáció és példák a képek reszponzív viselkedésre való beállításához (hogy soha ne váljanak szélesebbekké, mint a szülőjük), és könnyű stílusokat adjon hozzájuk – mindezt osztályokon keresztül.

Ezen az oldalon

Reszponzív képek

A Bootstrap képei reszponzívvá lettek a segítségével .img-fluid. Ez vonatkozik max-width: 100%;a height: auto;képre, így az a szülő szélességéhez igazodik.

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

Kép miniatűrök

A szegélysugár segédprogramjaink mellett .img-thumbnaila képnek lekerekített, 1 képpontos szegélyt adhat.

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

Képek igazítása

Igazítsa a képeket a segédlebegő osztályokhoz vagy a szövegigazítási osztályokhoz . block-szintű képek középre igazíthatók a .mx-automargó hasznossági osztály használatával .

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

Kép

Ha az <picture>elemet több <source>elem megadására használja egy adott <img>, akkor ügyeljen arra, hogy az .img-*osztályokat a címkéhez adja hozzá, <img>és ne a <picture>címkéhez.

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

Sass

Változók

Változók állnak rendelkezésre a miniatűrökhöz.

$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;