Utility API

Utility API, peýdaly synplary döretmek üçin Sass esasly guraldyr.

Bu sahypada

“Bootstrap” kömekçi enjamlary “API” bilen döredilýär we Sass arkaly deslapky peýdaly synplar toplumymyzy üýtgetmek ýa-da giňeltmek üçin ulanylyp bilner. Biziň peýdaly API, Sass kartalarynyň we dürli wariantlary bolan synp maşgalalaryny döretmek üçin funksiýalara esaslanýar. Sass kartalary bilen tanyş däl bolsaňyz, başlamak üçin resmi Sass resminamalaryny okaň.

Kartada $utilitiesähli hyzmatlarymyz bar we bar bolsa, adaty $utilitieskartaňyz bilen birleşdirilýär. Peýdaly kartada aşakdaky wariantlary kabul edýän peýdaly toparlaryň esasy sanawy bar:

Wariant	Görnüşi	Düşündiriş
`property`	Gerekli	Emlägiň ady, bu setir ýa-da setirler toplumy bolup biler (mysal üçin, gorizontal paddingler ýa-da gyralar).
`values`	Gerekli	Gymmatlyklaryň sanawy, ýa-da synp adynyň bahasy bilen deň bolmagyny islemeýän bolsaňyz. Karta `null`açary hökmünde ulanylsa, düzülmeýär.
`class`	Meýletin	Emläk bilen birmeňzeş bolmagyny islemeýän bolsaňyz, synpyň ady üçin üýtgeýän. `class`Açar we açar setirler toplumy bilen üpjün etmeseňiz `property`, synpyň ady `property`massiwiň birinji elementi bolar.
`state`	Meýletin	`:hover`Peýdaly ýa-da peýdaly bolmak üçin ýasama synp görnüşleriniň sanawy `:focus`. Bellenen baha ýok.
`responsive`	Meýletin	Duýgur synplaryň döredilmelidigini görkezýän Boolean. `false`tertip boýunça.
`rfs`	Meýletin	Suwuklygy halas etmegi üpjün etmek üçin Boolean. Munuň nähili işleýändigini bilmek üçin RFS sahypasyna göz aýlaň . `false`tertip boýunça.
`print`	Meýletin	Çap sapaklarynyň döredilmelidigini görkezýän Boolean. `false`tertip boýunça.
`rtl`	Meýletin	Kömekçi RTL-de saklanmalydygyny görkezýän Boolean. `true`tertip boýunça.

API düşündirdi

Uthli peýdaly üýtgeýjiler stil tablisamyzdaky $utilitiesüýtgeýjä goşulýar. _utilities.scssJemgyýetçilik hyzmatlarynyň her topary şuňa meňzeýär:

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

Aşakdakylar:

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

Classörite synp prefiksi

classToplanan CSS-de ulanylýan synp prefiksini üýtgetmek opsiýasyny ulanyň :

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

Çykyş:

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

Ştatlar

statePseudo-klass üýtgeýişleri döretmek üçin opsiýany ulanyň . Pseudo-klaslara mysal :hoverwe :focus. Ştatlaryň sanawy berlende, şol pseudo-synp üçin synp atlary döredilýär. Mysal üçin, aýlawda aç-açanlygy üýtgetmek üçin goşuň state: hoverwe .opacity-hover:hoverdüzülen CSS-ä girersiňiz.

Birnäçe ýasama synp gerekmi? Boşluk bilen bölünen ştatlaryň sanawyny ulanyň : state: hover focus.

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

Çykyş:

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

Jogapkärçilikli kömekçi enjamlar

Breakhli kesiş nokatlarynda täsirliresponsive kömekçi enjamlary (meselem .opacity-md-25) döretmek üçin “Boolean” goşuň .

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

Çykyş:

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

Kärhanalary üýtgetmek

Şol bir düwmäni ulanyp, bar bolan kömekçi enjamlary ýok ediň. Mysal üçin, goşmaça ses beriş peýdaly synplary isleseňiz, muny edip bilersiňiz:

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

Çap ediş hyzmatlary

Bu printopsiýany açmak, diňe media gözleginde ulanylýan çap etmek üçin peýdaly sapaklary döreder .@media print { ... }

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

Çykyş:

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

Möhümligi

API tarapyndan döredilen ähli hyzmatlar, !importantkomponentleri we üýtgediji synplary göz öňünde tutulşy ýaly ýok etmegini üpjün edýär. Bu sazlamany $enable-important-utilitiesüýtgeýji bilen ( global tertipde true) üýtgedip bilersiňiz.

API ulanmak

Utilities API-iň işleýşi bilen tanyş bolanyňyzdan soň, öz aýratyn synplaryňyzy goşmagy we deslapky kömekçi hyzmatlarymyzy üýtgetmegi öwreniň.

Kärhana goşuň

$utilitiesTäze kömekçi enjamlar, adaty karta a bilen goşulyp bilner map-merge. Gerekli Sass faýllarymyza we ilki import edilýändigine göz ýetiriň _utilities.scss, soňra map-mergegoşmaça hyzmatlaryňyzy goşmak üçin ulanyň. Mysal üçin, cursorüç bahaly jogap beriji peýdany nädip goşmaly.

@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,
    )
  )
);

Kärhanalary üýtgediň

Bar bolan hyzmatlary deslapky $utilitieskartada map-getwe map-mergefunksiýalar bilen üýtgediň. Aşakdaky mysalda, widthkommunal hyzmatlara goşmaça baha goşýarys. Başlangyçdan başlaň map-mergewe soňra haýsy peýdaly zady üýtgetmek isleýändigiňizi görkeziň. Şol ýerden, peýdaly wariantlara we gymmatlyklara girmek we üýtgetmek üçin "width"ýerleşdirilen kartany alyň.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%),
        ),
      ),
    ),
  )
);

Jogap bermäge mümkinçilik beriň

Bar bolan kömekçi toplumy üçin häzirki wagtda adaty ýagdaýda jogap bermeýän synplary açyp bilersiňiz. Mysal üçin, bordersapaklary täsirli etmek üçin:

@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 ),
    ),
  )
);

Bu indi her nokat üçin täsirli üýtgeşiklikleri .borderdöreder . .border-0Döredilen CSS şeýle bolar:

.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 { ... }
}

Kärhanalaryň adyny üýtgediň

V4 kömekçi enjamlaryny ýitirýärsiňizmi ýa-da başga bir atlandyryş konwensiýasyna öwrenişdiňizmi? Utilities API berlen peýdanyň netijesini ýok etmek üçin ulanylyp bilner class, mysal üçin, .ms-*kommunal hyzmatlaryň adyny köne diýip üýtgetmek .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 ),
    ),
  )
);

Kärhanalary aýyryň

Topar düwmesini açyp, deslapky kömekçi enjamlaryň islendigini aýyryň null. Mysal üçin, ähli widthhyzmatlarymyzy aýyrmak, a döretmek $utilities map-mergewe içerde goşmak "width": null.

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

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

RTL-de kömekçi enjamy aýyryň

Käbir gyradaky ýagdaýlar , arap dilinde setir kesilmegi ýaly RTL stilini kynlaşdyrýar . rtlŞeýlelik bilen, kommunal hyzmatlary opsiýany düzmek bilen RTL çykyşyndan taşlap bolýar false:

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

Çykyş:

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

RTLCSS removedolandyryş görkezmesiniň kömegi bilen bu RTL-de hiç zat çykarmaýar .