Ana içeriğe geç Dokümanlar navigasyonuna atla
in English

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.

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;

Placeholder Responsive image
<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 .

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

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

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>

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;