RFS
Mesin pangropéa ukuran Bootstrap sacara responsif nyéépkeun sipat CSS umum pikeun ngamangpaatkeun rohangan anu sayogi di sakuliah viewports sareng alat.
Naon RFS?
Proyék samping Bootstrap RFS nyaéta mesin pangubah ukuran unit anu mimitina dikembangkeun pikeun ngatur ukuran font (ku kituna singketan pikeun Ukuran Font Responsif). Kiwari RFS mampuh rescaling paling sipat CSS jeung nilai unit kawas margin
, padding
, border-radius
, atawa malah box-shadow
.
mékanisme otomatis ngitung nilai luyu dumasar kana diménsi viewport browser. Éta bakal disusun kana calc()
fungsi sareng campuran rem
sareng unit viewport pikeun ngaktifkeun paripolah skala responsif.
Ngagunakeun RFS
Campuran kalebet dina Bootstrap sareng sayogi saatos anjeun kalebet Bootstrap's scss
. RFS ogé tiasa dipasang mandiri upami diperyogikeun.
Ngagunakeun mixins
Mixin rfs()
ngabogaan singkatan pikeun font-size
, margin
, margin-top
, margin-right
, margin-bottom
, margin-left
, padding
, padding-top
, padding-right
, padding-bottom
, jeung padding-left
. Tempo conto di handap pikeun sumber Sass jeung CSS disusun.
.title {
@include font-size(4rem);
}
.title {
font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
.title {
font-size: 4rem;
}
}
Sakur harta anu sanés tiasa dikirimkeun ka rfs()
mixin sapertos kieu:
.selector {
@include rfs(4rem, border-radius);
}
!important
bisa ogé ngan ditambahkeun kana nilai naon rék:
.selector {
@include padding(2.5rem !important);
}
Ngagunakeun fungsi
Nalika anjeun henteu hoyong nganggo kalebet, aya ogé dua fungsi:
rfs-value()
ngarobah nilai kanarem
nilai lamun nilai apx
diliwatan, dina kasus séjén eta mulih hasil sarua.rfs-fluid-value()
mulih versi cairan tina nilai a lamun harta perlu rescaling.
Dina conto ieu, urang make salah sahiji Bootstrap urang diwangun-di breakpoint mixins responsif pikeun ngan nerapkeun styling handap lg
breakpoint nu.
.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 */
}
}
Dokuméntasi ngalegaan
RFS mangrupakeun proyék misah dina organisasi Bootstrap. Langkung seueur ngeunaan RFS sareng konfigurasina tiasa dipendakan dina gudang GitHub na .