RFS
Injini ye-Bootstrap eshintsha usayizi wenjini isabela ikala izici ezivamile ze-CSS ukuze isebenzise kangcono indawo etholakalayo kuzo zonke izinkundla zokubuka namadivayisi.
Iyini i-RFS?
Iphrojekthi eseceleni ye-Bootstrap i- RFS iyinjini yokuguqula usayizi weyunithi eyasungulwa ekuqaleni ukuze ishintshe usayizi wefonti (yingakho isifinyezo sayo Sosayizi Wefonti Ophendulayo). Namuhla i-RFS iyakwazi ukukala kabusha izakhiwo eziningi ze-CSS ngamanani amayunithi afana margin
, padding
, border-radius
, noma ngisho box-shadow
.
Umshini ubala amanani afanele ngokuzenzakalelayo ngokusekelwe kubukhulu bembobo yokubuka yesiphequluli. Izohlanganiswa ibe calc()
imisebenzi rem
enenhlanganisela namayunithi embobo yokubuka ukuze unike amandla ukuziphatha kokukala okusabelayo.
Ukusebenzisa i-RFS
Amamiksi afakiwe ku-Bootstrap futhi ayatholakala uma usufake i-Bootstrap's scss
. I-RFS ingafakwa futhi izimele uma kudingeka.
Ukusebenzisa ama-mixins
I- rfs()
mixin inamagama amafushane okuthi font-size
, margin
, margin-top
, margin-right
, margin-bottom
, margin-left
, padding
, padding-top
, padding-right
, padding-bottom
kanye padding-left
. Bona isibonelo esingezansi ukuthola umthombo we-Sass kanye ne-CSS ehlanganisiwe.
.title {
@include font-size(4rem);
}
.title {
font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
.title {
font-size: 4rem;
}
}
Noma iyiphi enye impahla ingadluliselwa ku- rfs()
mixin kanje:
.selector {
@include rfs(4rem, border-radius);
}
!important
ungakwazi futhi ukungezwa kunoma yiliphi inani olifunayo:
.selector {
@include padding(2.5rem !important);
}
Ukusebenzisa imisebenzi
Uma ungafuni ukusebenzisa okuhlanganisayo, kukhona nemisebenzi emibili:
rfs-value()
iguqula inani liberem
inani umapx
inani liphasisiwe, kwezinye izimo libuyisela umphumela ofanayo.rfs-fluid-value()
ibuyisela inguqulo yoketshezi yenani uma isakhiwo sidinga ukukala kabusha.
Kulesi sibonelo, sisebenzisa eyodwa yezingxube ze-Bootstrap ezisabelayo ezakhelwe ngaphakathi ukuze sisebenzise kuphela isitayela esingaphansi kwendawo lg
yokuhlukana.
.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 */
}
}
Amadokhumenti anwetshiwe
I-RFS iphrojekthi ehlukile ngaphansi kwenhlangano ye-Bootstrap. Okuningi mayelana ne-RFS nokucushwa kwayo kungatholakala endaweni yayo yokugcina ye- GitHub .