Myndir
Skjöl og dæmi um að velja myndir í móttækilegri hegðun (svo þær verði aldrei stærri en foreldri þættir þeirra) og bæta léttum stíl við þær - allt í gegnum flokka.
Móttækilegar myndir
Myndir í Bootstrap eru gerðar móttækilegar með .img-fluid
. Þetta á við max-width: 100%;
og height: auto;
um myndina þannig að hún skalast við móðurþáttinn.
<img src="..." class="img-fluid" alt="...">
Smámyndir
Til viðbótar við landamæraradíus tólin okkar geturðu notað .img-thumbnail
til að gefa mynd ávöl 1px rammaútlit.
<img src="..." class="img-thumbnail" alt="...">
Samræma myndir
Stilltu myndir við hjálparflotaflokka eða textajöfnunarflokka . Hægt er að miðja myndir á stigi með því aðblock
nota spássíugagnaflokkinn ..mx-auto
<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>
Mynd
Ef þú ert að nota <picture>
þáttinn til að tilgreina marga <source>
þætti fyrir tiltekið <img>
, vertu viss um að bæta .img-*
flokkunum við en <img>
ekki við <picture>
merkið.
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>
Sass
Breytur
Breytur eru fáanlegar fyrir smámyndir.
$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;