Gean nei haadynhâld Gean nei dokumintnavigaasje
in English

Ofbyldings

Dokumintaasje en foarbylden foar it kiezen fan ôfbyldings foar responsyf gedrach (sadat se nea breder wurde as har âlder) en foegje ljochte stilen ta oan har - allegear fia klassen.

Responsive ôfbyldings

Ofbyldings yn Bootstrap wurde responsyf makke mei .img-fluid. Dit jildt max-width: 100%;en height: auto;foar de ôfbylding sadat it skalen mei de âlder breedte.

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

Miniatuerbylden

Neist ús nutsfoarsjenningen foar grinsradius kinne jo gebrûk .img-thumbnailmeitsje om in ôfbylding in rûne 1px-rânúterlik te jaan.

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="...">

Ofbyldings oanpasse

Ofbyldings ôfstimme mei de helper-float-klassen as tekst-ôfstimmingsklassen . block-nivo-ôfbyldings kinne sintraal wurde mei de .mx-automarzje- nutsklasse .

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>

Ofbylding

As jo ​​​​it <picture>elemint brûke om meardere <source>eleminten foar in spesifyk op te jaan <img>, soargje derfoar dat jo de .img-*klassen tafoegje oan 'e <img>en net oan' e <picture>tag.

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

Sass

Fariabelen

Fariabelen binne beskikber foar ôfbyldingsminiatueren.

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