Source

سۈرەتلەر

رەسىملەرنى ئىنكاسچان ھەرىكەتكە تاللاشتىكى ھۆججەتلەر ۋە مىساللار (شۇڭا ئۇلار ھەرگىزمۇ ئاتا-ئانىسىنىڭ ئېلېمېنتلىرىدىن چوڭ بولۇپ كەتمەيدۇ) ھەمدە ئۇلارغا يېنىك ئۇسلۇبلارنى قوشۇش - ھەممىسى دەرس ئارقىلىق.

ئىنكاسچان رەسىملەر

Bootstrap دىكى رەسىملەر ئىنكاس قايتۇرۇلغان .img-fluid. max-width: 100%;ھەمدە height: auto;بۇ رەسىمگە ئانا ئېلېمېنت بىلەن تارازا بولىدۇ.

Placeholder Responsive image 
<img src="..." class="img-fluid" alt="Responsive image">
SVG رەسىملىرى ۋە IE 10

Internet Explorer 10 دە ، SVG رەسىملىرى .img-fluidتەڭسىز چوڭلۇقتا. بۇنى ئوڭشاش ئۈچۈن ، width: 100% \9;زۆرۈر تېپىلغاندا قوشۇڭ. بۇ ئوڭشاش باشقا رەسىم فورماتلىرىنى نامۇۋاپىق چوڭايتىدۇ ، شۇڭا Bootstrap ئۇنى ئاپتوماتىك قوللانمايدۇ.

رەسىم كىچىك كۆرۈنۈش

بىزنىڭ چېگرا رادىئاتسىيە ئەسلىھەلىرىمىزدىن باشقا ، سىز .img-thumbnailرەسىمگە يۇمىلاق 1px چېگرا كۆرۈنۈشىنى بېرەلەيسىز.

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="..." alt="..." class="img-thumbnail">

رەسىملەرنى توغرىلاش

ياردەمچى لەيلىمە سىنىپ ياكى تېكىست توغرىلاش سىنىپى بىلەن رەسىملەرنى توغرىلاڭ . block-لېۋىل رەسىملەرنى margin ئەمەلىي.mx-auto ئىشلىتىش سىنىپىدىن پايدىلىنىپ مەركەزلەشتۈرگىلى بولىدۇ .

Placeholder 200x200 Placeholder 200x200 
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
Placeholder 200x200 
<img src="..." class="rounded mx-auto d-block" alt="...">
Placeholder 200x200 
<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>