سۈرەتلەر
رەسىملەرنى ئىنكاسچان ھەرىكەتكە تاللاشتىكى ھۆججەتلەر ۋە مىساللار (شۇڭلاشقا ئۇلار ھەرگىزمۇ ئاتا-ئانىسىدىن كەڭرى بولمايدۇ) ھەمدە ئۇلارغا يېنىك ئۇسلۇبلارنى قوشۇش - ھەممىسى دەرس ئارقىلىق.
ئىنكاسچان رەسىملەر
Bootstrap دىكى رەسىملەر ئىنكاس قايتۇرۇلغان .img-fluid
. بۇ max-width: 100%;
ۋە height: auto;
رەسىمگە ماس كېلىدۇ ، بۇنداق بولغاندا ئۇ ئانا كەڭلىكى بىلەن ماس كېلىدۇ.
<img src="..." class="img-fluid" alt="...">
رەسىم كىچىك كۆرۈنۈش
بىزنىڭ چېگرا رادىئاتسىيە ئەسلىھەلىرىمىزدىن باشقا ، سىز .img-thumbnail
رەسىمگە يۇمىلاق 1px چېگرا كۆرۈنۈشىنى بېرەلەيسىز.
<img src="..." class="img-thumbnail" alt="...">
رەسىملەرنى توغرىلاش
ياردەمچى لەيلىمە سىنىپ ياكى تېكىست توغرىلاش سىنىپى بىلەن رەسىملەرنى توغرىلاڭ . block
-لېۋىل رەسىملەرنى margin ئەمەلىي.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>
رەسىم
ئەگەر سىز <picture>
ئېلېمېنتنى ئىشلىتىپ مەلۇم بىر قانچە <source>
ئېلېمېنتنى بەلگىلىمەكچى بولسىڭىز ، دەرسلەرنى خەتكۈچكە ئەمەس ، بەلكى <img>
قوشۇشقا كاپالەتلىك قىلىڭ ..img-*
<img>
<picture>
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>
Sass
ئۆزگەرگۈچى مىقدار
ئۆزگىرىشچان رەسىم كىچىك كۆرۈنۈشلىرى بار.
$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;