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

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

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

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

ရလျှင်

ခွဲမှတ်များအားလုံးအတွက် သက်ဆိုင်သည့် အသုံးဝင်သောအတန်း များကို ပြ xsသ xlပါ ၎င်းမှာ အဆိုပါအတန်းများကို နှင့်အထက်တွင် အသုံးချသောကြောင့် 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

$displaysကိန်းရှင်ကိုပြောင်းပြီး SCSS ကို ပြန်လည်စုစည်းခြင်း ဖြင့် ဖော်ပြသည့်တန်ဖိုးများကို ပြောင်းလဲနိုင်သည် ။

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

ဥပမာများ

<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>

<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အလတ်စားနှင့် ကြီးမားသောစက်ပစ္စည်းများမှလွဲ၍ မျက်နှာပြင်အရွယ်အစားအားလုံးအတွက် ဒြပ်စင်ကို ဝှက်ထားပါမည်။

<div class="d-lg-none">hide on lg and wider screens</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

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

<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>