RFS
Moteri ya Bootstrap ihinduranya umunzani usanzwe wa CSS kugirango ukoreshe neza umwanya uhari kurebera hamwe nibikoresho.
RFS ni iki?
Umushinga wa Bootstrap kuruhande rwa RFS nigice cyo guhindura moteri yakozwe muburyo bwambere kugirango ihindure ingano yimyandikire (niyo mpamvu ahinnye yerekana Ingano yimyandikire). Muri iki gihe, RFS ishoboye gukuraho imitungo myinshi ya CSS hamwe nagaciro keza nka ,,, margin
cyangwa ndetse .padding
border-radius
box-shadow
Inzira ihita ibara indangagaciro zikwiye zishingiye ku bipimo byerekana amashusho. Bizakusanyirizwa calc()
mumikorere hamwe no kuvanga rem
no kureba ibice kugirango bishoboze imyitwarire yo gupima.
Gukoresha RFS
Imvange zirimo Bootstrap kandi ziraboneka iyo ushizemo Bootstrap scss
. RFS irashobora kandi gushyirwaho standalone mugihe bikenewe.
Gukoresha imvange
Kuvanga bifite amagambo rfs()
ahinnye font-size
,,,,,,,,, na . _ margin
_ margin-top
_ margin-right
_ margin-bottom
_ margin-left
_ Reba urugero rukurikira kubisoko Sass hamwe na CSS yakusanyije.padding
padding-top
padding-right
padding-bottom
padding-left
.title {
@include font-size(4rem);
}
.title {
font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
.title {
font-size: 4rem;
}
}
Ibindi bintu byose birashobora kunyuzwa kuri rfs()
mixin nkiyi:
.selector {
@include rfs(4rem, border-radius);
}
!important
irashobora kandi kongerwaho gusa agaciro kose ushaka:
.selector {
@include padding(2.5rem !important);
}
Gukoresha imikorere
Mugihe udashaka gukoresha ibirimo, hari nibikorwa bibiri:
rfs-value()
ihindura agaciro murem
gaciro nibapx
agaciro kanyuze, mubindi bihe gisubiza igisubizo kimwe.rfs-fluid-value()
isubiza fluid verisiyo yagaciro niba umutungo ukeneye gukuraho.
Muriyi ngero, dukoresha imwe muri Bootstrap yubatswe muburyo bwo gusubiza ibyivanze kugirango dushyireho stil munsi lg
yumwanya.
.selector {
@include media-breakpoint-down(lg) {
padding: rfs-fluid-value(2rem);
font-size: rfs-fluid-value(1.125rem);
}
}
@media (max-width: 991.98px) {
.selector {
padding: calc(1.325rem + 0.9vw);
font-size: 1.125rem; /* 1.125rem is small enough, so RFS won't rescale this */
}
}
Inyandiko yaguye
RFS ni umushinga wihariye munsi ya Bootstrap. Ibindi bijyanye na RFS nibisobanuro byayo murashobora kubisanga mububiko bwayo bwa GitHub .