Képek
Dokumentáció és példák a képek reszponzív viselkedésre való beállításához (hogy soha ne legyenek nagyobbak, mint a szülőelemeik), és könnyű stílusokat adjon hozzájuk – mindezt osztályokon keresztül.
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őelemmel méretezett.
<img src="..." class="img-fluid" alt="...">
Kép miniatűrök
A szegélysugár segédprogramjaink mellett .img-thumbnail
a 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-auto
margó 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;