မီဒီယာတွေရှိကြပါတယ်။
ဘလော့ဂ်မှတ်ချက်များ၊ တွစ်တာများနှင့် အခြားအရာများကဲ့သို့ အလွန်ထပ်တလဲလဲဖြစ်နေသော အစိတ်အပိုင်းများကို ဖန်တီးရန်အတွက် Bootstrap ၏ မီဒီယာအရာဝတ္ထုအတွက် စာရွက်စာတမ်းများနှင့် ဥပမာများ။
ဥပမာ
မီဒီယာ အ ရာဝတ္တု သည် အချို့သောမီဒီယာများကို ပြောကြားသည့်မီဒီယာကို ပတ်ပတ်လည်မဖုံးလွှမ်းနိုင်သော အကြောင်းအရာများနှင့်အတူ ရှုပ်ထွေးပြီး ထပ်တူထပ်မျှသော အစိတ်အပိုင်းများကို ဖန်တီးပေးသည်။ ထို့အပြင်၊ ၎င်းသည် flexbox ကြောင့်လိုအပ်သောအတန်းနှစ်ခုသာလုပ်ဆောင်သည်။
အောက်တွင် မီဒီယာအရာဝတ္ထုတစ်ခု၏ ဥပမာတစ်ခုဖြစ်သည်။ အတန်းနှစ်ခုသာ လိုအပ်သည်—အကျဉ်းချုပ် .media
နှင့် .media-body
သင့်အကြောင်းအရာ ပတ်ပတ်လည်။ အကွာအဝေး utilities မှတဆင့် ရွေးချယ်နိုင်သော padding နှင့် margin ကို ထိန်းချုပ်နိုင်သည် ။
မီဒီယာခေါင်းစဉ်
Cras သည် amet nibh libero, gravida nulla တွင်ထိုင်သည်။ Nulla vel metus scelerisque ante sollicitudin။ Cras purus odio၊ vulputate တွင်ရှိသော vestibulum၊ tempus viverra turpis။ Fusce condimentum nunc ac nisi vulputate fringilla Faucibus ရှိ Donec lacinia congue felis။Flexbug #12- အတွင်းလိုင်းဒြပ်စင်များကို ပျော့ပြောင်းသည့်အရာများအဖြစ် မသတ်မှတ်ပါ။
Internet Explorer 10-11 သည် လင့်ခ်များ သို့မဟုတ် ပုံများ (သို့မဟုတ် pseudo-ဒြပ်စင်များ) ကဲ့သို့သော inline element များကို flex items အဖြစ် မ ::before
ဖော်ပြပါ ::after
။ တစ်ခုတည်းသော ဖြေရှင်းနည်းမှာ လိုင်းမဟုတ်သော display
တန်ဖိုး (ဥပမာ၊ block
၊ inline-block
၊ သို့မဟုတ် flex
) ကို သတ်မှတ်ရန်ဖြစ်သည်။ ကျွန်ုပ်တို့၏ display utilities.d-flex
များထဲမှ တစ်ခုကို အသုံးပြု၍ လွယ်ကူသော ပြင်ဆင်မှုအဖြစ် အကြံပြုအပ်ပါသည် ။
အရင်းအမြစ်- GitHub ရှိ Flexbugs
အသိုက်
ကျွန်ုပ်တို့သည် သင့်အား တစ်ချိန်ချိန်တွင် ရပ်ရန် အကြံပြုသော်လည်း မီဒီယာအရာဝတ္ထုများကို အကန့်အသတ်မရှိ အစုအဝေးတွင်ထားနိုင်သည်။ ပင်မမီဒီယာအရာဝတ္တု .media
တစ်ခုအတွင်း အသိုက် အမြုပ်ထားပါ။.media-body
မီဒီယာခေါင်းစဉ်
Cras သည် amet nibh libero, gravida nulla တွင်ထိုင်သည်။ Nulla vel metus scelerisque ante sollicitudin။ Cras purus odio၊ vulputate တွင်ရှိသော vestibulum၊ tempus viverra turpis။ Fusce condimentum nunc ac nisi vulputate fringilla Faucibus ရှိ Donec lacinia congue felis။တန်းညှိခြင်း။
မီဒီယာအရာဝတ္တုတစ်ခုရှိ မီဒီယာကို သင့်အကြောင်းအရာ၏အပေါ်ဆုံး (ပုံသေ)၊ အလယ် သို့မဟုတ် အဆုံးအထိ flexbox utilities များဖြင့် ချိန်ညှိနိုင်သည် .media-body
။
ထိပ်ပိုင်းညှိထားသော မီဒီယာ
Cras သည် amet nibh libero, gravida nulla တွင်ထိုင်သည်။ Nulla vel metus scelerisque ante sollicitudin။ Cras purus odio၊ vulputate တွင်ရှိသော vestibulum၊ tempus viverra turpis။ Fusce condimentum nunc ac nisi vulputate fringilla Faucibus ရှိ Donec lacinia congue felis။
Donec sed odio dui ။ Nullam quis risus eget urna mollis ornare vel eu leo။ Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
ဗဟို-ညှိမီဒီယာ
Cras သည် amet nibh libero, gravida nulla တွင်ထိုင်သည်။ Nulla vel metus scelerisque ante sollicitudin။ Cras purus odio၊ vulputate တွင်ရှိသော vestibulum၊ tempus viverra turpis။ Fusce condimentum nunc ac nisi vulputate fringilla Faucibus ရှိ Donec lacinia congue felis။
Donec sed odio dui ။ Nullam quis risus eget urna mollis ornare vel eu leo။ Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
အောက်ခြေ-ညှိထားသော မီဒီယာ
Cras သည် amet nibh libero, gravida nulla တွင်ထိုင်သည်။ Nulla vel metus scelerisque ante sollicitudin။ Cras purus odio၊ vulputate တွင်ရှိသော vestibulum၊ tempus viverra turpis။ Fusce condimentum nunc ac nisi vulputate fringilla Faucibus ရှိ Donec lacinia congue felis။
Donec sed odio dui ။ Nullam quis risus eget urna mollis ornare vel eu leo။ Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
အော်
order
HTML ကို ကိုယ်တိုင်မွမ်းမံခြင်းဖြင့်၊ သို့မဟုတ် ပိုင်ဆိုင်မှု ကို သတ်မှတ်ရန် စိတ်ကြိုက် flexbox CSS အချို့ကို ပေါင်းထည့်ခြင်းဖြင့် မီဒီယာအရာဝတ္တုများအတွင်းရှိ အကြောင်းအရာ၏ အစီစဥ်ကို ပြောင်းလဲပါ ။
မီဒီယာတွေရှိကြပါတယ်။
Cras သည် amet nibh libero, gravida nulla တွင်ထိုင်သည်။ Nulla vel metus scelerisque ante sollicitudin။ Cras purus odio၊ vulputate တွင်ရှိသော vestibulum၊ tempus viverra turpis။ Fusce condimentum nunc ac nisi vulputate fringilla Faucibus ရှိ Donec lacinia congue felis။မီဒီယာစာရင်း
မီဒီယာအရာဝတ္တုတွင် ဖွဲ့စည်းတည်ဆောက်ပုံဆိုင်ရာ လိုအပ်ချက်အနည်းငယ်ရှိသောကြောင့်၊ ဤအတန်းများကို HTML ဒြပ်စင်များစာရင်းတွင်လည်း သင်အသုံးပြုနိုင်ပါသည်။ သင့် တွင် <ul>
သို့မဟုတ် မည်သည့်ဘရောက်ဆာ၏ ပုံသေစာရင်းစတိုင်များကို ဖယ်ရှားရန် သို့မဟုတ် သင်၏ s တွင် အသုံးချပါ။ အမြဲလိုလို၊ ချိန်ညှိရန် လိုအပ်သည့်နေရာတိုင်းတွင် အကွာအဝေး utilities ကိုသုံးပါ။<ol>
.list-unstyled
.media
<li>
-
စာရင်းအခြေခံမီဒီယာအရာဝတ္ထု
Cras သည် amet nibh libero, gravida nulla တွင်ထိုင်သည်။ Nulla vel metus scelerisque ante sollicitudin။ Cras purus odio၊ vulputate တွင်ရှိသော vestibulum၊ tempus viverra turpis။ Fusce condimentum nunc ac nisi vulputate fringilla Faucibus ရှိ Donec lacinia congue felis။ -
စာရင်းအခြေခံမီဒီယာအရာဝတ္ထု
Cras သည် amet nibh libero, gravida nulla တွင်ထိုင်သည်။ Nulla vel metus scelerisque ante sollicitudin။ Cras purus odio၊ vulputate တွင်ရှိသော vestibulum၊ tempus viverra turpis။ Fusce condimentum nunc ac nisi vulputate fringilla Faucibus ရှိ Donec lacinia congue felis။ -
စာရင်းအခြေခံမီဒီယာအရာဝတ္ထု
Cras သည် amet nibh libero, gravida nulla တွင်ထိုင်သည်။ Nulla vel metus scelerisque ante sollicitudin။ Cras purus odio၊ vulputate တွင်ရှိသော vestibulum၊ tempus viverra turpis။ Fusce condimentum nunc ac nisi vulputate fringilla Faucibus ရှိ Donec lacinia congue felis။