Saltatu eduki nagusira Saltatu dokumentuen nabigaziora
in English

Irudiak

Irudiak jokabide onean aukeratzeko dokumentazioa eta adibideak (beraz, ez dira inoiz haien elementu nagusiak baino handiagoak izan) eta estilo arinak gehitzeko, klaseen bidez.

Irudi sentikorrak

Bootstrap-eko irudiak responsive-rekin egiten dira .img-fluid. Hau max-width: 100%;eta height: auto;irudiari aplikatzen zaio, elementu nagusiarekin eskala dezan.

Placeholder Responsive image
<img src="..." class="img-fluid" alt="...">

Irudi txikiak

Gure ertz-erradio utilitateez.img-thumbnail gain, irudi bati 1px ertz itxura biribildua emateko erabil dezakezu .

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera 200x200
<img src="..." class="img-thumbnail" alt="...">

Irudiak lerrokatzea

Lerrokatu irudiak flotatzaile laguntzaileen klaseekin edo testua lerrokatzeko klaseekin . block-level irudiak zentratu daitezke margin utility class erabiliz ..mx-auto

Placeholder 200x200 Placeholder 200x200
<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">
Placeholder 200x200
<img src="..." class="rounded mx-auto d-block" alt="...">
Placeholder 200x200
<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

Irudia

Elementua elementu bat <picture>baino gehiago zehazteko erabiltzen ari bazara , ziurtatu klaseak etiketara gehitzen dituzula eta ez .<source><img>.img-*<img><picture>

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

Sass

Aldagaiak

Irudi txikietarako aldagaiak daude eskuragarri.

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