Slike

Dokumentacija in primeri za izbiro odzivnega vedenja slik (tako da nikoli ne postanejo širše od nadrejenega) in jim dodajanje lahkih slogov – vse prek razredov.

Na tej strani

Odzivne slike

Slike v Bootstrapu so narejene odzivne z .img-fluid. To velja max-width: 100%;za height: auto;sliko, tako da se spreminja glede na nadrejeno širino.

html

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

Sličice slik

Poleg naših pripomočkov za polmer obrobe lahko uporabite, .img-thumbnailče želite sliki dati zaokrožen videz obrobe 1 slikovne pike.

html

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

Poravnava slik

Poravnajte slike s pomožnimi lebdečimi razredi ali razredi za poravnavo besedila . blockSlike na nivoju se lahko centrirajo z uporabo razreda .mx-autouporabnosti margine .

html

<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">

html

<img src="..." class="rounded mx-auto d-block" alt="...">

html

<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

Slika

Če uporabljate <picture>element za določanje več <source>elementov za določeno <img>, se prepričajte, da dodate .img-*razrede v <img>in ne v <picture>oznako.

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

Sass

Spremenljivke

Spremenljivke so na voljo za sličice slik.

$thumbnail-padding:                 .25rem;
$thumbnail-bg:                      $body-bg;
$thumbnail-border-width:            $border-width;
$thumbnail-border-color:            var(--#{$prefix}border-color);
$thumbnail-border-radius:           $border-radius;
$thumbnail-box-shadow:              $box-shadow-sm;