Erabilgarritasun APIa

Utility API Sass-en oinarritutako tresna bat da, erabilgarritasun-klaseak sortzeko.

Orrialde honetan

Bootstrap utilitateak gure erabilgarritasun APIarekin sortzen dira eta Sass-en bidez gure erabilgarritasun-klase multzo lehenetsiak aldatzeko edo zabaltzeko erabil daitezke. Gure erabilgarritasun APIa Sass mapa eta funtzio multzo batean oinarritzen da, hainbat aukera dituzten klase-familiak sortzeko. Sass mapak ezagutzen ez badituzu, irakurri Sass dokumentu ofizialak hasteko.

Mapak $utilitiesgure utilitate guztiak ditu eta gero zure mapa pertsonalizatuarekin bateratzen da $utilities, baldin badago. Erabilgarritasun-mapak aukera hauek onartzen dituzten erabilgarritasun-taldeen zerrenda bat dauka:

Aukera	Mota	Balio lehenetsia	Deskribapena
`property`	Beharrezkoa	–	Propietatearen izena, kate bat edo kate-matrize bat izan daiteke (adibidez, betegarri horizontalak edo marjinak).
`values`	Beharrezkoa	–	Balioen zerrenda edo mapa bat ez baduzu nahi klasearen izena balioaren berdina izatea. `null`Maparen gako gisa erabiltzen bada , `class`ez dago klasearen izenaren aurretik.
`class`	Aukerakoa	nulua	Sortutako klasearen izena. Ematen ez bada eta `property`kateen array bat bada, matrizeko `class`lehen elementua izango da lehenetsia `property`. Ematen ez bada eta `property`kate bat bada, `values`gakoak erabiltzen dira `class`izenetarako.
`css-var`	Aukerakoa	`false`	Boolearra CSS arauen ordez CSS aldagaiak sortzeko.
`css-variable-name`	Aukerakoa	nulua	Arau multzoko CSS aldagaiaren aurrizkirik gabeko izen pertsonalizatua.
`local-vars`	Aukerakoa	nulua	Tokiko CSS aldagaien mapa CSS arauez gain sortzeko.
`state`	Aukerakoa	nulua	Sortu beharreko sasi-klaseen aldaeren zerrenda (adibidez, `:hover`edo `:focus`).
`responsive`	Aukerakoa	`false`	Klase sentikorrak sortu behar diren ala ez adierazten duen boolearra.
`rfs`	Aukerakoa	`false`	Boolearra RFS-rekin fluidoen berreskalatzea gaitzeko .
`print`	Aukerakoa	`false`	Inprimatzeko klaseak sortu behar diren adierazten duen boolearra.
`rtl`	Aukerakoa	`true`	Baliagarritasuna RTL-n mantendu behar den adierazten duen boolearra.

API azaldu da

$utilitiesErabilgarritasun-aldagai guztiak gure _utilities.scssestilo -orri barruan aldagaiari gehitzen zaizkio . Utilitate talde bakoitzak honelako itxura du:

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

Honek hurrengoa ateratzen du:

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

Jabetza

Beharrezko propertygakoa edozein utilitatetarako ezarri behar da, eta baliozko CSS propietate bat izan behar du. Propietate hau sortutako utilitatearen arau multzoan erabiltzen da. Gakoa baztertzen denean class, klase-izen lehenetsi gisa ere balio du. Kontuan izan text-decorationerabilgarritasuna:

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

Irteera:

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

Balioak

Erabili gakoa sortutako klaseen izenetan eta arauetan valueszehaztutako zein balio erabili behar diren zehazteko. propertyZerrenda edo mapa izan daiteke (utilitateetan edo Sass aldagai batean ezarrita).

Zerrenda gisa, text-decorationutilitateekin bezala :

values: none underline line-through

Mapa gisa, opacityutilitateekin bezala :

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

Zerrenda edo mapa ezartzen duen Sass aldagai gisa, gure positionutilitateetan bezala :

values: $position-values

Klasea

Erabili classaukera konpilatutako CSS-an erabiltzen den klase-aurrizkia aldatzeko. Adibidez, hona .opacity-*aldatzeko .o-*:

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

Irteera:

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

Bada class: null, klaseak sortzen ditu valuesgako bakoitzarentzat:

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

Irteera:

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

CSS aldagaien utilitateak

Ezarri css-varaukera boolearra trueeta APIak tokiko CSS aldagaiak sortuko ditu emandako hautatzailerako, ohiko property: valuearauen ordez. Gehitu aukerako css-variable-namebat klasearen izena baino CSS aldagai-izen ezberdin bat ezartzeko.

Kontuan hartu gure .text-opacity-*utilitateak. Aukera gehitzen css-variable-namebadugu, irteera pertsonalizatua lortuko dugu.

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

