Utility API

Utility API waa qalab ku salaysan Sass si loo dhaliyo fasalada tamarta.

Boggaan

Utility Bootstrap waxaa lagu soo saaray utility API waxaana loo isticmaali karaa in lagu beddelo ama lagu kordhiyo qaybtayada fasalka utility ee Sass. Utility API wuxuu ku salaysan yahay taxane ah khariidado Sass iyo hawlaha loogu talagalay soo saarista qoysaska fasallada leh doorashooyin kala duwan. Haddii aadan aqoon u lahayn khariidadaha Sass, ka akhri dokumentiyada rasmiga ah ee Sass si aad u bilowdo.

Khariidaddu $utilitieswaxa ay ka kooban tahay dhammaan agabkayaga oo markii dambe lagu daray $utilitieskhariidaddaada gaarka ah, haddii ay jirto. Khariidadda tas-hiilaadka waxa ku jira liis fure ah oo kooxaha utility ah kuwaas oo aqbala xulashooyinka soo socda:

Ikhtiyaarka	Nooca	Qiimaha caadiga ah	Sharaxaada
`property`	Loo baahan yahay	-	Magaca hantida, kani wuxuu noqon karaa xadhig ama xargo kala duwan (tusaale, suufyo toosan ama margins).
`values`	Loo baahan yahay	-	Liiska qiimayaasha, ama khariidad haddii aadan rabin in magaca fasalka uu la mid noqdo qiimaha. Haddii `null`loo isticmaalo furaha khariidad ahaan, `class`looma sii hor marin magaca fasalka.
`class`	Ikhtiyaari	waxba	Magaca fasalka la sameeyay. Haddi aan la bixin oo `property`ay tahay xargaha kala duwan, `class`waxa ay ku dhici doontaa qaybta koowaad ee `property`shaxanka. Haddii aan la bixin oo `property`uu yahay xadhig, `values`furayaasha waxaa loo isticmaalaa `class`magacyada.
`css-var`	Ikhtiyaari	`false`	Boolean si uu u dhaliyo doorsoomayaasha CSS beddelka xeerarka CSS.
`css-variable-name`	Ikhtiyaari	waxba	Magaca gaarka ah ee aan horgalahayn ee doorsoomiyaha CSS ee gudaha xeerarka.
`local-vars`	Ikhtiyaari	waxba	Khariidadda doorsoomayaasha CSS ee deegaanka si loo soo saaro marka lagu daro xeerarka CSS.
`state`	Ikhtiyaari	waxba	Liiska noocyada kala duwan ee been-abuurka ah (tusaale, `:hover`ama `:focus`) si loo soo saaro.
`responsive`	Ikhtiyaari	`false`	Boolean oo tilmaamaysa haddii fasallo jawaab celin ah la soo saarayo.
`rfs`	Ikhtiyaari	`false`	Boolean si uu awood ugu yeesho dib u habeynta dareeraha ee RFS .
`print`	Ikhtiyaari	`false`	Boolean oo tilmaamaysa haddii fasallada daabacaadda loo baahan yahay in la soo saaro.
`rtl`	Ikhtiyaari	`true`	Boolean oo tilmaamaysa in utility ay tahay in lagu hayo RTL.

API ayaa sharaxay

Dhammaan doorsoomayaasha utility waxaa lagu daraa $utilitiesdoorsoomayaasha ku jira xaashida qaabkeena _utilities.scss. Koox kasta oo adeegyadu waxay u egtahay sidan:

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

Kaas oo soo saara kuwan soo socda:

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

Hanti

Furaha loo baahan yahay propertywaa in loo dejiyaa adeeg kasta, waana inuu ka kooban yahay hanti CSS oo sax ah. Gurigan waxa loo isticmaalaa xeerka utility-ga la soo saaray. Marka classfuraha la saaro, waxa kale oo uu u adeegaa sida magaca fasalka caadiga ah. Tixgeli text-decorationtamarta:

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

Natiijada:

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

Qiimaha

