Bootstrap 4 ပုံများ
Bootstrap 4 Image Shapes
လုံးဝန်းသောထောင့်များ
စက်ဝိုင်း-
ပုံသေး-
လုံးဝန်းသောထောင့်များ
.rounded
အတန်းသည် ပုံတစ်ခုသို့ အဝိုင်းထောင့်များကို ပေါင်းထည့်သည် -
ဥပမာ
<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">
စက်ဝိုင်း
အတန်း သည် .rounded-circle
ပုံကို စက်ဝိုင်းအဖြစ် ပုံသွင်းသည်-
ဥပမာ
<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">
ပုံသေး
အတန်း သည် .img-thumbnail
ရုပ်ပုံအား ပုံသေး (ဘောင်ခတ်ထားသည်)
ဥပမာ
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
ပုံများကို ချိန်ညှိခြင်း။
အတန်း နှင့်အတူ ညာဘက်သို့ ပုံတစ်ပုံကို မျှောပါ .float-right
သို့မဟုတ် ဘယ်ဘက်တွင် .float-left
:
ဥပမာ
<img src="paris.jpg" class="float-left">
<img src="paris.jpg"
class="float-right">
ဗဟိုပြုပုံ
.mx-auto
ရုပ်ပုံသို့ utility classes (margin:auto) နှင့် .d-block
(display:block) ကို ပေါင်းထည့်ခြင်းဖြင့် ပုံတစ်ပုံကို အလယ်ဗဟိုတွင်ထားပါ ။
ဥပမာ
<img src="paris.jpg" class="mx-auto d-block">
တုံ့ပြန်မှုပုံရိပ်များ
ပုံများသည် အရွယ်အစားအားလုံးတွင် လာပါသည်။ ဖန်သားပြင်များထို့အတူလုပ်ပါ။ တုံ့ပြန်မှုရှိသောပုံများသည် မျက်နှာပြင်အရွယ်အစားနှင့် ကိုက်ညီစေရန် အလိုအလျောက်ချိန်ညှိပေးသည်။
တဂ် .img-fluid
သို့ အတန်း တစ်ခု ထည့်ခြင်းဖြင့် တုံ့ပြန်မှုရှိသော ပုံများကို ဖန်တီး ပါ။ <img>
ထို့နောက် ပုံသည် ပင်မဒြပ်စင်သို့ ကောင်းမွန်စွာ အတိုင်းအတာဖြင့် ချိန်ညှိမည်ဖြစ်သည်။
.img-fluid
အတန်းသည် ပုံသဏ္ဌာန် max-width: 100%;
နှင့်
သက်ဆိုင် သည် -height: auto;
ဥပမာ
<img class="img-fluid" src="img_chania.jpg" alt="Chania">