RFS
Bootstrap se grootte-enjin skaal responsief algemene CSS-eienskappe om die beskikbare spasie oor kykpoorte en toestelle beter te benut.
Wat is RFS?
Bootstrap se syprojek RFS is 'n eenheidsgrootte-enjin wat aanvanklik ontwikkel is om lettergroottes te verander (vandaar die afkorting vir Responsive Font Sizes). Deesdae is RFS in staat om die meeste CSS-eienskappe te herskaal met eenheidswaardes soos margin
, padding
, border-radius
, of selfs box-shadow
.
Die meganisme bereken outomaties die toepaslike waardes gebaseer op die afmetings van die blaaier-kykpoort. Dit sal saamgestel word in calc()
funksies met 'n mengsel van rem
en viewport-eenhede om die responsiewe skaalgedrag moontlik te maak.
Gebruik RFS
Die mengsels is ingesluit in Bootstrap en is beskikbaar sodra jy Bootstrap's insluit scss
. RFS kan ook selfstandig geïnstalleer word indien nodig.
Gebruik die mengsels
Die rfs()
mixin het snelskrif vir font-size
, margin
, margin-top
, margin-right
, margin-bottom
, margin-left
, padding
, padding-top
, padding-right
, padding-bottom
en padding-left
. Sien die voorbeeld hieronder vir bron Sass en saamgestelde CSS.
.title {
@include font-size(4rem);
}
.title {
font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
.title {
font-size: 4rem;
}
}
Enige ander eiendom kan soos volg na die rfs()
mengin oorgedra word:
.selector {
@include rfs(4rem, border-radius);
}
!important
kan ook net bygevoeg word tot watter waarde jy ook al wil hê:
.selector {
@include padding(2.5rem !important);
}
Die gebruik van die funksies
Wanneer jy nie die insluit wil gebruik nie, is daar ook twee funksies:
rfs-value()
skakel 'n waarde om in 'nrem
waarde as 'npx
waarde geslaag word, in ander gevalle gee dit dieselfde resultaat.rfs-fluid-value()
gee die vloeibare weergawe van 'n waarde terug as die eiendom herskaal moet word.
In hierdie voorbeeld gebruik ons een van Bootstrap se ingeboude responsiewe breekpuntmengsels om slegs stilering onder die lg
breekpunt toe te pas.
.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 */
}
}
Uitgebreide dokumentasie
RFS is 'n aparte projek onder die Bootstrap-organisasie. Meer oor RFS en sy konfigurasie kan gevind word op sy GitHub-bewaarplek .