Utility API

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

Boggan

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, lama ururin
`class`	Ikhtiyaar ah	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.
`css-var`	Ikhtiyaar ah	`false`	Boolean si uu u dhaliyo doorsoomayaasha CSS beddelka xeerarka CSS.
`local-vars`	Ikhtiyaar ah	waxba	Khariidadda doorsoomayaasha CSS ee deegaanka si loo soo saaro marka lagu daro xeerarka CSS.
`state`	Ikhtiyaar ah	waxba	Liiska noocyada kala duwan ee been-abuurka ah (tusaale, `:hover`ama `:focus`) si loo soo saaro.
`responsive`	Ikhtiyaar ah	`false`	Boolean oo tilmaamaysa haddii fasallo jawaab celin ah la soo saarayo.
`rfs`	Ikhtiyaar ah	`false`	Boolean si uu awood ugu yeesho dib u habeynta dareeraha ee RFS .
`print`	Ikhtiyaar ah	`false`	Boolean oo tilmaamaysa haddii fasallada daabacaadda loo baahan yahay in la soo saaro.
`rtl`	Ikhtiyaar ah	`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; }

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. Tixgeli .text-opacity-*adeegyadayada:

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

Natiijada:

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

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 mugdiga dul heehaabaya, 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 adeegyada uu soo saaray API-ga waxaa ka mid ah !importantsi loo hubiyo in ay meesha ka saareen qaybaha iyo fasallada 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 utility-ga u shaqeeyo, baro sida loogu daro fasalladaada gaarka ah oo wax ka beddel adeegyadayada caadiga ah.

Meesha ka saar adeegyada

Burburi utility-yada 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/utilities";

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

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 qiimo dheeraad ah widthyutiilitida. Ku bilow bilow 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 beddesho ikhtiyaarka iyo qiyamka utility-ga.

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

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/utilities";

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

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/utilities";

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

Ka saar utility

Ka saar mid ka mid ah utility-yada caadiga ah adiga oo dejinaya furaha kooxda null. Tusaale ahaan, si aan meesha uga saarno dhammaan widthadeegyadayada, samee a $utilities map-mergeoo ku darso "width": nullgudaha.

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

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

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 .