Pāriet uz galveno saturu Pāriet uz dokumentu navigāciju
in English

Attēli

Dokumentācija un piemēri attēlu izvēlei reaģējošai darbībai (lai tie nekad nekļūtu lielāki par to pamatelementiem) un pievienotu tiem vieglus stilus — tas viss notiek, izmantojot klases.

Atsaucīgi attēli

Attēli programmā Bootstrap ir pielāgoti, izmantojot .img-fluid. Tas attiecas max-width: 100%;uz height: auto;attēlu, lai tas mērogotos ar vecākelementu.

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

Attēlu sīktēli

Papildus mūsu apmales rādiusa utilītprogrammām varat izmantot .img-thumbnail, lai attēlam piešķirtu noapaļotu 1 pikseļu apmali.

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

Attēlu izlīdzināšana

Izlīdziniet attēlus ar palīga peldēšanas klasēm vai teksta līdzināšanas klasēm . blocklīmeņa attēlus var centrēt, izmantojot piemales .mx-autolietderības klasi .

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>

Bilde

Ja izmantojat <picture>elementu, lai norādītu vairākus <source>elementus konkrētam <img>, noteikti pievienojiet .img-*klases tagam <img>, nevis <picture>tagam.

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

Sass

Mainīgie lielumi

Attēlu sīktēliem ir pieejami mainīgie.

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