RFS ye
Bootstrap ka bonya caman cili masin bɛ jaabi di CSS nafamafɛnw sɛgɛsɛgɛli ma walasa ka yɔrɔ sɔrɔlenw baara ka ɲɛ filɛliyɔrɔw ni minɛnw cɛma.
RFS ye mun ye?
Bootstrap ka kɛrɛfɛ porozɛ RFS ye unit resizing engine ye min Dabɔra a daminɛ na walasa ka sɛbɛnnibolow bonya caman ɲɔgɔnna Kɛ (o de y’a To a surunyalen dòn Responsive Font Sizes). bi RFS bɛ se ka CSS nafa fanba sɛgɛsɛgɛ kokura ni unit nafaw ye i n' a fɔ margin
, padding
, border-radius
, walima hali box-shadow
.
Fɛɛrɛ bɛ jatebɔ kɛ a yɛrɛma nafa bɛnnenw kan ka da navigatɔrɔn ka jatebɔlan hakɛw kan. A bɛna Lajɛ ka Kɛ calc()
baarakɛcogo ye ni rem
ni filɛli-yɔrɔw ɲagaminen ye walasa ka jaabi-sɛgɛsɛgɛli kɛcogo Kɛ.
Baara kɛ ni RFS ye
Mixins bɛ Bootstrap kɔnɔ ani u bɛ sɔrɔ ni i ye Bootstrap's don a scss
kɔnɔ . RFS fana bɛ se ka sigi a yɛrɛma ni a mago bɛ a la.
Baara kɛ ni mixins ye
rfs()
mixin in bɛ ni sɛbɛnni surunw ye font-size
, margin
, margin-top
, margin-right
, margin-bottom
, margin-left
, padding
, padding-top
, padding-right
, padding-bottom
ani padding-left
. Aw ye misali lajɛ jukɔrɔ source Sass ani compiled CSS kan.
.title {
@include font-size(4rem);
}
.title {
font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
.title {
font-size: 4rem;
}
}
Nafolo wɛrɛ o wɛrɛ bɛ se ka tɛmɛ rfs()
mixin fɛ nin cogo la:
.selector {
@include rfs(4rem, border-radius);
}
!important
fana bɛ se ka fara dɔrɔn nafa o nafa kan i b’a fɛ:
.selector {
@include padding(2.5rem !important);
}
Baara kɛ ni baarakɛcogo ye
Ni i t’a fɛ ka baara Kɛ ni includes ye, baara fla fana bɛ yen:
rfs-value()
bɛ nafa dɔ sɛmɛntiya ka kɛrem
nafa ye nipx
nafa dɔ tɛmɛna, ko wɛrɛw la a bɛ o nɔ kelen in segin.rfs-fluid-value()
bɛ nafa dɔ ka fluid version segin ni nafolo mago bɛ sɛgɛsɛgɛli kura la.
Nin misali in na, an bɛ baara Kɛ ni Bootstrap ka jaabi-yɔrɔ-misɛnninw dɔ ye min bɛ Dòn a kɔnɔ walasa ka styling dɔrɔn de Kɛ kari-yɔrɔ jukɔrɔ lg
.
.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 */
}
}
Sɛbɛnw janyalenw
RFS ye porozɛ danfaralen ye Bootstrap jɛkulu ka bolo kan. RFS n' a labɛncogo caman bɛ se ka sɔrɔ a ka GitHub marayɔrɔ la .