Source

ပစ္စည်းဥစ္စာကိုပြသပါ။

ကျွန်ုပ်တို့၏ display utilities များဖြင့် အစိတ်အပိုင်းများ၏ ပြသမှုတန်ဖိုးနှင့် အခြားအရာများကို လျင်မြန်စွာနှင့် တုံ့ပြန်မှုပြောင်းလိုက်ပါ။ ပရင့်ထုတ်သောအခါတွင် ဖန်သားပြင်ကို ထိန်းချုပ်ရန်အတွက် ပိုသာသောတန်ဖိုးအချို့အတွက် ပံ့ပိုးမှုပါဝင်ပါသည်။

ဘယ်လိုအလုပ်လုပ်လဲ

ကျွန်ုပ်တို့၏ တုံ့ပြန်မှုရှိသော display utility classes များဖြင့် displayပိုင်ဆိုင်မှု တန်ဖိုးကို ပြောင်းလဲပါ ။ ကျွန်ုပ်တို့သည် ဖြစ်နိုင်ချေရှိသော တန်ဖိုးများအားလုံး၏ အပိုင်းခွဲတစ်ခုကိုသာ ရည်ရွယ်ချက်ရှိရှိ ပံ့ပိုးပေးပါသည် display။ အတန်းများကို သင်လိုအပ်သလို သက်ရောက်မှုအမျိုးမျိုးအတွက် ပေါင်းစပ်နိုင်ပါသည်။

ရလျှင်

ခွဲမှတ်များအားလုံးအတွက် သက်ဆိုင်သည့် အသုံးဝင်သောအတန်း များကို ပြ xsxlပါ ၎င်းမှာ အဆိုပါအတန်းများကို နှင့်အထက်တွင် အသုံးချသောကြောင့် min-width: 0;ဖြစ်ပြီး၊ ထို့ကြောင့် မီဒီယာမေးမြန်းမှုဖြင့် ကန့်သတ်ထားခြင်းမရှိပါ။ သို့သော် ကျန်ရှိသော ဖြတ်မှတ်များတွင် ခွဲမှတ်အတိုကောက်ပါ၀င်သည်။

ထို့ကြောင့်၊ အတန်းများကိုဖော်မတ်ဖြင့်အမည်ပေးသည်-

  • .d-{value}အဘို့xs
  • .d-{breakpoint}-{value}အတွက် sm, md, lg, နှင့် xl.

တန်ဖိုး သည် တစ်ခုဖြစ် သည့် နေရာတွင် -

  • none
  • inline
  • inline-block
  • block
  • table
  • table-cell
  • table-row
  • flex
  • inline-flex

မီဒီယာမေးမြန်းချက်များသည် ပေးထားသော breakpoint သို့မဟုတ် ပိုကြီးသော မျက်နှာပြင်အကျယ်များကို အကျိုးသက်ရောက်စေသည် ။ ဥပမာအားဖြင့်၊ .d-lg-noneနှစ်ခု display: none;လုံး lgနှင့် xlစခရင်များတွင်သတ်မှတ်သည်။

ဥပမာများ

d-inline
d-inline
<div class="d-inline p-2 bg-primary text-white">d-inline</div>
<div class="d-inline p-2 bg-dark text-white">d-inline</div>
d-block d-block
<span class="d-block p-2 bg-primary text-white">d-block</span>
<span class="d-block p-2 bg-dark text-white">d-block</span>

ဖင်ပုန်း

ပိုမိုမြန်ဆန်သောမိုဘိုင်း-ဖော်ရွေသောဖွံ့ဖြိုးတိုးတက်မှုအတွက်၊ စက်ဖြင့်ဒြပ်စင်များကိုပြသရန်နှင့်ဝှက်ရန်အတွက်တုံ့ပြန်မှုရှိသောပြသမှုအတန်းများကိုသုံးပါ။ စခရင်အရွယ်အစားတစ်ခုစီအတွက် တုံ့ပြန်မှုရှိသောဒြပ်စင်ကို ဝှက်ထားမည့်အစား တူညီသောဆိုက်တစ်ခု၏ ကွဲပြားသောဗားရှင်းများကို လုံးလုံးလျားလျားမဖန်တီးပါနှင့်။

