in English

Imagini

Documentație și exemple pentru alegerea imaginilor într-un comportament receptiv (astfel încât să nu devină niciodată mai mari decât elementele lor părinte) și să le adauge stiluri ușoare, toate prin intermediul claselor.

Pe aceasta pagina

Imagini receptive

Imaginile din Bootstrap sunt adaptate cu .img-fluid. Acest lucru se aplică max-width: 100%;și height: auto;imaginii, astfel încât să se scaleze cu elementul părinte.

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

Miniaturi de imagine

În plus față de utilitățile noastre pentru raza de frontieră , puteți folosi .img-thumbnailpentru a da unei imagini un aspect de chenar rotunjit de 1 px.

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

Alinierea imaginilor

Aliniați imaginile cu clasele helper float sau cu clasele de aliniere a textului . blockImaginile -level pot fi centrate folosind clasa .mx-autode utilitate 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>

Imagine

Dacă utilizați <picture>elementul pentru a specifica mai multe <source>elemente pentru un anumit <img>, asigurați-vă că adăugați .img-*clasele la etichetă <img>și nu la <picture>etichetă.

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

Sass

Variabile

Variabilele sunt disponibile pentru miniaturile imaginilor.

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