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`	ရွေးချယ်ခွင့်	null	ထုတ်ပေးသော အတန်းအမည်။ မပေးထားပါက `property`၊ strings များ array တစ်ခုဖြစ်ပြီး၊ array ၏ `class`ပထမ element တွင် ပုံသေဖြစ်လိမ့်မည် `property`။
`css-var`	ရွေးချယ်ခွင့်	`false`	CSS စည်းမျဉ်းများအစား CSS variable များကိုထုတ်လုပ်ရန် Boolean။
`local-vars`	ရွေးချယ်ခွင့်	null	CSS စည်းမျဉ်းများအပြင် ထုတ်လုပ်ရန် ဒေသတွင်း CSS ကိန်းရှင်များမြေပုံ။
`state`	ရွေးချယ်ခွင့်	null	ထုတ်လုပ်ရန် pseudo-class မူကွဲများစာရင်း (ဥပမာ၊ `:hover`သို့မဟုတ် `:focus`)။
`responsive`	ရွေးချယ်ခွင့်	`false`	တုံ့ပြန်မှုရှိသောအတန်းများကို ထုတ်ပေးသင့်သည်ဆိုသည်ကို ဖော်ပြသော Boolean။
`rfs`	ရွေးချယ်ခွင့်	`false`	RFS ဖြင့် fluid rescaling ကိုဖွင့်ရန် Boolean
`print`	ရွေးချယ်ခွင့်	`false`	ပရင့်အတန်းများကို ထုတ်ပေးရန် လိုအပ်ပါက Boolean ကို ညွှန်ပြသည်။
`rtl`	ရွေးချယ်ခွင့်	`true`	utility ကို RTL တွင် သိမ်းဆည်းထားသင့်သလား ညွှန်ပြသော Boolean

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

ပစ္စည်းဥစ္စာ

လိုအပ်သော propertyသော့ကို မည်သည့် utility အတွက်မဆို သတ်မှတ်ရမည်ဖြစ်ပြီး ၎င်းတွင် တရားဝင် CSS ပိုင်ဆိုင်မှု ပါဝင်ရပါမည်။ ဤပိုင်ဆိုင်မှုကို ထုတ်လုပ်ထားသော utility ၏ စည်းမျဉ်းများထဲတွင် အသုံးပြုပါသည်။ သော့ကို ချန်လှပ်ထား သောအခါ class၊ ၎င်းသည် မူရင်းအတန်းအမည်အဖြစ်လည်း ဆောင်ရွက်ပါသည်။ text-decorationအသုံးဝင်ပုံ ကို သုံးသပ်ကြည့်ပါ -

$utilities: (
  "text-decoration": (
    property: text-decoration,
    values: none underline line-through
  )
);

အထွက်-

.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }

တန်ဖိုးများ

ထုတ်ပေးထားသော အတန်းအမည်များနှင့် စည်းမျဉ်းများတွင် valuesသတ်မှတ်ထားသော တန်ဖိုးများကို သတ်မှတ်ရန် သော့ကို အသုံးပြု ပါ။ propertyစာရင်းတစ်ခု သို့မဟုတ် မြေပုံတစ်ခု ဖြစ်နိုင်သည် (အသုံးအဆောင်များတွင် သို့မဟုတ် Sass variable တွင် သတ်မှတ်ထားသည်)။

စာရင်းတစ်ခုအနေဖြင့်၊ အသုံးဝင်မှုများနှင့် text-decorationတူသည် :

values: none underline line-through

မြေပုံတစ်ခုအနေဖြင့်၊ အသုံးဝင်မှုများနှင့် opacityတူသည် :

values: (
  0: 0,
  25: .25,
  50: .5,
  75: .75,
  100: 1,
)

positionကျွန်ုပ်တို့၏ utilities များတွင်ကဲ့သို့ စာရင်း သို့မဟုတ် မြေပုံကို သတ်မှတ် ပေး သည့် Sass variable တစ်ခုအနေဖြင့်

values: $position-values

အတန်း

classcompiled CSS တွင်အသုံးပြုသည့် class prefix ကိုပြောင်းရန် ရွေးချယ်ခွင့်ကို သုံး ပါ။ ဥပမာအားဖြင့်၊ သို့ ပြောင်းရန် .opacity-*၊.o-*

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

အထွက်-

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

CSS ပြောင်းလဲနိုင်သော အသုံးအဆောင်များ

css-varဘူလီယံရွေးချယ်ခွင့်ကို သတ်မှတ်ပြီး API သည် ပုံမှန် စည်းမျဉ်းများ trueအစား ပေးထားသောရွေးချယ်သူအတွက် ဒေသဆိုင်ရာ CSS ကိန်းရှင်များကို ထုတ်ပေးမည် ဖြစ်သည်။ property: valueကျွန်ုပ်တို့၏ အသုံးဝင်မှုများကို သုံးသပ်ကြည့်ပါ .text-opacity-*-

$utilities: (
  "text-opacity": (
    css-var: true,
    class: text-opacity,
    values: (
      25: .25,
      50: .5,
      75: .75,
      100: 1
    )
  ),
);

အထွက်-

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

Local CSS ကိန်းရှင်များ

local-varsutility class ၏ စည်းမျဉ်းများအတွင်း ဒေသဆိုင်ရာ CSS variable များကို ထုတ်လုပ်ပေးမည့် Sass မြေပုံကို သတ်မှတ်ရန် ရွေးချယ်ခွင့်ကို အသုံးပြု ပါ။ ထုတ်လုပ်လိုက်သော CSS စည်းမျဉ်းများတွင် ထိုဒေသခံ CSS ကိန်းရှင်များကို စားသုံးရန် နောက်ထပ်အလုပ်များ လိုအပ်နိုင်သည်ကို ကျေးဇူးပြု၍ သတိပြုပါ။ ဥပမာအားဖြင့်၊ .bg-*ကျွန်ုပ်တို့၏ အသုံးဝင်မှုများကို သုံးသပ်ကြည့်ပါ-

$utilities: (
  "background-color": (
    property: background-color,
    class: bg,
    local-vars: (
      "bg-opacity": 1
    ),
    values: map-merge(
      $utilities-bg-colors,
      (
        "transparent": transparent
      )
    )
  )
);

အထွက်-

.bg-primary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}

တိတ်

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

ညောင်ပင်

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 များကို ပြင်ဆင်ပါ။

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

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

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

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

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

@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 အသုံးအဆောင်များ ပျောက်ဆုံးနေပါသလား သို့မဟုတ် အခြားအမည်ပေးခြင်းဆိုင်ရာ ကွန်ဗင်းရှင်းတွင် အသုံးပြုပါသလား။ ပေးထားသော utility တစ်ခု၏ ရလဒ်ကို အစားထိုးရန် utilities API ကို သုံးနိုင်သည် class—ဥပမာ၊ .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 တွင် မည်သည့်အရာမှ မထုတ်ပေးပါ ။