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;
<img src="..." class="img-fluid" alt="...">
Küçük resimler
Border-radius yardımcı programlarımıza ek olarak , .img-thumbnail
bir 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;