Saltu al ĉefa enhavo Saltu al navigado de dokumentoj
in English

Bildoj

Dokumentado kaj ekzemploj por elekti bildojn en respondema konduto (do ili neniam fariĝas pli grandaj ol siaj gepatraj elementoj) kaj aldonu malpezajn stilojn al ili — ĉio per klasoj.

Respondema bildoj

Bildoj en Bootstrap fariĝas respondemaj kun .img-fluid. Ĉi tio validas max-width: 100%;kaj height: auto;al la bildo tiel ke ĝi skalu kun la gepatra elemento.

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

Bildetoj

Aldone al niaj limradiaj utilecoj , vi povas uzi .img-thumbnailpor doni al bildo rondigitan 1px randan aspekton.

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

Vicigante bildojn

Vicigu bildojn kun la helpaj flosklasojtekst-aligklasoj . block-nivelaj bildoj povas esti centritaj per la .mx-automarĝena utileca klaso .

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>

Bildon

Se vi uzas la <picture>elementon por specifi plurajn <source>elementojn por specifa <img>, certigu aldoni la .img-*klasojn al la <img>kaj ne al la <picture>etikedo.

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

Sass

Variabloj

Variabloj disponeblas por bildetoj.

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