RFS
Bootstrap's resizing engine responsively scales common CSS property mpo na kosalela malamu esika oyo ezali na kati ya ba ports de vue mpe ba appareils.
RFS ezali nini?
Projet côté ya Bootstrap RFS ezali moteur ya kobongola bonene ya unité oyo esalemaki na ebandeli mpo na kobongola bonene ya bonene ya bafonte (yango wana bokuse na yango mpo na bonene ya bafonte oyo ekoki koyanola). Mikolo oyo RFS ezali capable ya ko rescaler mingi ya ba propriétés ya CSS na ba valeurs unité lokola margin
, padding
, border-radius
, to même box-shadow
.
Mecanisme yango e calculer automatiquement ba valeurs oyo ebongi na kotalela ba dimensions ya port de vue ya navigateur. Ekozala compilé na calc()
ba fonctions na mélange ya rem
na ba unité ya viewport pona ko permettre comportement ya échelle réponse.
Kosalela RFS
Ba mixins ezali na kati ya Bootstrap mpe ezali disponible mbala moko okotisi Bootstrap's scss
. RFS ekoki mpe kozala installé yango moko soki esengeli.
Kosalela ba mixins
Mixin rfs()
ezali na ba mokuse ya font-size
, margin
, margin-top
, margin-right
, margin-bottom
, margin-left
, padding
, padding-top
, padding-right
, padding-bottom
, mpe padding-left
. Tala ndakisa oyo ezali awa na nse mpo na source Sass mpe CSS oyo esangisi.
.title {
@include font-size(4rem);
}
.title {
font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
.title {
font-size: 4rem;
}
}
Propriété mosusu nionso ekoki koleka na rfs()
mixin boye:
.selector {
@include rfs(4rem, border-radius);
}
!important
ekoki mpe kaka kobakisama na motuya nyonso oyo olingi:
.selector {
@include padding(2.5rem !important);
}
Kosalela ba fonctions
Tango olingi kosalela ba includes te, ezali pe na ba fonctions mibale:
rfs-value()
ebongoli motuya narem
motuya sokipx
motuya eleki, na makambo mosusu ezongisaka mbano moko.rfs-fluid-value()
ezongisaka version fluide ya valeur moko soki propriété esengeli na rescaling.
Na ndakisa oyo, tosalelaka moko ya ba mixins ya point de rupture ya réponse oyo etongami na kati ya Bootstrap mpo na kosalela kaka styling na se ya lg
point de rupture.
.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 */
}
}
Mikanda oyo ebakisami
RFS ezali projet ekeseni na se ya organisation ya Bootstrap. Makambo mingi na ntina ya RFS mpe bobongisi na yango ekoki kozwama na ebombelo na yango ya GitHub .