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.
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.
<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.
<img src="..." class="img-thumbnail" alt="...">
Poravnava slik
Poravnajte slike s pomožnimi lebdečimi razredi ali razredi za poravnavo besedila . block
Slike na nivoju se lahko centrirajo z uporabo razreda .mx-auto
uporabnosti 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
Č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: $gray-300;
$thumbnail-border-radius: $border-radius;
$thumbnail-box-shadow: $box-shadow-sm;