ဒြပ်စင်များကို ဖုံးကွယ်ရန် တုံ့ပြန်မှုရှိသော မျက်နှာပြင်ကွဲလွဲမှုများအတွက် .d-noneအတန်း သို့မဟုတ် အတန်းများထဲမှ တစ်ခုကို အသုံးပြုပါ။.d-{sm,md,lg,xl}-none

ပေးထားသည့် မျက်နှာပြင်အရွယ်အစားများကြားကာလတွင်သာ ဒြပ်စင်တစ်ခုကို ပြသရန် သင်သည် .d-*-noneအတန်းတစ်ခုနှင့် အတန်း တစ်ခုကို ပေါင်းစပ်နိုင်သည် .d-*-*၊ ဥပမာ၊ .d-none .d-md-block .d-xl-noneအလတ်စားနှင့် ကြီးမားသောစက်ပစ္စည်းများမှလွဲ၍ မျက်နှာပြင်အရွယ်အစားအားလုံးအတွက် အစိတ်အပိုင်းကို ဝှက်ထားပါမည်။

မျက်နှာပြင်အရွယ်အစား အတန်း
အားလုံးကို ဝှက်ထားသည်။ .d-none
xs တွင်သာ ဝှက်ထားသည်။ .d-none .d-sm-block
sm တွင်သာ ဝှက်ထားသည်။ .d-sm-none .d-md-block
md တွင်သာ ဝှက်ထားသည်။ .d-md-none .d-lg-block
lg တွင်သာဝှက်ထားသည်။ .d-lg-none .d-xl-block
xl တွင်သာ ဝှက်ထားသည်။ .d-xl-none
အားလုံးတွင် မြင်နိုင်သည်။ .d-block
xs တွင်သာမြင်နိုင်သည်။ .d-block .d-sm-none
sm တွင်သာမြင်နိုင်သည်။ .d-none .d-sm-block .d-md-none
md တွင်သာမြင်နိုင်သည်။ .d-none .d-md-block .d-lg-none
lg တွင်သာမြင်နိုင်သည်။ .d-none .d-lg-block .d-xl-none
xl တွင်သာမြင်နိုင်သည်။ .d-none .d-xl-block
hide on screens wider than lg
lg ထက်သေးငယ်သော ဖန်သားပြင်ပေါ်တွင် ဝှက်ထားပါ။
<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

ပုံနှိပ်ဖြင့်ပြသပါ။

displayကျွန်ုပ်တို့၏ print display utility classes ဖြင့် ပုံနှိပ်သည့်အခါ အစိတ်အပိုင်းများ၏ တန်ဖိုးကို ပြောင်းလဲပါ ။ ကျွန်ုပ်တို့၏တုံ့ပြန်မှုဆိုင်ရာအသုံးအဆောင်များကဲ့သို့တူညီသော displayတန်ဖိုးများ အတွက်ပံ့ပိုးမှုပါဝင်သည် .d-*

  • .d-print-none
  • .d-print-inline
  • .d-print-inline-block
  • .d-print-block
  • .d-print-table
  • .d-print-table-row
  • .d-print-table-cell
  • .d-print-flex
  • .d-print-inline-flex

ပုံနှိပ်ခြင်းနှင့် ပြသခြင်းအတန်းများကို ပေါင်းစပ်နိုင်သည်။

မျက်နှာပြင်သီးသန့် (ပုံနှိပ်ပေါ်တွင်သာ ဝှက်ထားရန်)
Print Only (Hide on screen only)
မျက်နှာပြင်ပေါ်တွင် ကြီးမားသောအထိ ဝှက်ထားသော်လည်း အမြဲတမ်း ပရင့်ပေါ်တွင် ပြသပါ။
<div class="d-print-none">Screen Only (Hide on print only)</div>
<div class="d-none d-print-block">Print Only (Hide on screen only)</div>
<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>