RFS
Bootstrap's resizing engine responsively scales common CSS properties okusobola okukozesa obulungi ekifo ekiriwo mu viewports n'ebyuma.
RFS kye ki?
Bootstrap's side project RFS ye yingini ekyusa obunene bwa yuniti eyasooka okukolebwa okukyusa obunene bw'empandiika (wano we wava okufupimira kwa Responsive Font Sizes). Ennaku zino RFS esobola okuddamu okugerageranya eby'obugagga bya CSS ebisinga obungi n'emiwendo gya yuniti nga margin
, padding
, border-radius
, oba wadde box-shadow
.
Enkola eno ebalirira emiwendo egy’enjawulo okusinziira ku bipimo by’ekifo eky’okulabamu bbulawuzi. Kijja kukuŋŋaanyizibwa mu calc()
mirimu n’okutabula rem
n’ebitundu by’okulaba okusobozesa enneeyisa y’okugerageranya eddamu.
Okukozesa RFS
Mixins zibeera mu Bootstrap era zibeerawo nga omaze okussaamu Bootstrap's scss
. RFS nayo esobola okuteekebwawo nga yeetongodde bwe kiba kyetaagisa.
Nga tukozesa ebirungo ebiyitibwa mixins
Mixin rfs()
erina ennukuta ennyimpimpi ezitegeeza font-size
, margin
, margin-top
, margin-right
, margin-bottom
, margin-left
, padding
, padding-top
, padding-right
, padding-bottom
, ne padding-left
. Laba ekyokulabirako wansi ku source Sass ne CSS ekunganyiziddwa.
.title {
@include font-size(4rem);
}
.title {
font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
.title {
font-size: 4rem;
}
}
Eky'obugagga ekirala kyonna kiyinza okuyisibwa ku rfs()
mixin nga kino:
.selector {
@include rfs(4rem, border-radius);
}
!important
era osobola okumala okugattibwa ku muwendo gwonna gw’oyagala:
.selector {
@include padding(2.5rem !important);
}
Okukozesa emirimu
Bw’oba toyagala kukozesa includes, waliwo n’emirimu ebiri:
rfs-value()
ekyusa omuwendo murem
muwendo singapx
omuwendo guyisibwa, mu mbeera endala guzzaayo ekivaamu kye kimu.rfs-fluid-value()
ezzaayo enkyusa y'amazzi ey'omuwendo singa eky'obugagga kyetaaga okuddamu okupima.
Mu kyokulabirako kino, tukozesa emu ku Bootstrap’s built-in responsive breakpoint mixins okusiiga sitayiro yokka wansi lg
w’okumenya.
.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 */
}
}
Ebiwandiiko ebigaziyiziddwa
RFS pulojekiti ya njawulo wansi w'ekitongole kya Bootstrap. Ebisingawo ku RFS n'ensengeka yaayo osobola okubisanga ku tterekero lyayo erya GitHub .