ပုံများ
ပုံများကို တုံ့ပြန်မှုရှိသော အမူအကျင့်အဖြစ် ရွေးချယ်ခြင်းအတွက် စာရွက်စာတမ်းနှင့် ဥပမာများ (ထို့ကြောင့် ၎င်းတို့သည် ၎င်းတို့၏ မိခင်ဒြပ်စင်များထက် ဘယ်သောအခါမှ ပိုကြီးမည်မဟုတ်) နှင့် ပေါ့ပါးသောစတိုင်များကို အတန်းများမှတစ်ဆင့် ၎င်းတို့ထံ ထည့်သွင်းပါ။
တုံ့ပြန်ပုံများ
Bootstrap ရှိ ပုံများကို တုံ့ပြန်မှု ပြုလုပ်ထားသည် .img-fluid
။ ၎င်းသည် ပင်မဒြပ်စင်နှင့် ချိန်ညှိရန်အတွက် ၎င်းသည် ပုံ max-width: 100%;
နှင့် သက်ဆိုင်သည် ။height: auto;
<img src="..." class="img-fluid" alt="...">
ပုံသေးများ
ကျွန်ုပ်တို့၏နယ်စပ်-အချင်းဝက် utilities များ အပြင် ၊ .img-thumbnail
ပုံတစ်ပုံကို အဝိုင်းပုံ 1px ဘောင်သဏ္ဌာန်ပေးရန် သင်အသုံးပြုနိုင်ပါသည် ။
<img src="..." class="img-thumbnail" alt="...">
ပုံများကို ချိန်ညှိခြင်း။
ပုံများကို အကူအညီပေးသည့် float အတန်းများ သို့မဟုတ် စာသားချိန်ညှိမှုအတန်းများ နှင့် ချိန်ညှိ ပါ။ margin utility class ကိုblock
အသုံးပြု၍ အဆင့်ပုံများကို ဗဟိုပြုနိုင်သည် ။.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>
များစွာသောဒြပ်စင်ကို သတ်မှတ်ရန် ဒြပ်စင် ကို အသုံးပြုနေပါက၊ အတန်းများကို tag ထဲသို့ မ ထည့်ကြောင်း သေချာပါစေ ။<source>
<img>
.img-*
<img>
<picture>
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>
ဆူး
ကိန်းရှင်များ
ပုံသေးများအတွက် ကိန်းရှင်များကို ရနိုင်ပါသည်။
$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;