Slike

Dokumentacija i primjeri za uključivanje slika u responzivno ponašanje (tako da nikad ne postanu šire od svog roditelja) i dodavanje laganih stilova—sve putem klasa.

Na ovoj stranici

Responzivne slike

Slike u Bootstrapu su responzivne pomoću .img-fluid. Ovo se odnosi max-width: 100%;i height: auto;na sliku tako da se skalira s matičnom širinom.

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

Sličice slika

Uz naše pomoćne programe radijusa obruba , možete koristiti .img-thumbnailkako biste slici dali izgled zaobljenog obruba od 1 px.

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

Poravnavanje slika

Poravnajte slike s pomoćnim klasama float ili klasama za poravnanje teksta . blockSlike razine mogu se centrirati pomoću klase .mx-autokorisnosti margine .

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

Slika

Ako koristite <picture>element za određivanje više <source>elemenata za određeni <img>, svakako dodajte .img-*klase u <img>a ne u <picture>oznaku.

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

Sass

Varijable

Varijable su dostupne za sličice slika.

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