RFS
La regrandigo de la motoro de Bootstrap responde skalas komunajn CSS-ecojn por pli bone uzi disponeblan spacon tra videjoj kaj aparatoj.
Kio estas RFS?
La flankprojekto RFS de Bootstrap estas unuo-regrandigo-motoro kiu estis komence evoluigita por regrandigi tipargrandojn (tial ĝia mallongigo por Responsive Font Sizes). Nuntempe RFS kapablas reskali la plej multajn CSS-ecojn kun unuvaloroj kiel margin
, padding
, border-radius
, aŭ eĉ box-shadow
.
La mekanismo aŭtomate kalkulas la taŭgajn valorojn surbaze de la dimensioj de la retumila vidfenestro. Ĝi estos kompilita en calc()
funkciojn kun miksaĵo de rem
kaj vidportunuoj por ebligi la respondeman skalkonduton.
Uzante RFS
La miksaĵoj estas inkluzivitaj en Bootstrap kaj disponeblas post kiam vi inkluzivas Bootstrap's scss
. RFS ankaŭ povas esti instalita memstare se necese.
Uzante la miksaĵojn
La rfs()
miksaĵo havas stenografiojn por font-size
, margin
, margin-top
, margin-right
, margin-bottom
, margin-left
, padding
, padding-top
, padding-right
, padding-bottom
, kaj padding-left
. Vidu la ekzemplon malsupre por fonto Sass kaj kompilita CSS.
.title {
@include font-size(4rem);
}
.title {
font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
.title {
font-size: 4rem;
}
}
Ajna alia posedaĵo povas esti transdonita al la rfs()
miksaĵo jene:
.selector {
@include rfs(4rem, border-radius);
}
!important
ankaŭ povas nur esti aldonita al kia ajn valoro vi volas:
.selector {
@include padding(2.5rem !important);
}
Uzante la funkciojn
Kiam vi ne volas uzi la inkludojn, ekzistas ankaŭ du funkcioj:
rfs-value()
konvertas valoron enrem
valoron sepx
valoro estas transdonita, en aliaj kazoj ĝi resendas la saman rezulton.rfs-fluid-value()
resendas la fluidan version de valoro se la posedaĵo bezonas reskalon.
En ĉi tiu ekzemplo, ni uzas unu el la enkonstruitaj respondemaj romppunktomiksaĵoj de Bootstrap por nur apliki stilon sub la lg
romppunkto.
.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 */
}
}
Plilongigita dokumentado
RFS estas aparta projekto sub la organizo Bootstrap. Pli pri RFS kaj ĝia agordo troveblas sur ĝia GitHub-deponejo .