Utility API

utility API သည် utility class များကိုဖန်တီးရန် Sass-based tool တစ်ခုဖြစ်သည်။

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

Bootstrap utilities များကို ကျွန်ုပ်တို့၏ utility API ဖြင့် ထုတ်လုပ်ထားပြီး Sass မှတစ်ဆင့် ကျွန်ုပ်တို့၏ မူရင်း utility class များကို ပြင်ဆင်ရန် သို့မဟုတ် တိုးချဲ့ရန် အသုံးပြုနိုင်သည်။ ကျွန်ုပ်တို့၏ အသုံးဝင်မှု API သည် ရွေးချယ်စရာအမျိုးမျိုးဖြင့် အတန်းမိသားစုများကို ဖန်တီးရန်အတွက် Sass မြေပုံများနှင့် လုပ်ဆောင်ချက်များအပေါ် အခြေခံထားသည်။ သင် Sass မြေပုံများနှင့် မရင်းနှီး ပါက စတင်ရန် တရားဝင် Sass docs တွင် ဖတ်ပါ။

မြေပုံ တွင် $utilitiesကျွန်ုပ်တို့၏ အသုံးအဆောင်များ ပါ၀င်ပြီး နောက်ပိုင်းတွင် သင့်စိတ်ကြိုက် $utilitiesမြေပုံနှင့် ပေါင်းစည်းထားသည်။ အသုံးဝင်ပုံမြေပုံတွင် အောက်ပါရွေးချယ်စရာများကို လက်ခံနိုင်သည့် သော့တွဲအုပ်စုများစာရင်းပါရှိသည်။

ရွေးချယ်မှု	ရိုက်ပါ။	ဖော်ပြချက်
`property`	လိုအပ်သည်။	ပိုင်ဆိုင်မှုအမည်၊ ၎င်းသည် စာကြောင်းတစ်ကြောင်း သို့မဟုတ် စာကြောင်းများ၏ အခင်းအကျင်းတစ်ခု ဖြစ်နိုင်သည် (ဥပမာ၊ အလျားလိုက်အကွက်များ သို့မဟုတ် အနားသတ်များ)။
`values`	လိုအပ်သည်။	တန်ဖိုးများစာရင်း သို့မဟုတ် အတန်းအမည်ကို တန်ဖိုးနှင့် တူညီစေလိုခြင်းမရှိပါက မြေပုံတစ်ခု။ `null`မြေပုံကီးအဖြစ် အသုံးပြုပါက၊ ၎င်းကို စုစည်းထားခြင်းမရှိပါ ။
`class`	ရွေးချယ်ခွင့်	အကယ်၍ သင်သည် ၎င်းကို ပိုင်ဆိုင်မှုနှင့် တူညီစေလိုခြင်းမရှိပါက အတန်းအမည်အတွက် ပြောင်းလဲနိုင်သည်။ `class`သော့နှင့် သော့သည် string များ array ကို မ `property`ပေးပါက၊ class name သည် array ၏ ပထမဆုံး element ဖြစ်လိမ့်မည် `property`။
`state`	ရွေးချယ်ခွင့်	utility အတွက် pseudo-class မျိုးကွဲများစာရင်း `:hover`။ `:focus`ပုံသေတန်ဖိုးမရှိပါ။
`responsive`	ရွေးချယ်ခွင့်	တုံ့ပြန်မှုရှိသောအတန်းများကို ထုတ်ပေးရန်လိုအပ်ပါက Boolean ကို ညွှန်ပြသည်။ `false`ပုံသေ။
`rfs`	ရွေးချယ်ခွင့်	အရည်ပြန်လည် ချိန်ညှိခြင်းကို ဖွင့်ရန် Boolean။ ၎င်းသည်မည်သို့အလုပ်လုပ်သည်ကိုရှာဖွေရန် RFS စာမျက်နှာကို ကြည့်ရှု ပါ။ `false`ပုံသေ။
`print`	ရွေးချယ်ခွင့်	ပရင့်အတန်းများကို ထုတ်ပေးရန် လိုအပ်ပါက Boolean ကို ညွှန်ပြသည်။ `false`ပုံသေ။
`rtl`	ရွေးချယ်ခွင့်	utility ကို RTL တွင် သိမ်းထားသင့်သလား ညွှန်ပြသည့် Boolean `true`ပုံသေ။

API က ရှင်းပြပါတယ်။

