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 $utilities
llapa yanapakuyniyku kachkan chaymanta qhipaman ruwasqa $utilities
mapaykiwan 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. Mapa llave hina llamk'achisqa kaptinqa null , manam huñusqachu. |
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 . |
css-var |
Akllanapaq | false |
Boolean CSS kamachiykunamanta ranti CSS tikraqkunata paqarichinanpaq. |
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
$utilities
Llapan 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 property
llaveqa mayqin yanapakuypaqpas churasqa kanan tiyan, chaymanta huk allin CSS kaqniyuq kanan tiyan. Kay propiedad nisqaqa ruwasqa yanapakuypa kamachiy huñunpi llamk'achisqa. class
Llave mana kaptin, chaymanta ñawpaqmanta clase suti hina llamk'an . Kay text-decoration
utilidad 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 values
llamk'achiy mayqin chanikuna willasqapaq property
llamk'achisqa kanan tiyan ruwasqa clase sutikunapi chaymanta kamachiykunapi. Huk lista utaq mapa kanman (utilidadkunapi utaq huk Sass tikraqpi churasqa).
Lista hina, text-decoration
utilidadkunawan hina :
values: none underline line-through
Mapa hina, opacity
utilidadkunawan hina :
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
Huk Sass tikraq hina lista utaq mapa churan, imaynachus position
yanapakuyniykupi :
values: $position-values
Yachakuna
class
Huñ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; }
CSS tikraq yanapakuykuna
css-var
Boolean akllanata kayman churay true
chaymanta API qusqa akllaqpaq kiti CSS tikraqkunata ruwanqa sapa kuti property: value
kamachiykunamanta ranti. Yuyaymanasun .text-opacity-*
utilidadniykupi:
$utilities: (
"text-opacity": (
css-var: true,
class: text-opacity,
values: (
25: .25,
50: .5,
75: .75,
100: 1
)
),
);
Lluqsiy: .
.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; }
Llaqta CSS tikraqkuna
Akllanata llamk'achiy local-vars
huk 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 state
pseudo-clase variaciones ruwanapaq. Ejemplo pseudo-clases nisqakunan kanku :hover
hinaspa :focus
. Huk lista estadokuna qusqa kaqtin, chay pseudo-clasepaq clase sutikuna ruwasqa. Ejemplopaq, hover kaqpi opacidadta tikranapaq, yapay state: hover
chaymanta .opacity-hover:hover
huñ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 responsive
kutichiq 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
print
Akllanata 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 !important
chaymanta componentekuna chaymanta tikraq clasekuna munasqankumanhina llallichinankupaq. Kay churanata tukuypaq tikrayta atikunki $enable-important-utilities
tikraqwan (ñ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 $utilities
mapaman yapasqa kanman huk map-merge
. Aswan allin Sass willañiqiyku munasqayku chaymanta _utilities.scss
ñawpaqta apamusqa kasqankuta, chaymanta llamk'achiy map-merge
yapasqa yanapakuyniykikunata yapanaykipaq. Ejemplopaq, kaypi imayna huk kutichiq cursor
yanapakuy 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 $utilities
mapapi map-get
chaymanta map-merge
ruwanakunawan tikray. Uraypi rikch'anapi, huk yapasqa chanin width
yanapakuykunaman yapachkayku. Huk qallariywan qallariy map-merge
chaymanta mayqin yanapakuyta tikrayta munanki chayta willay. Chaypimanta, anidado "width"
mapawan apamuy map-get
yaykunapaq 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, border
clasekuna 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 .border
chaymanta .border-0
sapa 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 class
huk qusqa yanapakuypa ruwasqanmanta llallinanpaq—kayhina, .ms-*
yanapakuykunata mawk'a kaqman sutichay .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 width
yanapakuyniykumanta hurqunapaq, huk ruway $utilities
map-merge
chaymanta 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 rtl
akllanata 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 remove
kamachiy kamachiyman gracias nispa .