Utility API

ئەمەلىي قوللىنىشچان API بولسا Sass نى ئاساس قىلغان قورال بولۇپ ، دەرسلىكلەرنى ھاسىل قىلىدۇ.

بۇ بەتتە

Bootstrap ئەسلىھەلىرى بىزنىڭ API API ئارقىلىق ھاسىل قىلىنغان بولۇپ ، Sass ئارقىلىق سۈكۈتتىكى يۈرۈشلۈك دەرسلىكلىرىمىزنى ئۆزگەرتىش ياكى كېڭەيتىشكە ئىشلىتىلىدۇ. بىزنىڭ قوللىنىشچان API بىر يۈرۈش Sass خەرىتىسى ۋە ھەر خىل تاللاشلار بىلەن سىنىپ ئائىلىلىرىنى بارلىققا كەلتۈرۈش ئىقتىدارلىرىنى ئاساس قىلىدۇ. ئەگەر سىز Sass خەرىتىسىنى پىششىق بىلمىسىڭىز ، رەسمىي Sass ھۆججىتىنى ئوقۇپ چىقىڭ .

بۇ $utilitiesخەرىتە بىزنىڭ بارلىق ئەسلىھەلىرىمىزنى ئۆز ئىچىگە ئالىدۇ ، ئەگەر بار بولسا كېيىن ئۆزىڭىزنىڭ $utilitiesخەرىتىسى بىلەن بىرلەشتۈرۈلىدۇ. ئىشلىتىش خەرىتىسى تۆۋەندىكى تاللاشلارنى قوبۇل قىلىدىغان ئاچقۇچلۇق گۇرۇپپىلارنىڭ تىزىملىكىنى ئۆز ئىچىگە ئالىدۇ:

تاللاش	تىپ	كۆڭۈلدىكى قىممىتى	چۈشەندۈرۈش
`property`	تەلەپ قىلىنىدۇ	-	مۈلۈكنىڭ ئىسمى ، بۇ بىر قۇر ياكى بىر قاتار تىزمىلار بولۇشى مۇمكىن (مەسىلەن گورىزونتال تاختاي ياكى گىرۋەك).
`values`	تەلەپ قىلىنىدۇ	-	ئەگەر سىنىپ نامىنىڭ قىممەت بىلەن ئوخشاش بولۇشىنى خالىمىسىڭىز ، قىممەت تىزىملىكى ياكى خەرىتە. ئەگەر `null`خەرىتە ئاچقۇچى سۈپىتىدە ئىشلىتىلگەن بولسا ، ئۇ تۈزۈلمىگەن.
`class`	ئىختىيارىي	null	ھاسىل قىلىنغان سىنىپنىڭ ئىسمى. ئەگەر تەمىنلەنمىگەن ھەمدە `property`بىر قاتار تىزمىلار بولسا ، سانلار گۇرپىسىنىڭ `class`بىرىنچى ئېلېمېنتىغا سۈكۈت قىلىدۇ `property`.
`css-var`	ئىختىيارىي	`false`	Boolean CSS قائىدىسىنىڭ ئورنىغا CSS ئۆزگەرگۈچى مىقدار ھاسىل قىلىدۇ.
`local-vars`	ئىختىيارىي	null	يەرلىك CSS ئۆزگەرگۈچى مىقدارنىڭ خەرىتىسى CSS قائىدىسىدىن باشقا.
`state`	ئىختىيارىي	null	ھاسىل قىلىدىغان ساختا تۈردىكى ۋارىيانتلارنىڭ تىزىملىكى (مەسىلەن ، `:hover`ياكى `:focus`).
`responsive`	ئىختىيارىي	`false`	ئىنكاسچان دەرس ھاسىل قىلىش كېرەكلىكىنى كۆرسىتىش.
`rfs`	ئىختىيارىي	`false`	Boolean RFS ئارقىلىق سۇيۇقلۇقنى ئەسلىگە كەلتۈرۈشنى قوزغىتىدۇ .
`print`	ئىختىيارىي	`false`	Boolean بېسىپ چىقىرىش سىنىپى ھاسىل قىلىش كېرەكلىكىنى كۆرسىتىپ بېرىدۇ.
`rtl`	ئىختىيارىي	`true`	Boolean RTL دا ئىشلىتىشچانلىقىنى ساقلاش كېرەكلىكىنى كۆرسىتىپ بېرىدۇ.

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ئاچقۇچ چوقۇم ھەر قانداق بىر ئىقتىدار ئۈچۈن بېكىتىلىشى كېرەك ، ئۇنىڭدا چوقۇم ئۈنۈملۈك CSS خاسلىقى بولۇشى كېرەك. بۇ خاسلىق ھاسىل قىلىنغان ئەمەلىي ئىشلىتىش قائىدىسىدە ئىشلىتىلىدۇ. ئاچقۇچ 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 ئۆزگەرگۈچى مىقداردا).

تىزىملىك سۈپىتىدە ، text-decorationئاممىۋى ئەسلىھەلەرگە ئوخشاش :

values: none underline line-through

