Görüntüler

Görüntüleri duyarlı davranışa seçmeye yönelik belgeler ve örnekler (böylece hiçbir zaman üst öğelerinden daha büyük olmazlar) ve tümü sınıflar aracılığıyla bunlara hafif stiller ekleyin.

Bu sayfada

Duyarlı görüntüler

Bootstrap'teki resimler ile duyarlı hale getirilir .img-fluid. Bu , ana öğeyle ölçeklenecek şekilde görüntü için max-width: 100%;geçerlidir .height: auto;

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

Küçük resimler

Border-radius yardımcı programlarımıza ek olarak , .img-thumbnailbir görüntüye yuvarlak 1 piksel kenarlık görünümü vermek için kullanabilirsiniz .

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

Görüntüleri hizalama

Görüntüleri yardımcı kayan sınıflarla veya metin hizalama sınıflarıyla hizalayın . -seviyedeki görüntüler , kenar boşluğu yardımcı sınıfıblock kullanılarak ortalanabilir ..mx-auto

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

Resim

Belirli bir öğe için birden çok öğe <picture>belirtmek üzere öğeyi kullanıyorsanız , sınıfları etikete değil etikete eklediğinizden emin olun .<source><img>.img-*<img><picture>

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

küstah

Değişkenler

Küçük resimler için değişkenler mevcuttur.

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