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

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

ဤစာမျက်နှာတွင်

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

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

ရလျှင်

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

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

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

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

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

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

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

ဥပမာများ

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,xxl}-none

ပေးထားသည့် မျက်နှာပြင်အရွယ်အစားများကြားကာလတွင်သာ ဒြပ်စင်တစ်ခုကို ပြသရန် သင်သည် .d-*-noneအတန်းတစ်ခုနှင့် အတန်း တစ်ခုကို ပေါင်းစပ်နိုင်သည် .d-*-*၊ ဥပမာ၊ .d-none .d-md-block .d-xl-none .d-xxl-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-xxl-block`
xxl တွင်သာ ဝှက်ထားသည်။	`.d-xxl-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 .d-xxl-none`
xxl တွင်သာ မြင်နိုင်သည်။	`.d-none .d-xxl-block`

hide on lg and wider screens

lg ထက်သေးငယ်သော ဖန်သားပြင်ပေါ်တွင် ဝှက်ထားပါ။

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

ဆူး

အသုံးအဆောင်များ API

Display utilities များကို ကျွန်ုပ်တို့၏ utilities API တွင် ကြေငြာ scss/_utilities.scssထားသည်။ utilities API ကို အသုံးပြုနည်းကို လေ့လာပါ။

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),