خەرىتە سۈپىتىدە ، opacityئاممىۋى ئەسلىھەلەرگە ئوخشاش :

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

positionتىزىملىك ياكى خەرىتىنى بەلگىلەيدىغان Sass ئۆزگەرگۈچى مىقدار بولۇش سۈپىتىمىز بىلەن :

values: $position-values

سىنىپ

بۇ classتاللاشنى ئىشلىتىپ تۈزۈلگەن CSS دا ئىشلىتىلىدىغان سىنىپ ئالدى قوشۇلغۇچىسىنى ئۆزگەرتىڭ. مەسىلەن ، .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; }

يەرلىك CSS ئۆزگەرگۈچى مىقدار

بۇ local-varsتاللاشتىن پايدىلىنىپ ، Sass خەرىتىسىنى بەلگىلەڭ ، ئۇ ئاممىۋى دەرسلىك قائىدىسىدە يەرلىك CSS ئۆزگەرگۈچى مىقدار ھاسىل قىلىدۇ. شۇنىڭغا دىققەت قىلىڭكى ، ھاسىل قىلىنغان 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;
}

States

تاللاشتىن پايدىلىنىپ stateساختا تۈردىكى ئۆزگىرىش ھاسىل قىلىڭ. مىسال ساختا دەرسلەر :hoverۋە :focus. ئىشتاتلار تىزىملىكى تەمىنلەنگەندە ، بۇ ساختا سىنىپ ئۈچۈن سىنىپ ئىسمى قۇرۇلدى. مەسىلەن ، قوزغاتقۇچنىڭ سۈزۈكلۈكىنى ئۆزگەرتىش ئۈچۈن ، قوشۇڭ state: hoverۋە .opacity-hover:hoverتۈزگەن CSS غا كىرىسىز.

كۆپ ساختا دەرسكە ئېھتىياجلىقمۇ؟ بوشلۇق بىلەن ئايرىلغان ھالەت تىزىملىكىنى ئىشلىتىڭ : 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

Boolean نى قوشۇپ ، بارلىق بۆسۈش نۇقتىلىرىداresponsive ئىنكاسچان ئىقتىدارلارنى ھاسىل قىلىڭ..opacity-md-25

$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 نى ئىشلىتىش

ھازىر API نىڭ قانداق ئىشلەيدىغانلىقىنى پىششىق بىلىسىز ، ئۆزىڭىزنىڭ ئىختىيارى دەرسلىرىنى قانداق قوشۇشنى ۋە سۈكۈتتىكى مۇلازىمەتلىرىمىزنى ئۆزگەرتىشنى ئۆگىنىۋېلىڭ.

ئاممىۋى مۇلازىمەتنى قاپلىۋېتىڭ

ئوخشاش ئاچقۇچنى ئىشلىتىپ مەۋجۇت ئەسلىھەلەرنى قاپلىۋېلىڭ. مەسىلەن ، قوشۇمچە ئىنكاس قايتۇرۇش ئېقىمى دەرسلىكىنى ئويلىسىڭىز ، بۇنى قىلالايسىز:

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

ئاممىۋى مۇلازىمەتلەرنى قوشۇڭ

$utilitiesسۈكۈتتىكى خەرىتەگە يېڭى ئىقتىدارلارنى قوشقىلى بولىدۇ map-merge. لازىملىق Sass ھۆججىتىمىزنى جەزملەشتۈرۈڭ ھەمدە _utilities.scssئالدى بىلەن ئىمپورت قىلىڭ ، ئاندىن map-mergeقوشۇمچە قوراللىرىڭىزنى قوشۇڭ. مەسىلەن ، بۇ يەردە 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خەرىتە map-getۋە map-mergeئىقتىدارلار بىلەن بار بولغان ئىقتىدارلارنى ئۆزگەرتىڭ. تۆۋەندىكى مىسالدا ، بىز ئاممىۋى مۇلازىمەتكە قوشۇمچە قىممەت widthقوشىمىز. دەسلەپتە باشلاڭ ، 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%),
        ),
      ),
    ),
  )
);

ئىنكاس قايتۇرۇشنى قوزغىتىڭ

ھازىر بار بولغان بىر يۈرۈش ئاممىۋى مۇلازىمەتلەر ئۈچۈن كۆڭۈلدىكىدەك دەرسلەرنى قوزغىتالايسىز. مەسىلەن ، 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 ),
    ),
  )
);

بۇ ھازىر ھەر بىر بۆسۈش ئېغىزىنىڭ .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 ئەسلىھەلىرى يوقاپ كەتتىمۇ ياكى باشقا ئىسىم قويۇش يىغىنىغا كۆنۈپ قالدىمۇ؟ بۇ ئىقتىدار API نى مەلۇم بىر ئەمەلىي ئۈنۈمنىڭ نەتىجىسىنى قاپلىغىلى بولىدۇ ، classمەسىلەن ، ئاممىۋى .ms-*ئەسلىھەلەرنىڭ نامىنى كوناغا ئۆزگەرتىش .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 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 دا ھېچقانداق نەرسە چىقارمايدۇ .