Bootstrap 4 Media Objects
မီဒီယာအရာဝတ္ထုများ
Bootstrap သည် မီဒီယာအရာဝတ္ထုများ (ရုပ်ပုံများ သို့မဟုတ် ဗီဒီယိုများကဲ့သို့) အကြောင်းအရာများနှင့်အတူ ချိန်ညှိရန် လွယ်ကူသောနည်းလမ်းကို ပံ့ပိုးပေးပါသည်။ ဘလော့ဂ်မှတ်ချက်များ၊ တွစ်တာများနှင့် အခြားအရာများကို ပြသရန်အတွက် မီဒီယာအရာဝတ္ထုများကို မကြာခဏ အသုံးပြုလေ့ရှိသည်-
မောင်လှ တင် ဖေဖော်ဝါရီ ၁၉ ရက် ၂၀၁၆
ဝေဒနာကိုယ်တိုင်က ဝေဒနာရဲ့ အဓိက ဂေဟဗေဒဆိုင်ရာ ပြဿနာတွေကို တပ်မက်မှု ဖြစ်ပေမယ့် ပြိုလဲဖို့ ဒီလိုမျိုး အချိန်ပေးလိုက်တာ ဆိုတော့ ကြီးစွာသော ဝေဒနာနဲ့ ဝေဒနာ။
မောင်လှ တင် 20 February 2016
ဝေဒနာကိုယ်တိုင်က ဝေဒနာရဲ့ အဓိက ဂေဟဗေဒဆိုင်ရာ ပြဿနာတွေကို တပ်မက်မှု ဖြစ်ပေမယ့် ပြိုလဲဖို့ ဒီလိုမျိုး အချိန်ပေးလိုက်တာ ဆိုတော့ ကြီးစွာသော ဝေဒနာနဲ့ ဝေဒနာ။
အခြေခံမီဒီယာအရာဝတ္ထု
မောင်လှ တင် ဖေဖော်ဝါရီ ၁၉ ရက် ၂၀၁၆
ဝေဒနာကိုယ်တိုင်က ဝေဒနာရဲ့ အဓိက ဂေဟဗေဒဆိုင်ရာ ပြဿနာတွေကို တပ်မက်မှု ဖြစ်ပေမယ့် ပြိုလဲဖို့ ဒီလိုမျိုး အချိန်ပေးလိုက်တာ ဆိုတော့ ကြီးစွာသော ဝေဒနာနဲ့ ဝေဒနာ။
မီဒီယာအရာဝတ္ထုတစ်ခုဖန်တီးရန်၊ .mediaအတန်းကို ကွန်တိန်နာဒြပ်စင်တစ်ခုသို့ ပေါင်းထည့်ကာ အတန်းနှင့်အတူ ကလေးကွန်တိန်နာအတွင်း မီဒီယာအကြောင်းအရာကို ထားရှိပါ .media-body။ spacing utilities များဖြင့် လိုအပ်သလို လိုအပ်သလို padding နှင့် margin များကို ထည့်ပါ
ဥပမာ
<div class="media border p-3">
<img src="img_avatar3.png" alt="John
Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
<div
class="media-body">
<h4>John Doe <small><i>Posted on
February 19, 2016</i></small></h4>
<p>Lorem ipsum...</p>
</div>
</div>
Nested Media Objects
မီဒီယာအရာဝတ္ထုများကိုလည်း nested လုပ်ထားနိုင်သည် (မီဒီယာအရာဝတ္တုတစ်ခုအတွင်းရှိ မီဒီယာအရာဝတ္တုတစ်ခု)
မောင်လှ တင် ဖေဖော်ဝါရီ ၁၉ ရက် ၂၀၁၆
ဝေဒနာကိုယ်တိုင်က ဝေဒနာရဲ့ အဓိက ဂေဟဗေဒဆိုင်ရာ ပြဿနာတွေကို တပ်မက်မှု ဖြစ်ပေမယ့် ပြိုလဲဖို့ ဒီလိုမျိုး အချိန်ပေးလိုက်တာ ဆိုတော့ ကြီးစွာသော ဝေဒနာနဲ့ ဝေဒနာ။
Jane Doe ဖေဖော်ဝါရီ 20 ရက် 2016 တွင် တင်ခဲ့သည်။
ဝေဒနာကိုယ်တိုင်က ဝေဒနာရဲ့ အဓိက ဂေဟဗေဒဆိုင်ရာ ပြဿနာတွေကို တပ်မက်မှု ဖြစ်ပေမယ့် ပြိုလဲဖို့ ဒီလိုမျိုး အချိန်ပေးလိုက်တာ ဆိုတော့ ကြီးစွာသော ဝေဒနာနဲ့ ဝေဒနာ။
.mediaမီဒီယာအရာဝတ္ထုများကို အသိုက်ပြုလုပ်ရန်အတွက် ကွန်တိန်နာအတွင်း ကွန်တိန်နာ အသစ်တစ်ခုကို ထားရှိ .media-bodyပါ-
ဥပမာ
<div class="media border p-3">
<img src="img_avatar3.png" alt="John
Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
<div
class="media-body">
<h4>John Doe <small><i>Posted on
February 19, 2016</i></small></h4>
<p>Lorem ipsum...</p>
<div class="media p-3">
<img src="img_avatar2.png" alt="Jane
Doe" class="mr-3 mt-3 rounded-circle" style="width:45px;">
<div
class="media-body">
<h4>Jane Doe <small><i>Posted on
February 20 2016</i></small></h4>
<p>Lorem ipsum...</p>
</div>
</div>
</div>
</div>
ညာဖက်ညှိထားသော မီဒီယာပုံ
မောင်လှ တင် ဖေဖော်ဝါရီ ၁၉ ရက် ၂၀၁၆
ဝေဒနာကိုယ်တိုင်က ဝေဒနာရဲ့ အဓိက ဂေဟဗေဒဆိုင်ရာ ပြဿနာတွေကို တပ်မက်မှု ဖြစ်ပေမယ့် ပြိုလဲဖို့ ဒီလိုမျိုး အချိန်ပေးလိုက်တာ ဆိုတော့ ကြီးစွာသော ဝေဒနာနဲ့ ဝေဒနာ။
မီဒီယာပုံကို ညာဘက်ချိန်ညှိရန် ကွန်တိန်နာနောက်တွင် ပုံကိုထည့် .media-bodyပါ-
ဥပမာ
<div class="media border p-3">
<div
class="media-body">
<h4>John Doe <small><i>Posted on
February 19, 2016</i></small></h4>
<p>Lorem ipsum...</p>
</div>
<img src="img_avatar3.png" alt="John
Doe" class="ml-3 mt-3 rounded-circle" style="width:60px;">
</div>
အပေါ်၊ အလယ် သို့မဟုတ် အောက်ခြေ ချိန်ညှိခြင်း။
align-self-*မီဒီယာအရာဝတ္ထုကို အပေါ်၊ အလယ် သို့မဟုတ် အောက်ခြေတွင် နေရာချရန် flex utilities၊ အတန်းများကို အသုံးပြုပါ -
မီဒီယာထိပ်တန်း
ဝေဒနာကိုယ်တိုင်က ဝေဒနာရဲ့ အဓိက ဂေဟဗေဒဆိုင်ရာ ပြဿနာတွေကို တပ်မက်မှု ဖြစ်ပေမယ့် ပြိုလဲဖို့ ဒီလိုမျိုး အချိန်ပေးလိုက်တာ ဆိုတော့ ကြီးစွာသော ဝေဒနာနဲ့ ဝေဒနာ။
ဝေဒနာကိုယ်တိုင်က ဝေဒနာရဲ့ အဓိက ဂေဟဗေဒဆိုင်ရာ ပြဿနာတွေကို တပ်မက်မှု ဖြစ်ပေမယ့် ပြိုလဲဖို့ ဒီလိုမျိုး အချိန်ပေးလိုက်တာ ဆိုတော့ ကြီးစွာသော ဝေဒနာနဲ့ ဝေဒနာ။
မီဒီယာအလယ်
ဝေဒနာကိုယ်တိုင်က ဝေဒနာရဲ့ အဓိက ဂေဟဗေဒဆိုင်ရာ ပြဿနာတွေကို တပ်မက်မှု ဖြစ်ပေမယ့် ပြိုလဲဖို့ ဒီလိုမျိုး အချိန်ပေးလိုက်တာ ဆိုတော့ ကြီးစွာသော ဝေဒနာနဲ့ ဝေဒနာ။
ဝေဒနာကိုယ်တိုင်က ဝေဒနာရဲ့ အဓိက ဂေဟဗေဒဆိုင်ရာ ပြဿနာတွေကို တပ်မက်မှု ဖြစ်ပေမယ့် ပြိုလဲဖို့ ဒီလိုမျိုး အချိန်ပေးလိုက်တာ ဆိုတော့ ကြီးစွာသော ဝေဒနာနဲ့ ဝေဒနာ။
မီဒီယာအောက်ခြေ
ဝေဒနာကိုယ်တိုင်က ဝေဒနာရဲ့ အဓိက ဂေဟဗေဒဆိုင်ရာ ပြဿနာတွေကို တပ်မက်မှု ဖြစ်ပေမယ့် ပြိုလဲဖို့ ဒီလိုမျိုး အချိန်ပေးလိုက်တာ ဆိုတော့ ကြီးစွာသော ဝေဒနာနဲ့ ဝေဒနာ။
ဝေဒနာကိုယ်တိုင်က ဝေဒနာရဲ့ အဓိက ဂေဟဗေဒဆိုင်ရာ ပြဿနာတွေကို တပ်မက်မှု ဖြစ်ပေမယ့် ပြိုလဲဖို့ ဒီလိုမျိုး အချိန်ပေးလိုက်တာ ဆိုတော့ ကြီးစွာသော ဝေဒနာနဲ့ ဝေဒနာ။
ဥပမာ
<!-- Media top -->
<div class="media">
<img src="img_avatar1.png" class="align-self-start
mr-3" style="width:60px">
<div class="media-body">
<h4>Media Top</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Media middle -->
<div class="media">
<img src="img_avatar1.png" class="align-self-center mr-3" style="width:60px">
<div class="media-body">
<h4>Media Middle</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Media bottom -->
<div class="media">
<img src="img_avatar1.png" class="align-self-end mr-3" style="width:60px">
<div class="media-body">
<h4>Media Bottom</h4>
<p>Lorem ipsum...</p>
</div>
</div>