$utilitiesအသုံးဝင်သော ကိန်းရှင်အားလုံးကို ကျွန်ုပ်တို့၏စတိုင်စာရွက် အတွင်း၌ ကိန်းရှင် သို့ ပေါင်းထည့်ထားသည် _utilities.scss။ အသုံးအဆောင်အုပ်စုတစ်ခုစီသည် ဤကဲ့သို့ ဖြစ်သည်-

$utilities: (
  "opacity": (
    property: opacity,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );

မည်သည့်အရာက အောက်ပါတို့ကို ထုတ်ပေးသည်-

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }

စိတ်ကြိုက်အတန်းရှေ့ဆက်

စုစည်းထားသော CSS တွင် အသုံးပြု classသည့် အတန်းရှေ့ဆက်ကို ပြောင်းလဲရန် ရွေးချယ်ခွင့်ကို အသုံးပြုပါ-

$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );

အထွက်-

.o-0 { opacity: 0; }
.o-25 { opacity: .25; }
.o-50 { opacity: .5; }
.o-75 { opacity: .75; }
.o-100 { opacity: 1; }

တိတ်

statepseudo-class ကွဲပြားမှုများကို ထုတ်လုပ်ရန် ရွေးချယ်ခွင့်ကို အသုံးပြုပါ ။ ဥပမာ pseudo-class များသည် :hoverနှင့် :focus. ပြည်နယ်များစာရင်းကို ပေးသောအခါ၊ ထို pseudo-class အတွက် အတန်းအမည်များကို ဖန်တီးပါသည်။ ဥပမာအားဖြင့်၊ hover တွင် opacity ကိုပြောင်းရန်၊ add state: hoverလုပ်ပြီး .opacity-hover:hoverသင်၏ compiled CSS တွင် သင်ရရှိမည်ဖြစ်သည်။

pseudo-class အများအပြားလိုအပ်ပါသလား။ အာကာသ ခြားထားသော ပြည်နယ်များ စာရင်းကို အသုံးပြုပါ state: hover focus။

