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.

Sur ĉi tiu paĝo

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.

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

Bildetoj

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

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

Vicigante bildojn

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

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

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;