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

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

ကျွန်ုပ်တို့၏ တုံ့ပြန်မှုရှိသော 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

ဥပမာများ

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

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

ဆူး

အသုံးအဆောင်များ 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
    ),