Isticmaal valuesfuraha si aad u qeexdo qiyamka la cayimay propertywaa in lagu isticmaalo magacyada fasalka iyo xeerarka. Waxay noqon kartaa liis ama khariidad (lagu dhejiyay yutiilitida ama doorsoome Sass ah).

Liis ahaan, sida text-decorationyutiilitida :

values: none underline line-through

Khariidad ahaan, sida opacityagabka :

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

Sida doorsoome Sass ah oo dejinaya liiska ama khariidad, sida ku jira positionadeegyadeena :

values: $position-values

Fasalka

Isticmaal classikhtiyaarka si aad u bedesho horgalaha fasalka ee lagu isticmaalo CSS-ga la soo ururiyey. Tusaale ahaan, in laga .opacity-*beddelo .o-*:

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

Natiijada:

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

Haddii class: null, ay u abuurto fasallo mid kasta oo ka mid ah valuesfurayaasha:

$utilities: (
  "visibility": (
    property: visibility,
    class: null,
    values: (
      visible: visible,
      invisible: hidden,
    )
  )
);

Natiijada:

.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }

Utility variable CSS

U deji css-varikhtiyaarka boolean true-ka API-ga wuxuu u soo saari doonaa doorsoomayaasha CSS ee gudaha doorsoomiyaha la siiyay beddelka property: valuexeerarka caadiga ah. Ku dar ikhtiyaari css-variable-namesi aad u dejiso magac doorsoome CSS oo ka duwan magaca fasalka.

Tixgeli .text-opacity-*adeegyadayada. Haddii aan ku darno css-variable-nameikhtiyaarka, waxaan heli doonaa wax soo saar caadi ah.

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

Natiijada:

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

Doorsoomayaasha CSS ee maxaliga ah

Isticmaal local-varsikhtiyaarka si aad u qeexdo khariidadda Sass kaas oo dhalin doona doorsoomayaasha CSS ee gudaha xeerka fasalka utility. Fadlan ogow inay u baahan karto shaqo dheeraad ah si loo isticmaalo doorsoomayaasha CSS-ta deegaanka ee xeerarka CSS ee la soo saaray. Tusaale ahaan, tixgeli .bg-*adeegyadayada:

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

Natiijada:

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

Gobolada

Isticmaal stateikhtiyaarka si aad u abuurto kala duwanaansho-class been abuur ah. Tusaale ahaan fasalada been abuurka ah waa :hoveriyo :focus. Marka liiska gobolada la bixiyo, fasalada waxaa loo sameeyay fasalka been abuurka ah. Tusaale ahaan, si aad u bedesho opacity-ka dul heehaabaynta, ku dar state: hoveroo waxaad geli doontaa .opacity-hover:hoverCSS-gaaga la soo ururiyey.

Ma u baahan tahay fasallo been abuur ah oo badan? Isticmaal liiska meel bannaan ee gobolada: state: hover focus.

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

Natiijada:

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

Ka jawaaba

Ku dar responsiveboolean-ka si aad u abuurto adeegaha waxka qabta (tusaale, .opacity-md-25) dhammaan goobaha nasashada .

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

Natiijada:

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

Daabac

Awood u yeelashada printikhtiyaarka waxay sidoo kale dhalin doontaa fasalada utility ee daabacaadda, kuwaas oo kaliya lagu dabaqo @media print { ... }su'aalaha warbaahinta.

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

Natiijada:

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

Muhiimada

Dhammaan yutiilitiyada uu soo saaray API waxaa ka mid ah !importantsi loo hubiyo inay meesha ka saareen qaybaha iyo fasalada wax ka beddelka sidii loogu talagalay. Waxaad ku beddeli kartaa goobtan si caalami ah $enable-important-utilitiesdoorsoomayaasha ( ugu talagal true).

Isticmaalka API-ga

Hadda oo aad taqaan sida API-ga utilities u shaqeeyo, baro sida loogu daro fasalladaada gaarka ah oo wax ka beddel utility our default.

Meesha ka saar adeegyada

