U gudub nuxurka muhiimka ah U gudub dukumentiyada navigation
in English

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 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 nullloo isticmaalo furaha khariidad ahaan, lama ururin
class Ikhtiyaari U beddelan karo magaca fasalka haddii aadan rabin inuu la mid noqdo hantida. Haddii ay dhacdo in aad bixin waydo classfuraha oo propertyfuruhu uu yahay tiro xargo ah, magaca fasalku waxa uu noqonayaa qaybta koowaad ee propertyshaxda.
state Ikhtiyaari Liiska noocyada kala duwan ee been-abuurka ah sida :hoverama :focusloo soo saaro utility. Wax qiimo ah malaha
responsive Ikhtiyaari Boolean oo tilmaamaysa haddii loo baahan yahay in la soo saaro fasallo ka jawaabaya. falsesida caadiga ah.
rfs Ikhtiyaari Boolean si ay awood ugu yeelato dib u kicinta dareeraha. U fiirso bogga RFS si aad u ogaato sida tani u shaqeyso. falsesida caadiga ah.
print Ikhtiyaari Boolean oo tilmaamaysa haddii fasallada daabacaadda loo baahan yahay in la soo saaro. falsesida caadiga ah.
rtl Ikhtiyaari Boolean oo tilmaamaysa in utility ay tahay in lagu hayo RTL. truesida caadiga ah.

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

Horgalaha fasalka gaarka ah

Isticmaal classikhtiyaarka si aad u bedesho horgalaha fasalka ee lagu isticmaalo CSS-ga la soo ururiyey:

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

Natiijada:

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

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

Utility ka jawaabaya

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

Beddelka tamarta

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

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.

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 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/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 .