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.
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-thumbnail
kako 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 . block
Slike razine mogu se centrirati pomoću klase .mx-auto
korisnosti 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;