Tirtir waxyaalaha hadda jira adiga oo isticmaalaya fure isku mid ah. Tusaale ahaan, haddii aad rabto fasalada tamarta buuxdhaafka ah ee ka jawaabaya, waxaad samayn kartaa sidan:

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

Ku dar adeegyada

Adeegyo cusub ayaa lagu dari karaa $utilitieskhariidadda caadiga ah oo leh a map-merge. Hubi in faylasha Sass ee loo baahan yahay oo _utilities.scssmarka hore la soo dejiyo, ka dibna isticmaal kuwa map-mergeaad ku dari karto adeegyadaaga dheeraadka ah. Tusaale ahaan, waa kan sida loogu daro cursorutility ka jawaabaya oo leh saddex qiime.

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

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

@import "bootstrap/scss/utilities/api";

Wax ka beddel adeegyada

Wax ka beddel adeegyada jira ee ku jira $utilitieskhariidadda caadiga ah oo leh map-getoo map-mergeshaqeeya. Tusaalaha hoose, waxaanu ku daraynaa qiime dheeraad ah widthyutiilitida. Ku bilow bilawga map-mergeka dibna cadee utility aad rabto inaad wax ka bedesho. Halkaa, ka soo qaado "width"khariidadda buulka leh map-getsi aad u gasho oo aad wax uga bedesho ikhtiyaarka iyo qiyamka utility-ga.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@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%),
        ),
      ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

Daar ka jawaab celinta

Waxaad awood u siin kartaa fasalo jawaab celin ah oo ku saabsan qalabyada jira ee aan hadda si caadi ah uga jawaabin. Tusaale ahaan, si borderfasalada looga dhigo kuwo jawaab celin leh:

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

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

@import "bootstrap/scss/utilities/api";

Tani waxay hadda dhalin doontaa kala duwanaansho jawaab celin ah .borderoo .border-0meel kasta oo jaban ah. CSS kaaga ayaa u ekaan doona sidan:

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

Magacaabida utilities

Utility v4 maqan, ama loo isticmaalo heshiis magacaabid kale? Utilities API waxa loo istcimaali karaa in lagu buriyo natiijada classka soo baxda utility-ga la bixiyay—tusaale ahaan, in loogu .ms-*magacdaro yutiilitida .ml-*:

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

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

@import "bootstrap/scss/utilities/api";

Ka saar utility

Ka saar mid ka mid ah utility-yada caadiga ah ee leh map-remove()shaqada Sass .

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

// Remove multiple utilities with a comma-separated list
$utilities: map-remove($utilities, "width", "float");

@import "bootstrap/scss/utilities/api";

Waxa kale oo aad isticmaali kartaa map-merge()shaqada Sass oo aad dejin kartaa furaha kooxda si nullaad meesha uga saarto utility-ga.

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

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

@import "bootstrap/scss/utilities/api";

Ku dar, ka saar, wax ka beddel

Waxaad ku dari kartaa, saari kartaa, oo aad wax ka beddeli kartaa adeegyo badan oo isku mar ah map-merge()shaqada Sass . Waa kan sida aad isugu dari karto tusaalooyinkii hore hal khariidad ka weyn.

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

$utilities: map-merge(
  $utilities,
  (
    // Remove the `width` utility
    "width": null,

    // Make an existing utility responsive
    "border": map-merge(
      map-get($utilities, "border"),
      ( responsive: true ),
    ),

    // Add new utilities
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

@import "bootstrap/scss/utilities/api";

Ka saar utility gudaha RTL

Kiisaska cidhifyada qaarkood waxay ka dhigaan qaabaynta RTL mid adag , sida jebinta khadka ee Carabiga. Markaa yutiilitida waxaa laga tuuri karaa wax soo saarka RTL iyadoo la dejinayo rtlikhtiyaarka ah false:

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

Natiijada:

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

Tani waxba kama soo saarayso RTL, iyadoo ay ugu wacan tahay dardaaranka xakamaynta RTLCSSremove .