API de utilidad nisqa

Yanapakuy API huk Sass-pi ruwasqa yanapakuymi yanapakuy clasekuna ruwanapaq.

Kay p'anqapi

Bootstrap yanapakuykuna yanapakuyniyku API kaqwan ruwasqa kanku chaymanta llamk'achiy atikunku tikraypaq utaq mast'ariypaq ñawpaqmanta ruwasqayku yanapakuy clasekuna Sass kaqnintakama. API yanapakuyniyku huk serie Sass mapakuna chaymanta ruwanakuna imaymana akllanakunayuq clasekuna ayllukuna ruwanapaq ruwasqa. Sichus mana Sass mapakunawan riqsisqachu kanki, ñawiriy wichayman Sass docs oficial kaqpi qallariypaq.

Mapapi $utilitiesllapa yanapakuyniyku kachkan chaymanta qhipaman ruwasqa $utilitiesmapaykiwan hukllachasqa kachkan, sichus kan. Yanapakuy mapa huk llaveyuq lista yanapakuy huñukunayuq kachkan mayqinkunachus kay akllanakunata chaskinku:

Akllanapaq	Niraq	Ñawpaqmanta churasqa chani	Willay
`property`	Mañasqa	– 10.	Kaqpa sutin, kayqa huk watiqa icha huk watiqakunap t'inkisqa kanman (kayhina, horizontal rellenokuna icha margenkuna).
`values`	Mañasqa	– 10.	Lista chanikuna, utaq huk mapa sichus mana munankichu clase suti chaninwan kaqlla kananta. Sichus `null`mapa llave hina llamk'achisqa, `class`mana clase sutiman ñawpaqmanta churasqachu.
`class`	Akllanapaq	chusaq	Paqarisqa clasepa sutin. Mana qusqa `property`kaptin chaymanta huk watiqakunap t'inkisqa kaptin, matrizpa `class`ñawpaq kaq elementonman ñawpaqmanta churasqa kanqa `property`. Mana qusqa `property`kaptin, watiqa kaptin, `values`llavekuna `class`sutikunapaq llamk'achisqa.
`css-var`	Akllanapaq	`false`	Boolean CSS kamachiykunamanta ranti CSS tikraqkunata paqarichinanpaq.
`css-variable-name`	Akllanapaq	chusaq	Kamachiy huñu ukhupi CSS tikraqpaq sapanchasqa mana ñawpaqchasqa suti.
`local-vars`	Akllanapaq	chusaq	Mapa de local CSS variables ruwanapaq CSS kamachiykunamanta yapasqa.
`state`	Akllanapaq	chusaq	Lista de variantes de clase pseudo (por ejemplo, `:hover`o `:focus`) para generar.
`responsive`	Akllanapaq	`false`	Boolean rikuchiq sichus kutichiq clasekuna paqarichisqa kanan tiyan.
`rfs`	Akllanapaq	`false`	Boolean RFS nisqawan yaku musuqmanta escalachiyta atichinanpaq .
`print`	Akllanapaq	`false`	Boolean nisqa qillqana clasekuna paqarichiyta munaptinkuqa rikuchiq.
`rtl`	Akllanapaq	`true`	Boolean rikuchiq sichus utilidad RTL kaqpi waqaychasqa kanan tiyan.

API nisqa sut’inchasqa

$utilitiesLlapan yanapakuy tikraqkuna estilo raphiyku ukhupi tikraqman yapasqa _utilities.scss. Sapa huñu utilidadkuna kayhinata rikchakun:

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

Mayqintaq kaykunata lluqsichin:

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

Kaqnin

Munasqa propertyllaveqa mayqin yanapakuypaqpas churasqa kanan tiyan, chaymanta huk allin CSS kaqniyuq kanan tiyan. Kay propiedad nisqaqa ruwasqa yanapakuypa kamachiy huñunpi llamk'achisqa. classLlave mana kaptin, chaymanta ñawpaqmanta clase suti hina llamk'an . Kay text-decorationutilidad nisqamanta qhawarisun:

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

Lluqsiy: .

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

Chaninkuna

Llavewan valuesllamk'achiy mayqin chanikuna willasqapaq propertyllamk'achisqa kanan tiyan ruwasqa clase sutikunapi chaymanta kamachiykunapi. Huk lista utaq mapa kanman (utilidadkunapi utaq huk Sass tikraqpi churasqa).

Lista hina, text-decorationutilidadkunawan hina :

values: none underline line-through

Mapa hina, opacityutilidadkunawan hina :

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

Huk Sass tikraq hina lista utaq mapa churan, imaynachus positionyanapakuyniykupi :

values: $position-values

Yachakuna

classHuñusqa CSS kaqpi llamk'achisqa clase ñawpaq sutita tikranaykipaq akllanata llamk'achiy . Ejemplopaq, kaymanta kayman .opacity-*tikranapaq .o-*:

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

Lluqsiy: .

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

Sichus , sapa llavekunapaq class: nullclasekunata paqarichimun :values

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

Lluqsiy: .

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

CSS tikraq yanapakuykuna

css-varBoolean akllanata kayman churay truechaymanta API qusqa akllaqpaq kiti CSS tikraqkunata ruwanqa sapa kuti property: valuekamachiykunamanta ranti. Huk akllanata yapay huk css-variable-nameCSS tikraq sutita churanapaq clase sutimanta.

Yuyaymanasun .text-opacity-*utilidadninchikkunapi. Akllanata yapasun css-variable-namechayqa, huk ruwasqa lluqsiytam chaskisunchik.

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

Lluqsiy: .

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

