RFS
Il-magna tad-daqs tal-Bootstrap tiskala b'mod reattiv il-proprjetajiet komuni tas-CSS biex tutilizza aħjar l-ispazju disponibbli fil-wiri u l-apparati.
X'inhu RFS?
Il-proġett tal-ġenb tal-Bootstrap RFS huwa magna ta' tibdil tad-daqs ta' l-unità li inizjalment ġiet żviluppata biex id-daqsijiet tat-tipa terġa 'titqies (għalhekk l-abbrevjazzjoni tagħha għal Daqsijiet ta' Font Responsive). Illum il-ġurnata l-RFS huwa kapaċi jerġa' jkabbar il-biċċa l-kbira tal-proprjetajiet CSS b'valuri unitarji bħal margin
, padding
, border-radius
, jew saħansitra box-shadow
.
Il-mekkaniżmu awtomatikament jikkalkula l-valuri xierqa bbażati fuq id-dimensjonijiet tal-viewport tal-browser. Se jiġi kkompilat calc()
f'funzjonijiet b'taħlita ta ' rem
u viewport units biex tippermetti l-imġieba ta' skalar reattiva.
Bl-użu ta 'RFS
Il-mixins huma inklużi f'Bootstrap u huma disponibbli ladarba tinkludi Bootstrap's scss
. RFS jista 'wkoll jiġi installat waħdu jekk meħtieġ.
Uża l-mixins
Il- rfs()
mixin għandu shorthands għal font-size
, margin
, margin-top
, margin-right
, margin-bottom
, margin-left
, padding
, padding-top
, padding-right
, padding-bottom
, u padding-left
. Ara l-eżempju hawn taħt għas-sors Sass u CSS ikkumpilat.
.title {
@include font-size(4rem);
}
.title {
font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
.title {
font-size: 4rem;
}
}
Kwalunkwe proprjetà oħra tista 'tiġi mgħoddija lill- rfs()
mixin bħal dan:
.selector {
@include rfs(4rem, border-radius);
}
!important
tista 'wkoll tiġi miżjuda ma' kwalunkwe valur li trid:
.selector {
@include padding(2.5rem !important);
}
Jużaw il-funzjonijiet
Meta ma tridx tuża l-inclus, hemm ukoll żewġ funzjonijiet:
rfs-value()
jikkonverti valurrem
f'valur jekkpx
jiġi mgħoddi valur, f'każijiet oħra jirritorna l-istess riżultat.rfs-fluid-value()
jirritorna l-verżjoni fluwidu ta' valur jekk il-proprjetà teħtieġ skalar mill-ġdid.
F'dan l-eżempju, nużaw wieħed mill-mixins ta' breakpoint reattivi integrati ta' Bootstrap biex napplikaw biss stil taħt il- lg
breakpoint.
.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 */
}
}
Dokumentazzjoni estiża
RFS huwa proġett separat taħt l-organizzazzjoni Bootstrap. Aktar dwar RFS u l-konfigurazzjoni tagħha tista 'tinstab fuq ir- repożitorju GitHub tagħha .