RFS
Mesin sing diowahi ukurane Bootstrap kanthi responsif ngukur properti CSS umum supaya bisa luwih apik nggunakake ruang sing kasedhiya ing tampilan lan piranti.
Apa iku RFS?
Proyek sisih Bootstrap RFS yaiku mesin ukuran unit sing wiwitane dikembangake kanggo ngowahi ukuran font (mulane singkatan kanggo Ukuran Font Responsif). Saiki, RFS bisa ngowahi ukuran properti CSS kanthi nilai unit kaya margin
, padding
, border-radius
, utawa malah box-shadow
.
Mekanisme kasebut kanthi otomatis ngetung nilai sing cocog adhedhasar ukuran tampilan browser. Bakal dikompilasi dadi calc()
fungsi kanthi campuran rem
lan unit viewport kanggo ngaktifake prilaku skala responsif.
Nggunakake RFS
Campuran kasebut kalebu ing Bootstrap lan kasedhiya yen sampeyan kalebu Bootstrap's scss
. RFS uga bisa diinstal dewekan yen perlu.
Nggunakake mixins
rfs()
Mixin nduweni singkatan kanggo , font-size
, margin
, margin-top
, margin-right
, margin-bottom
, margin-left
, padding
, padding-top
, padding-right
, padding-bottom
lan padding-left
. Deleng conto ing ngisor iki kanggo sumber Sass lan kompilasi CSS.
.title {
@include font-size(4rem);
}
.title {
font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
.title {
font-size: 4rem;
}
}
Sembarang properti liyane bisa ditransfer menyang rfs()
mixin kaya iki:
.selector {
@include rfs(4rem, border-radius);
}
!important
bisa uga mung ditambahake menyang nilai apa wae sing dikarepake:
.selector {
@include padding(2.5rem !important);
}
Nggunakake fungsi
Yen sampeyan ora pengin nggunakake kalebu, ana uga rong fungsi:
rfs-value()
Ngonversi nilai dadirem
nilai yenpx
nilai liwati, ing kasus liyane ngasilake asil sing padha.rfs-fluid-value()
ngasilake versi adi saka Nilai yen property perlu rescaling.
Ing conto iki, kita nggunakake salah siji saka Bootstrap kang dibangun ing campuran breakpoint responsif kanggo mung aplikasi noto ngisor 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 */
}
}
Dokumentasi lengkap
RFS minangka proyek kapisah ing organisasi Bootstrap. Luwih lengkap babagan RFS lan konfigurasi bisa ditemokake ing repositori GitHub .