Lumaktaw sa pangunahing nilalaman Lumaktaw sa docs navigation
in English

Mga imahe

Dokumentasyon at mga halimbawa para sa pag-opt in sa mga larawan sa tumutugon na gawi (para hindi sila maging mas malawak kaysa sa kanilang magulang) at magdagdag ng mga magaan na istilo sa kanila—lahat sa pamamagitan ng mga klase.

Mga larawang tumutugon

Ang mga imahe sa Bootstrap ay ginawang tumutugon sa .img-fluid. Nalalapat ito max-width: 100%;at height: auto;sa larawan upang ito ay umaakma sa lapad ng magulang.

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

Mga thumbnail ng larawan

Bilang karagdagan sa aming mga kagamitan sa border-radius , maaari mong gamitin .img-thumbnailupang bigyan ang isang imahe ng isang bilugan na 1px na hitsura ng hangganan.

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

Pag-align ng mga larawan

I-align ang mga larawan sa mga helper float class o text alignment classes . block-level na mga imahe ay maaaring nakasentro gamit ang .mx-automargin utility class .

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>

Larawan

Kung ginagamit mo ang <picture>elemento upang tumukoy ng maraming <source>elemento para sa isang partikular <img>na , tiyaking idagdag ang mga .img-*klase sa <img>at hindi sa <picture>tag.

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

Sass

Mga variable

Available ang mga variable para sa mga thumbnail ng larawan.

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