Slike

Dokumentacija i primjeri za odabir slika u reaktivnom ponašanju (tako da nikada ne postanu šire od svog roditelja) i dodaju im lagane stilove – sve putem klasa.

Na ovoj stranici

Responsive images

Slike u Bootstrapu su prilagođene sa .img-fluid. Ovo se odnosi max-width: 100%;i height: auto;na sliku tako da se prilagođava širini roditelja.

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

Sličice slika

Kao dodatak našim uslužnim programima radijusa granice , možete koristiti .img-thumbnailda slici date zaobljen izgled granice od 1px.

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

Poravnavanje slika

Poravnajte slike sa pomoćnim plutajućim klasama ili klasama poravnanja teksta . block-nivo slike se mogu centrirati pomoću margine .mx-autokorisnosti klase .

<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 da navedete više <source>elemenata za određeni <img>, pobrinite se da dodate .img-*klase u oznaku <img>, a ne u <picture>oznaku.

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

Sass

Varijable

Dostupne su varijable 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;