Llaqta CSS tikraqkuna

Akllanata llamk'achiy local-varshuk Sass mapata willanaykipaq mayqinchus llaqta CSS tikraqkunata ruwanqa yanapakuy clase kamachiy huñu ukhupi. Ama hina kaspa, chaymanta chay llaqta CSS tikraqkunata ruwasqa CSS kamachiykunapi mikhunanpaq yapa llamk'ayta munanman. Ejemplopaq, qhawarisun .bg-*utilidadninchiskunapi:

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

Lluqsiy: .

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

Suyukuna

Akllanata llamk'achiy statepseudo-clase variaciones ruwanapaq. Ejemplo pseudo-clases nisqakunan kanku :hoverhinaspa :focus. Huk lista estadokuna qusqa kaqtin, chay pseudo-clasepaq clase sutikuna ruwasqa. Ejemplopaq, hover kaqpi opacidadta tikranapaq, yapay state: hoverchaymanta .opacity-hover:hoverhuñusqa CSS kaqpi tarinki.

¿Achka pseudo-clases nisqakunata necesitankichu? Suyukunamanta t'aqasqa listata llamk'achiy: state: hover focus.

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

Lluqsiy: .

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

Kutichiq

Boolean yapay responsivekutichiq yanapakuykunata paqarichinanpaq (kayhina, .opacity-md-25) llapa p'akisqakuna chimpapi .

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

Lluqsiy: .

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

Imprimir

Akllanata atichiyqa qillqanapaq yanapakuy clasekunatapas ruwanqa, chaymanta willayprint tapuy ukhupilla ruwasqa.@media print { ... }

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

Lluqsiy: .

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

Importancia nisqa

Llapan yanapakuykuna API kaqwan ruwasqa kanku !importantchaymanta componentekuna chaymanta tikraq clasekuna munasqankumanhina llallichinankupaq. Kay churanata tukuypaq tikrayta atikunki $enable-important-utilitiestikraqwan (ñawpaqmanta true).

API nisqawan yanapachikuspa

Kunan imayna yanapakuykuna API llamk'asqanmanta riqsisqaña kanki, yachay imayna kikiyki sapanchasqa clasekuna yapayta chaymanta ñawpaqmanta yanapakuyniyku tikrayta.

Utilidades nisqakunata qichuy

Kikin llaveta llamk'achispa kunan kaq yanapakuykunata llalliy. Ejemplopaq, sichus huk kutichiq hunt'a yanapakuy clasekunata munanki, kayta ruwayta atikunki:

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

Utilidades nisqakunata yapay

Musuq yanapakuykunata ñawpaqmanta $utilitiesmapaman yapasqa kanman huk map-merge. Aswan allin Sass willañiqiyku munasqayku chaymanta _utilities.scssñawpaqta apamusqa kasqankuta, chaymanta llamk'achiy map-mergeyapasqa yanapakuyniykikunata yapanaykipaq. Ejemplopaq, kaypi imayna huk kutichiq cursoryanapakuy kimsa chaniyuq yapanapaq.

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

Utilidades nisqakunata tikray

Kachkaq yanapakuykunata ñawpaqmanta $utilitiesmapapi map-getchaymanta map-mergeruwanakunawan tikray. Uraypi rikch'anapi, huk yapasqa chanin widthyanapakuykunaman yapachkayku. Huk qallariywan qallariy map-mergechaymanta mayqin yanapakuyta tikrayta munanki chayta willay. Chaypimanta, anidado "width"mapa kaqwan apamuy map-getyaykunapaq chaymanta yanapakuypa akllanakuna chaymanta chanikuna tikraypaq.

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

Kutichiy atichiy

Huk kachkaq huñu yanapakuykunapaq kutichiq clasekunata atichiyta atikunki mayqinkunachus mana kunan kutichiqchu kanku ñawpaqmanta. Ejemplopaq, borderclasekuna kutichinankupaq:

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

Kayqa kunanqa sapa pakiymanta .borderchaymanta .border-0sapa pakinapaq kutichiy variaciones nisqakunata paqarichinqa. Rurasqayki CSS kayhina kanqa:

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

Utilidades nisqakunata sutichay

¿V4 yanapakuykuna faltachkanchu, icha huk sutichay convencionman yachasqachu? Yanapakuykuna API llamk'achiy atikun classhuk qusqa yanapakuypa ruwasqanmanta llallinanpaq—kayhina, .ms-*yanapakuykunata mawk'a kaqman sutichaypaq .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";

Utilidades nisqakunata hurquy

map-remove()Sass llamkanawan mayqin ñawpaqmanta ruwasqa yanapakuykunatapas hurquy .

@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 ruwaytapas llamk'achiy atikunki chaymanta huñu llaveta churayta nullatikunki chaymanta yanapakuyta hurqunapaq.

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

Yanapay, hurquy, tikray

Achka yanapakuykunata huk kutillapi yapayta, hurquyta chaymanta tikrayta atikunki map-merge()Sass ruwanawan . Kaypi imaynatachus ñawpaq ejemplokunata huk hatun mapaman hukllawaq.

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

RTL nisqapi utilidad nisqamanta hurquy

Wakin kantu cajas ruwanku RTL estilo sasa , ahinataq chiru pakikuna árabe simipi. Chayhina yanapakuykunata RTL lluqsiymanta urmachiyta atikunman rtlakllanata kayman churaspa false:

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

Lluqsiy: .

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

Kayqa manam imatapas RTL kaqpi lluqsichinchu, RTLCSS removekamachiy kamachiyman gracias nispa .