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.
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-thumbnail
da 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-auto
korisnosti 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;