RFS
Enjene ea Bootstrap e fetolang boholo e lekanya thepa e tloaelehileng ea CSS ho sebelisa hamolemo sebaka se fumanehang hohle libakeng tsa ho shebella le lisebelisoa.
RFS ke eng?
Projeke ea lehlakore ea Bootstrap RFS ke enjine ea ho fetola boholo ba yuniti eo qalong e ileng ea ntlafatsoa ho fetola boholo ba fonte (ka hona, khutsufatso ea eona bakeng sa boholo ba litlhaku tse arabelang). Matsatsing ana RFS e khona ho hlakisa boholo ba thepa ea CSS ka boleng ba yuniti joalo ka margin
, padding
, border-radius
, kapa box-shadow
.
Mochini o ipapisa le litekanyetso tse nepahetseng ho ipapisitsoe le boholo ba "browser viewport". E tla hlophisoa hore e be calc()
mesebetsi e nang le motsoako oa likarolo le pono ea pono rem
ho thusa boitšoaro bo arabelang.
Ho sebelisa RFS
Li-mixins li kenyellelitsoe ho Bootstrap 'me lia fumaneha hang ha u kenyelletsa Bootstrap's scss
. RFS e ka boela ea kenngoa e ikemetseng ha ho hlokahala.
Ho sebelisa metsoako
Motsoako rfs()
o na le li-shorthands tsa font-size
, margin
, margin-top
, margin-right
, margin-bottom
, margin-left
, padding
, padding-top
, padding-right
, padding-bottom
, le padding-left
. Sheba mohlala o ka tlase bakeng sa mohloli oa Sass le CSS e hlophisitsoeng.
.title {
@include font-size(4rem);
}
.title {
font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
.title {
font-size: 4rem;
}
}
Thepa efe kapa efe e 'ngoe e ka fetisetsoa ho rfs()
mixin ka tsela ena:
.selector {
@include rfs(4rem, border-radius);
}
!important
e ka eketsoa boleng bofe kapa bofe boo u bo batlang:
.selector {
@include padding(2.5rem !important);
}
Ho sebelisa lits'ebetso
Ha u sa batle ho sebelisa lisebelisoa, ho boetse ho na le mesebetsi e 'meli:
rfs-value()
e fetola boleng horem
boleng haebapx
boleng bo fetisitsoe, maemong a mang e khutlisa sephetho se tšoanang.rfs-fluid-value()
e khutlisa mofuta oa mokelikeli oa boleng haeba thepa e hloka ho hlakisoa.
Mohlaleng ona, re sebelisa e 'ngoe ea li-mixpoint tsa Bootstrap tse hahelletsoeng kahare ho sebelisa setaele ka tlase ho sebaka sa lg
phomolo.
.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 */
}
}
Litokomane tse atolositsoeng
RFS ke projeke e arohaneng tlasa mokhatlo oa Bootstrap. Tse ling mabapi le RFS le tlhophiso ea eona li ka fumanoa polokelong ea eona ea GitHub .