$utilities: (
  "opacity": (
    property: opacity,
    class: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

အထွက်-

.opacity-0-hover:hover { opacity: 0 !important; }
.opacity-25-hover:hover { opacity: .25 !important; }
.opacity-50-hover:hover { opacity: .5 !important; }
.opacity-75-hover:hover { opacity: .75 !important; }
.opacity-100-hover:hover { opacity: 1 !important; }

တုံ့ပြန်မှုအသုံးအဆောင်များ

responsiveတုံ့ပြန်မှုအသုံးအဆောင်များ (ဥပမာ၊ .opacity-md-25) ကို breakpoints အားလုံးတွင် ထုတ်လုပ်ရန် boolean ကို ထည့်ပါ ။

$utilities: (
  "opacity": (
    property: opacity,
    responsive: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );

အထွက်-

.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }

@media (min-width: 576px) {
  .opacity-sm-0 { opacity: 0 !important; }
  .opacity-sm-25 { opacity: .25 !important; }
  .opacity-sm-50 { opacity: .5 !important; }
  .opacity-sm-75 { opacity: .75 !important; }
  .opacity-sm-100 { opacity: 1 !important; }
}

@media (min-width: 768px) {
  .opacity-md-0 { opacity: 0 !important; }
  .opacity-md-25 { opacity: .25 !important; }
  .opacity-md-50 { opacity: .5 !important; }
  .opacity-md-75 { opacity: .75 !important; }
  .opacity-md-100 { opacity: 1 !important; }
}

@media (min-width: 992px) {
  .opacity-lg-0 { opacity: 0 !important; }
  .opacity-lg-25 { opacity: .25 !important; }
  .opacity-lg-50 { opacity: .5 !important; }
  .opacity-lg-75 { opacity: .75 !important; }
  .opacity-lg-100 { opacity: 1 !important; }
}

@media (min-width: 1200px) {
  .opacity-xl-0 { opacity: 0 !important; }
  .opacity-xl-25 { opacity: .25 !important; }
  .opacity-xl-50 { opacity: .5 !important; }
  .opacity-xl-75 { opacity: .75 !important; }
  .opacity-xl-100 { opacity: 1 !important; }
}

@media (min-width: 1400px) {
  .opacity-xxl-0 { opacity: 0 !important; }
  .opacity-xxl-25 { opacity: .25 !important; }
  .opacity-xxl-50 { opacity: .5 !important; }
  .opacity-xxl-75 { opacity: .75 !important; }
  .opacity-xxl-100 { opacity: 1 !important; }
}

အသုံးအဆောင်များ ပြောင်းလဲခြင်း။

တူညီသောသော့ကို အသုံးပြု၍ ရှိပြီးသား အသုံးအဆောင်ပစ္စည်းများကို အစားထိုးပါ။ ဥပမာအားဖြင့်၊ သင်သည် ထပ်လောင်းတုံ့ပြန်မှုပိုလျှံသော အသုံးဝင်မှုအတန်းများကို လိုချင်ပါက၊ သင်သည် ဤသို့လုပ်ဆောင်နိုင်သည်-

$utilities: (
  "overflow": (
    responsive: true,
    property: overflow,
    values: visible hidden scroll auto,
  ),
);

ပုံနှိပ်ခြင်း အသုံးအဆောင်များ

printရွေးချယ်ခွင့်ကို ဖွ င့်ခြင်းဖြင့် မီဒီယာမေးမြန်းမှု အတွင်းသာ အသုံးပြုသည့် ပရင့်အတွက် အသုံးဝင်သောအတန်း များကို ထုတ်ပေးမည်ဖြစ်သည်။@media print { ... }

$utilities: (
  "opacity": (
    property: opacity,
    print: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );

အထွက်-

.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }

@media print {
  .opacity-print-0 { opacity: 0 !important; }
  .opacity-print-25 { opacity: .25 !important; }
  .opacity-print-50 { opacity: .5 !important; }
  .opacity-print-75 { opacity: .75 !important; }
  .opacity-print-100 { opacity: 1 !important; }
}

အရေးကြီးပုံ

API မှ ထုတ်လုပ်သော အသုံးဝင်မှုအားလုံးတွင် !important၎င်းတို့သည် ရည်ရွယ်ထားသည့်အတိုင်း အစိတ်အပိုင်းများနှင့် မွမ်းမံပြင်ဆင်သည့်အတန်းများကို အစားထိုးကြောင်း သေချာစေရန် ပါဝင်သည်။ သင်သည် ဤဆက်တင်ကို ကမ္ဘာအနှံ့ ပြောင်း $enable-important-utilitiesလွဲပြောင်းနိုင်သည် (မူလမှ true) ဖြင့် ပြောင်းနိုင်သည်။

API ကိုအသုံးပြုခြင်း။

ယခု သင် utilities API မည်ကဲ့သို့ အလုပ်လုပ်သည်ကို သင် အကျွမ်းတဝင်သိပြီးဖြစ်၍ သင့်ကိုယ်ပိုင် စိတ်ကြိုက်အတန်းများကို ထည့်သွင်းနည်းကို လေ့လာပြီး ကျွန်ုပ်တို့၏ ပုံသေ utilities များကို ပြင်ဆင်ပါ။

အသုံးအဆောင်များထည့်ပါ။

$utilitiesအသုံးဝင်မှုအသစ်များကို ပုံသေ မြေပုံတွင် ထည့်သွင်းနိုင်သည် map-merge။ ကျွန်ုပ်တို့၏လိုအပ်သော Sass ဖိုင်များကို _utilities.scssဦးစွာထည့်သွင်းထားကြောင်း သေချာပါစေ၊ ထို့နောက် map-mergeသင်၏နောက်ထပ် utilities များထည့်ရန် ကိုအသုံးပြုပါ။ ဥပမာအားဖြင့်၊ ဤသည်မှာ cursorတန်ဖိုးသုံးမျိုးဖြင့် တုံ့ပြန်နိုင်သော အသုံးဝင်မှုတစ်ခုကို ထည့်သွင်းနည်းဖြစ်သည်။

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

အသုံးအဆောင်များကို ပြုပြင်မွမ်းမံပါ။

$utilitiesပုံသေ မြေပုံ တွင် ရှိပြီးသား utilities များ map-getနှင့် map-mergeလုပ်ဆောင်ချက်များကို မွမ်းမံပါ။ အောက်ဖော်ပြပါ ဥပမာတွင်၊ widthကျွန်ုပ်တို့သည် utilities များတွင် အပိုတန်ဖိုးတစ်ခု ထပ်ထည့်နေပါသည်။ ကနဦးတစ်ခုဖြင့် စတင် map-mergeပြီးနောက် သင်ပြုပြင်လိုသော မည်သည့် အသုံးဝင်မှုကို သတ်မှတ်ပါ။ ထိုနေရာမှ၊ အသုံးပြုမှု၏ရွေးချယ်မှုများနှင့် တန်ဖိုးများကို ဝင်ရောက်ပြင်ဆင်ရန်နှင့် ပြုပြင်ရန်အတွက် ပေါင်းစပ်ထားသော "width"မြေပုံကို ရယူပါ။map-get

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "width": map-merge(
      map-get($utilities, "width"),
      (
        values: map-merge(
          map-get(map-get($utilities, "width"), "values"),
          (10: 10%),
        ),
      ),
    ),
  )
);