Irteera:

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

CSS tokiko aldagaiak

Erabili local-varsaukera erabilgarritasun klasearen arau-multzoan CSS tokiko aldagaiak sortuko dituen Sass mapa bat zehazteko. Kontuan izan litekeela lan gehiago behar dela CSS aldagai lokal horiek sortutako CSS arauetan kontsumitzeko. Adibidez, kontuan hartu gure .bg-*utilitateak:

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

Irteera:

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

Estatuak

Erabili stateaukera sasi-klaseen aldakuntzak sortzeko. Sasi-klase adibideak :hovereta dira :focus. Egoera zerrenda bat ematen denean, sasi-klase horretarako klase-izenak sortzen dira. Adibidez, pasatzean opakutasuna aldatzeko, gehitu state: hovereta .opacity-hover:hoverkonpilatutako CSS-an sartuko zara.

Sasi-klase anitz behar dituzu? Erabili zuriunez bereizitako egoera zerrenda bat: state: hover focus.

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

Irteera:

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

Erantzunkorra

Gehitu boolearra eten puntu guztietanresponsive erantzuteko utilitateak sortzeko (adibidez, .opacity-md-25) .

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

Irteera:

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

Inprimatu

printAukera gaituz gero , inprimatzeko erabilgarritasun-klaseak ere sortuko dira, @media print { ... }multimedia-kontsultaren barruan soilik aplikatzen direnak.

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

Irteera:

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

Garrantzia

APIak sortutako utilitate guztiek !importantosagaiak eta modifikatzaile klaseak nahi bezala gainidazten dituztela ziurtatzeko barne hartzen dute. Ezarpen hau orokorrean alda dezakezu $enable-important-utilitiesaldagaiarekin (lehenetsia true).

APIa erabiliz

Utilitateen APIak nola funtzionatzen duen ezagutzen duzunez, ikasi zure klase pertsonalizatuak gehitzen eta gure utilitate lehenetsiak aldatzen.

Gainidatzi utilitateak

Gainidatzi lehendik dauden utilitateak gako bera erabiliz. Esate baterako, gainezka-erabilgarritasun klase gehigarriak nahi badituzu, hau egin dezakezu:

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

Gehitu utilitateak

Utilitate berriak gehi daitezke $utilitiesmapa lehenetsian map-merge. Ziurtatu gure beharrezko Sass fitxategiak eta _utilities.scssinportatzen direla lehenik, eta gero erabili map-mergezure utilitate gehigarriak gehitzeko. cursorEsate baterako, hona hemen hiru balio dituen erabilgarritasun sentikorra nola gehitu .

@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";

Aldatu utilitateak

$utilitiesAldatu lehendik dauden utilitateak mapa lehenetsian map-geteta map-mergefuntzioekin. Beheko adibidean, balio gehigarri bat gehitzen ari gara widthutilitateei. Hasi hasierako batekin map-mergeeta, ondoren, zehaztu zein utilitate aldatu nahi duzun. Hortik aurrera, eskuratu habiaraturiko "width"mapa map-geterabilgarritasunaren aukerak eta balioak atzitzeko eta aldatzeko.

@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";

Gaitu erantzuleak

Modu lehenetsian erantzuten ez diren utilitate multzo baterako klase sentikorrak gaitu ditzakezu. Adibidez, borderklaseak erantzuteko:

@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";

Honek eten-puntu bakoitzaren .bordereta aldaera sentikorrak sortuko ditu orain . .border-0Sortutako CSS itxura hau izango du:

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

Aldatu izena utilitateei

v4 utilitateak falta dira, edo beste izendapen-konbentzio batera erabilita? Utilitateen APIa erabilgarritasun jakin baten emaitza gainidazteko erabil daiteke; classadibidez, .ms-*utilitateak zaharragora izendatzeko .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";

Kendu utilitateak

Kendu utilitate lehenetsiak map-remove()Sass funtzioarekin .

@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";

map-merge()Sass funtzioa ere erabil dezakezu eta taldeko tekla ezar nulldezakezu utilitatea kentzeko.

@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";

Gehitu, kendu, aldatu

map-merge()Sass funtzioarekin erabilgarritasun asko gehitu, kendu eta alda ditzakezu aldi berean . Hona hemen nola konbina ditzakezun aurreko adibideak mapa handiago batean.

@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";

Kendu utilitatea RTL-n

Ertz-kasu batzuek RTL estiloa zailtzen dute, hala nola arabierazko lerro-jauziak. Horrela, utilitateak RTL irteeratik ken daitezke rtlaukera hau ezarriz false:

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

Irteera:

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

Honek ez du ezer ateratzen RTL-n, RTLCSS removekontrol zuzentarauari esker .