RFS
Bootstrapov mehanizem za spreminjanje velikosti odzivno spreminja običajne lastnosti CSS, da bolje izkoristi razpoložljivi prostor v pogledih in napravah.
Kaj je RFS?
Bootstrapov stranski projekt RFS je mehanizem za spreminjanje velikosti enote, ki je bil prvotno razvit za spreminjanje velikosti pisav (od tod tudi okrajšava za odzivne velikosti pisav). Dandanes je RFS sposoben spremeniti velikost večine lastnosti CSS z vrednostmi enot, kot margin
so padding
, border-radius
, ali celo box-shadow
.
Mehanizem samodejno izračuna ustrezne vrednosti glede na dimenzije vidnega polja brskalnika. Preveden bo v calc()
funkcije z mešanico enot rem
in enot pogleda, da se omogoči odzivno spreminjanje velikosti.
Uporaba RFS
Miksini so vključeni v Bootstrap in so na voljo, ko vključite Bootstrapov scss
. RFS lahko po potrebi namestite tudi samostojno .
Uporaba miksinov
Mixin ima rfs()
okrajšave za font-size
, margin
, margin-top
, margin-right
, margin-bottom
, margin-left
, padding
, padding-top
, padding-right
, padding-bottom
, in padding-left
. Oglejte si spodnji primer za izvorni Sass in preveden CSS.
.title {
@include font-size(4rem);
}
.title {
font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
.title {
font-size: 4rem;
}
}
Katera koli druga lastnost se lahko posreduje rfs()
miksinu takole:
.selector {
@include rfs(4rem, border-radius);
}
!important
lahko dodate tudi kateri koli vrednosti, ki jo želite:
.selector {
@include padding(2.5rem !important);
}
Uporaba funkcij
Ko ne želite uporabljati vključenosti, sta na voljo tudi dve funkciji:
rfs-value()
pretvori vrednost vrem
vrednost, če jepx
vrednost posredovana, v drugih primerih pa vrne enak rezultat.rfs-fluid-value()
vrne tekočo različico vrednosti, če je treba lastnost prilagoditi velikosti.
V tem primeru uporabljamo enega od Bootstrapovih vgrajenih odzivnih mešanic prekinitvene točke, da uporabimo samo slog pod lg
točko prekinitve.
.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 */
}
}
Razširjena dokumentacija
RFS je ločen projekt v okviru organizacije Bootstrap. Več o RFS in njegovi konfiguraciji lahko najdete v njegovem repozitoriju GitHub .