Bootstrap Media Objects
မီဒီယာအရာဝတ္ထုများ
Bootstrap သည် မီဒီယာအရာဝတ္တုများ (ပုံများ သို့မဟုတ် ဗီဒီယိုများကဲ့သို့) ကို ဘယ်ဘက် သို့မဟုတ် အကြောင်းအရာအချို့၏ ညာဘက်သို့ ချိန်ညှိရန် လွယ်ကူသောနည်းလမ်းကို ပံ့ပိုးပေးပါသည်။ ဘလော့ဂ်မှတ်ချက်များ၊ တွစ်တာများနှင့် အခြားအရာများကို ပြသရန် ၎င်းကို အသုံးပြုနိုင်သည်။
မောင်လှ တင် ဖေဖော်ဝါရီ ၁၉ ရက် ၂၀၁၆
ဝေဒနာကိုယ်တိုင်က ဝေဒနာရဲ့ အဓိက ဂေဟဗေဒဆိုင်ရာ ပြဿနာတွေကို တပ်မက်မှု ဖြစ်ပေမယ့် ပြိုလဲဖို့ ဒီလိုမျိုး အချိန်ပေးလိုက်တာ ဆိုတော့ ကြီးစွာသော ဝေဒနာနဲ့ ဝေဒနာ။
Jane Doe ဖေဖော်ဝါရီ 20 ရက် 2016 တွင် တင်ခဲ့သည်။
ဝေဒနာကိုယ်တိုင်က ဝေဒနာရဲ့ အဓိက ဂေဟဗေဒဆိုင်ရာ ပြဿနာတွေကို တပ်မက်မှု ဖြစ်ပေမယ့် ပြိုလဲဖို့ ဒီလိုမျိုး အချိန်ပေးလိုက်တာ ဆိုတော့ ကြီးစွာသော ဝေဒနာနဲ့ ဝေဒနာ။
Alicia Keyes သည် ဖေဖော်ဝါရီလ 25, 2016 တွင်တင်ခဲ့သည်။
ဝေဒနာကိုယ်တိုင်က ဝေဒနာရဲ့ အဓိက ဂေဟဗေဒဆိုင်ရာ ပြဿနာတွေကို တပ်မက်မှု ဖြစ်ပေမယ့် ပြိုလဲဖို့ ဒီလိုမျိုး အချိန်ပေးလိုက်တာ ဆိုတော့ ကြီးစွာသော ဝေဒနာနဲ့ ဝေဒနာ။ ပွဲမစမီ ရာဇ၀တ်မှု သို့မဟုတ် အဆင်ပြေမည်ကို မကြောက်ပါ။
အခြေခံမီဒီယာအရာဝတ္ထု
မောင်လှ
ဝေဒနာကိုယ်တိုင်က ဝေဒနာရဲ့ အဓိက ဂေဟဗေဒဆိုင်ရာ ပြဿနာတွေကို တပ်မက်မှု ဖြစ်ပေမယ့် ပြိုလဲဖို့ ဒီလိုမျိုး အချိန်ပေးလိုက်တာ ဆိုတော့ ကြီးစွာသော ဝေဒနာနဲ့ ဝေဒနာ။
မောင်လှ
ဝေဒနာကိုယ်တိုင်က ဝေဒနာရဲ့ အဓိက ဂေဟဗေဒဆိုင်ရာ ပြဿနာတွေကို တပ်မက်မှု ဖြစ်ပေမယ့် ပြိုလဲဖို့ ဒီလိုမျိုး အချိန်ပေးလိုက်တာ ဆိုတော့ ကြီးစွာသော ဝေဒနာနဲ့ ဝေဒနာ။
ဥပမာ
<!-- Left-aligned -->
<div class="media">
<div class="media-left">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">John Doe</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Right-aligned -->
<div class="media">
<div class="media-body">
<h4 class="media-heading">John Doe</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="media-right">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
</div>
နမူနာရှင်းပြထားပါတယ်။
.mediaမီဒီယာအရာဝတ္ထုများအတွက် ကွန်တိန်နာတစ်ခုဖန်တီးရန် အတန်း နှင့် <div> ဒြပ်စင်ကို အသုံးပြု ပါ။
.media-leftမီဒီယာအရာဝတ္တု (ပုံ) ကို ဘယ်ဘက်သို့ ချိန်ညှိရန် အတန်းကို အသုံးပြု ပါ သို့မဟုတ် .media-right၎င်းအား ညာဘက်သို့ ချိန်ညှိရန် အတန်းကို အသုံးပြုပါ။
ပုံဘေးတွင် ပေါ်လာမည့် စာသားကို class=" media-body" ပါသည့် ကွန်တိန်နာအတွင်း ထည့်သွင်းထားသည်။
.media-headingထို့အပြင်၊ ခေါင်းစီးများအတွက် သုံးနိုင်သည် ။
အပေါ်၊ အလယ် သို့မဟုတ် အောက်ခြေ ချိန်ညှိခြင်း။
မီဒီယာအရာဝတ္တုသည် အပေါ်၊ အလယ် သို့မဟုတ် အောက် media-top၊ media-middleသို့မဟုတ် media-bottomအတန်းနှင့် ချိန်ညှိနိုင်သည်။
မီဒီယာထိပ်တန်း
ဝေဒနာကိုယ်တိုင်က ဝေဒနာရဲ့ အဓိက ဂေဟဗေဒဆိုင်ရာ ပြဿနာတွေကို တပ်မက်မှု ဖြစ်ပေမယ့် ပြိုလဲဖို့ ဒီလိုမျိုး အချိန်ပေးလိုက်တာ ဆိုတော့ ကြီးစွာသော ဝေဒနာနဲ့ ဝေဒနာ။
ဝေဒနာကိုယ်တိုင်က ဝေဒနာရဲ့ အဓိက ဂေဟဗေဒဆိုင်ရာ ပြဿနာတွေကို တပ်မက်မှု ဖြစ်ပေမယ့် ပြိုလဲဖို့ ဒီလိုမျိုး အချိန်ပေးလိုက်တာ ဆိုတော့ ကြီးစွာသော ဝေဒနာနဲ့ ဝေဒနာ။
မီဒီယာအလယ်
ဝေဒနာကိုယ်တိုင်က ဝေဒနာရဲ့ အဓိက ဂေဟဗေဒဆိုင်ရာ ပြဿနာတွေကို တပ်မက်မှု ဖြစ်ပေမယ့် ပြိုလဲဖို့ ဒီလိုမျိုး အချိန်ပေးလိုက်တာ ဆိုတော့ ကြီးစွာသော ဝေဒနာနဲ့ ဝေဒနာ။
ဝေဒနာကိုယ်တိုင်က ဝေဒနာရဲ့ အဓိက ဂေဟဗေဒဆိုင်ရာ ပြဿနာတွေကို တပ်မက်မှု ဖြစ်ပေမယ့် ပြိုလဲဖို့ ဒီလိုမျိုး အချိန်ပေးလိုက်တာ ဆိုတော့ ကြီးစွာသော ဝေဒနာနဲ့ ဝေဒနာ။
မီဒီယာအောက်ခြေ
ဝေဒနာကိုယ်တိုင်က ဝေဒနာရဲ့ အဓိက ဂေဟဗေဒဆိုင်ရာ ပြဿနာတွေကို တပ်မက်မှု ဖြစ်ပေမယ့် ပြိုလဲဖို့ ဒီလိုမျိုး အချိန်ပေးလိုက်တာ ဆိုတော့ ကြီးစွာသော ဝေဒနာနဲ့ ဝေဒနာ။
ဝေဒနာကိုယ်တိုင်က ဝေဒနာရဲ့ အဓိက ဂေဟဗေဒဆိုင်ရာ ပြဿနာတွေကို တပ်မက်မှု ဖြစ်ပေမယ့် ပြိုလဲဖို့ ဒီလိုမျိုး အချိန်ပေးလိုက်တာ ဆိုတော့ ကြီးစွာသော ဝေဒနာနဲ့ ဝေဒနာ။
ဥပမာ
<!-- Media top -->
<div class="media">
<div class="media-left media-top">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Media Top</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Media middle -->
<div class="media">
<div class="media-left media-middle">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Media Middle</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Media bottom -->
<div class="media">
<div class="media-left media-bottom">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Media Bottom</h4>
<p>Lorem ipsum...</p>
</div>
</div>
မီဒီယာအရာဝတ္ထုများကို Nesting လုပ်ခြင်း။
မီဒီယာအရာဝတ္ထုများကိုလည်း nested လုပ်ထားနိုင်သည် (မီဒီယာအရာဝတ္တုတစ်ခုအတွင်းရှိ မီဒီယာအရာဝတ္တုတစ်ခု)
ဥပမာ
မောင်လှ တင် ဖေဖော်ဝါရီ ၁၉ ရက် ၂၀၁၆
ဝေဒနာကိုယ်တိုင်က ဝေဒနာရဲ့ အဓိက ဂေဟဗေဒဆိုင်ရာ ပြဿနာတွေကို တပ်မက်မှု ဖြစ်ပေမယ့် ပြိုလဲဖို့ ဒီလိုမျိုး အချိန်ပေးလိုက်တာ ဆိုတော့ ကြီးစွာသော ဝေဒနာနဲ့ ဝေဒနာ။
မောင်လှ တင် 20 February 2016
ဝေဒနာကိုယ်တိုင်က ဝေဒနာရဲ့ အဓိက ဂေဟဗေဒဆိုင်ရာ ပြဿနာတွေကို တပ်မက်မှု ဖြစ်ပေမယ့် ပြိုလဲဖို့ ဒီလိုမျိုး အချိန်ပေးလိုက်တာ ဆိုတော့ ကြီးစွာသော ဝေဒနာနဲ့ ဝေဒနာ။
မောင်လှ တင် ဖေဖော်ဝါရီ ၂၁ ရက် ၂၀၁၆
ဝေဒနာကိုယ်တိုင်က ဝေဒနာရဲ့ အဓိက ဂေဟဗေဒဆိုင်ရာ ပြဿနာတွေကို တပ်မက်မှု ဖြစ်ပေမယ့် ပြိုလဲဖို့ ဒီလိုမျိုး အချိန်ပေးလိုက်တာ ဆိုတော့ ကြီးစွာသော ဝေဒနာနဲ့ ဝေဒနာ။
Nesting ၏နောက်ထပ်ဥပမာ
ဥပမာ
မောင်လှ တင် ဖေဖော်ဝါရီ ၁၉ ရက် ၂၀၁၆
ဝေဒနာကိုယ်တိုင်က ဝေဒနာရဲ့ အဓိက ဂေဟဗေဒဆိုင်ရာ ပြဿနာတွေကို တပ်မက်မှု ဖြစ်ပေမယ့် ပြိုလဲဖို့ ဒီလိုမျိုး အချိန်ပေးလိုက်တာ ဆိုတော့ ကြီးစွာသော ဝေဒနာနဲ့ ဝေဒနာ။
မောင်လှ တင် 20 February 2016
ဝေဒနာကိုယ်တိုင်က ဝေဒနာရဲ့ အဓိက ဂေဟဗေဒဆိုင်ရာ ပြဿနာတွေကို တပ်မက်မှု ဖြစ်ပေမယ့် ပြိုလဲဖို့ ဒီလိုမျိုး အချိန်ပေးလိုက်တာ ဆိုတော့ ကြီးစွာသော ဝေဒနာနဲ့ ဝေဒနာ။
မောင်လှ တင် ဖေဖော်ဝါရီ ၂၁ ရက် ၂၀၁၆
ဝေဒနာကိုယ်တိုင်က ဝေဒနာရဲ့ အဓိက ဂေဟဗေဒဆိုင်ရာ ပြဿနာတွေကို တပ်မက်မှု ဖြစ်ပေမယ့် ပြိုလဲဖို့ ဒီလိုမျိုး အချိန်ပေးလိုက်တာ ဆိုတော့ ကြီးစွာသော ဝေဒနာနဲ့ ဝေဒနာ။
Jane Doe ဖေဖော်ဝါရီ 20 ရက် 2016 တွင် တင်ခဲ့သည်။
ဝေဒနာကိုယ်တိုင်က ဝေဒနာရဲ့ အဓိက ဂေဟဗေဒဆိုင်ရာ ပြဿနာတွေကို တပ်မက်မှု ဖြစ်ပေမယ့် ပြိုလဲဖို့ ဒီလိုမျိုး အချိန်ပေးလိုက်တာ ဆိုတော့ ကြီးစွာသော ဝေဒနာနဲ့ ဝေဒနာ။
Jane Doe ဖေဖော်ဝါရီ ၁၉ ရက် ၂၀၁၆ တွင် တင်ခဲ့သည်။
ဝေဒနာကိုယ်တိုင်က ဝေဒနာရဲ့ အဓိက ဂေဟဗေဒဆိုင်ရာ ပြဿနာတွေကို တပ်မက်မှု ဖြစ်ပေမယ့် ပြိုလဲဖို့ ဒီလိုမျိုး အချိန်ပေးလိုက်တာ ဆိုတော့ ကြီးစွာသော ဝေဒနာနဲ့ ဝေဒနာ။