Utility API

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

بۇ بەتتە

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

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

تاللانما	تىپ	چۈشەندۈرۈش
`property`	تەلەپ قىلىنىدۇ	مۈلۈكنىڭ ئىسمى ، بۇ بىر قۇر ياكى بىر قاتار تىزمىلار بولۇشى مۇمكىن (مەسىلەن گورىزونتال تاختاي ياكى گىرۋەك).
`values`	تەلەپ قىلىنىدۇ	ئەگەر سىنىپ نامىنىڭ قىممەت بىلەن ئوخشاش بولۇشىنى خالىمىسىڭىز ، قىممەت تىزىملىكى ياكى خەرىتە. ئەگەر `null`خەرىتە ئاچقۇچى سۈپىتىدە ئىشلىتىلگەن بولسا ، ئۇ تۈزۈلمىگەن.
`class`	ئىختىيارىي	ئەگەر مۈلۈكنىڭ ئوخشاش بولۇشىنى خالىمىسىڭىز ، سىنىپ نامىنىڭ ئۆزگىرىشى. ئەگەر ئاچقۇچ بىلەن تەمىنلىمىسىڭىز ، `class`ئاچقۇچ `property`بىر گۇرۇپپا تىزمىلار بولسا ، سىنىپ ئىسمى `property`سانلار گۇرپىسىنىڭ بىرىنچى ئېلېمېنتى بولىدۇ.
`state`	ئىختىيارىي	`:hover`پايدىلىق ياكى `:focus`ھاسىل قىلىدىغان ساختا تۈردىكى ۋارىيانتلارنىڭ تىزىملىكى . سۈكۈتتىكى قىممىتى يوق.
`responsive`	ئىختىيارىي	Boolean ئىنكاسچان دەرس ھاسىل قىلىش كېرەكلىكىنى كۆرسىتىپ بېرىدۇ. `false`سۈكۈت بويىچە.
`rfs`	ئىختىيارىي	سۇيۇقلۇقنى ئەسلىگە كەلتۈرۈش ئۈچۈن Boolean. بۇنىڭ قانداق ئىشلەيدىغانلىقىنى بىلىش ئۈچۈن RFS بېتىگە قاراڭ . `false`سۈكۈت بويىچە.
`print`	ئىختىيارىي	Boolean بېسىپ چىقىرىش سىنىپى ھاسىل قىلىش كېرەكلىكىنى كۆرسىتىپ بېرىدۇ. `false`سۈكۈت بويىچە.
`rtl`	ئىختىيارىي	Boolean RTL دا ئىشلىتىشچانلىقىنى ساقلاش كېرەكلىكىنى كۆرسىتىپ بېرىدۇ. `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; }

Custom class prefix

classتوپلانغان CSS دا ئىشلىتىلىدىغان سىنىپ ئالدى قوشۇلغۇچىسىنى ئۆزگەرتىش تاللانمىسىنى ئىشلىتىڭ :

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

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

مەسئۇلىيەتچان مۇلازىمەتلەر

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

ئاممىۋى ئەسلىھەلەرنى ئۆزگەرتىش

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

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

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

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

$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 دا ھېچقانداق نەرسە چىقارمايدۇ .