တုံ့ပြန်မှုကို ဖွင့်ပါ။

လက်ရှိတွင် တုံ့ပြန်မှုမရှိသော ရှိပြီးသား utilities အစုံအတွက် တုံ့ပြန်မှုအတန်းများကို သင်ဖွင့်နိုင်သည်။ ဥပမာအားဖြင့်၊ borderအတန်းများကို တုံ့ပြန်ရန်-

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities, (
    "border": map-merge(
      map-get($utilities, "border"),
      ( responsive: true ),
    ),
  )
);

၎င်းသည် ယခုအခါ breakpoint တစ်ခုစီအတွက် တုံ့ပြန်မှုပုံစံများ .borderကို ထုတ်ပေးပါမည်။ .border-0သင်ထုတ်လုပ်လိုက်သော CSS သည် ဤကဲ့သို့ဖြစ်နေလိမ့်မည်-

.border { ... }
.border-0 { ... }

@media (min-width: 576px) {
  .border-sm { ... }
  .border-sm-0 { ... }
}

@media (min-width: 768px) {
  .border-md { ... }
  .border-md-0 { ... }
}

@media (min-width: 992px) {
  .border-lg { ... }
  .border-lg-0 { ... }
}

@media (min-width: 1200px) {
  .border-xl { ... }
  .border-xl-0 { ... }
}

@media (min-width: 1400px) {
  .border-xxl { ... }
  .border-xxl-0 { ... }
}

အသုံးအဆောင်များကို အမည်ပြောင်းပါ။

v4 အသုံးအဆောင်များ ပျောက်ဆုံးနေသလား၊ သို့မဟုတ် အခြားအမည်ပေးခြင်းဆိုင်ရာ ကွန်ဗင်းရှင်းတွင် အသုံးပြုပါသလား။ Utilities API ကို classပေးထားသော utility တစ်ခု၏ ရလဒ်ကို အစားထိုးရန်—ဥပမာ၊ .ms-*utilities များကို oldish ဟု အမည်ပြောင်းရန် .ml-*-

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities, (
    "margin-start": map-merge(
      map-get($utilities, "margin-start"),
      ( class: ml ),
    ),
  )
);

အသုံးအဆောင်များကို ဖယ်ရှားပါ။

အဖွဲ့သော့ကို သတ်မှတ်ခြင်းဖြင့် မူရင်းအသုံးအဆောင်များအားလုံးကို ဖယ်ရှားပါ null။ ဥပမာအားဖြင့်၊ widthကျွန်ုပ်တို့၏ utilities အားလုံးကို ဖယ်ရှားရန်၊ တစ်ခုဖန်တီးပြီး အတွင်း $utilities map-mergeထည့်ပါ "width": null။

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "width": null
  )
);

RTL ရှိ အသုံးဝင်မှုကို ဖယ်ရှားပါ။

အချို့သော အနားသတ် အိတ် များသည် အာရပ်ဘာသာဖြင့် လိုင်းခွဲခြင်းကဲ့သို့သော RTL ပုံစံကို ခက်ခဲစေသည် ။ rtlထို့ကြောင့် ရွေးချယ်စရာများကို သတ်မှတ်ခြင်းဖြင့် RTL အထွက်မှ အသုံးဝင်မှုများကို ဖယ်ရှားနိုင်သည် false။

$utilities: (
  "word-wrap": (
    property: word-wrap word-break,
    class: text,
    values: (break: break-word),
    rtl: false
  ),
);

အထွက်-

/* rtl:begin:remove */
.text-break {
  word-wrap: break-word !important;
  word-break: break-word !important;
}
/* rtl:end:remove */

RTLCSS removeထိန်းချုပ်မှု ညွှန်ကြားချက် ကြောင့် ၎င်းသည် RTL တွင် မည်သည့်အရာကိုမျှ မထုတ်ပေးပါ ။