Saltar al contenido principal Salta a docs navegación
in English

API de utilidad nisqa

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

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 Willay
property Mañasqa Kaqpa sutin, kayqa huk watiqa icha huk watiqakunap t'inkisqa kanman (kayhina, horizontal rellenokuna icha margenkuna).
values Mañasqa Lista chanikuna, utaq huk mapa sichus mana munankichu clase suti chaninwan kaqlla kananta. Mapa llave hina llamk'achisqa kaptinqa null, manam huñusqachu.
class Akllanapaq Clase sutipaq variable sichus mana munankichu propiedadwan kaqlla kananta. Sichus mana llaveta qunkichu classchaymanta propertyllave huk matriz de cadenas kaq, clase sutiqa matrizpa ñawpaq elementon kanqa property.
state Akllanapaq Lista de variantes de pseudo-clase como :hovero :focuspara generar para la utilidad. Mana ñawpaqmanta chanichu.
responsive Akllanapaq Boolean rikuchiq sichus kutichiq clasekuna paqarichiyta necesitanku. falseñawpaqmanta churasqa.
rfs Akllanapaq Boolean nisqa yakuta musuqmanta escalachiyta atichinanpaq. RFS p'anqata qhaway imayna kay llamk'an chayta yachanaykipaq. falseñawpaqmanta churasqa.
print Akllanapaq Boolean nisqa qillqana clasekuna paqarichiyta munaptinkuqa rikuchiq. falseñawpaqmanta churasqa.
rtl Akllanapaq Boolean rikuchiq sichus utilidad RTL kaqpi waqaychasqa kanan tiyan. trueñawpaqmanta churasqa.

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

Sapanchasqa clase ñawpaq simi

classHuñusqa CSS kaqpi llamk'achisqa clase ñawpaq sutita tikranaykipaq akllanata llamk'achiy :

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

Lluqsiy: .

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

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

Utilidades respuestas nisqa

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

Utilidades nisqakunata tikray

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

printAkllanata atichiyqa qillqanapaq yanapakuy clasekunatapas paqarichinqa, chaymanta @media print { ... }willay tapuy ukhupilla ruwasqa.

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

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

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"mapawan apamuy map-getyaykunapaq chaymanta yanapakuypa akllanakuna chaymanta chanikuna tikranapaq.

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

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

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

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

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

Utilidades nisqakunata hurquy

Huñu llaveta churaspa mayqin ñawpaqmanta ruwasqa yanapakuykunatapas hurquy null. Ejemplopaq, llapa widthyanapakuyniykumanta hurqunapaq, huk ruway $utilities map-mergechaymanta ukhupi yapay "width": null.

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

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

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 .