RFS
Injini ya Bootstrap ya kubadilisha ukubwa inalinganisha sifa za kawaida za CSS ili kutumia vyema nafasi inayopatikana kwenye vituo vya kutazama na vifaa.
RFS ni nini?
Mradi wa upande wa Bootstrap RFS ni injini ya kubadilisha ukubwa wa kitengo ambayo hapo awali ilitengenezwa ili kurekebisha ukubwa wa fonti (kwa hivyo ufupisho wake wa Saizi za Fonti Zinazojibika). Siku hizi RFS ina uwezo wa kuweka upya sifa nyingi za CSS kwa thamani za kitengo kama vile margin
, padding
, border-radius
, au hata box-shadow
.
Utaratibu huhesabu kiotomati maadili yanayofaa kulingana na vipimo vya tovuti ya kutazama ya kivinjari. Itakusanywa kuwa calc()
chaguo za kukokotoa na mchanganyiko wa rem
vitengo na sehemu ya kutazama ili kuwezesha tabia ya mwitikio wa kuongeza viwango.
Kwa kutumia RFS
Mchanganyiko umejumuishwa kwenye Bootstrap na unapatikana mara tu unapojumuisha Bootstrap's scss
. RFS pia inaweza kusakinishwa ili kujitegemea ikiwa inahitajika.
Kutumia mchanganyiko
Mchanganyiko rfs()
una shorthands za font-size
, margin
, margin-top
, margin-right
, margin-bottom
, margin-left
, padding
, padding-top
, padding-right
, padding-bottom
na padding-left
. Tazama mfano hapa chini kwa chanzo Sass na CSS iliyokusanywa.
.title {
@include font-size(4rem);
}
.title {
font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
.title {
font-size: 4rem;
}
}
Mali nyingine yoyote inaweza kupitishwa kwa rfs()
mchanganyiko kama hii:
.selector {
@include rfs(4rem, border-radius);
}
!important
inaweza pia kuongezwa kwa thamani yoyote unayotaka:
.selector {
@include padding(2.5rem !important);
}
Kwa kutumia vipengele
Wakati hutaki kutumia inajumuisha, pia kuna kazi mbili:
rfs-value()
hubadilisha thamani kuwarem
thamani ikiwapx
thamani itapitishwa, katika hali nyingine hurejesha matokeo sawa.rfs-fluid-value()
hurejesha toleo la maji la thamani ikiwa mali inahitaji kuongezwa tena.
Katika mfano huu, tunatumia mojawapo ya vichanganyiko vya kuitikia vilivyojengewa ndani vya Bootstrap ili kuweka tu mtindo chini ya sehemu ya lg
kukatiza.
.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 */
}
}
Nyaraka zilizopanuliwa
RFS ni mradi tofauti chini ya shirika la Bootstrap. Zaidi kuhusu RFS na usanidi wake unaweza kupatikana kwenye hazina yake ya GitHub .