RFS
Motè redimansyonman Bootstrap la adapte pwopriyete CSS komen yo pou pi byen itilize espas ki disponib atravè fenèt yo ak aparèy yo.
ki sa ki RFS?
Pwojè bò RFS Bootstrap a se yon motè redimansyon inite ki te okòmansman devlope pou redimansyonman gwosè font (kidonk abrevyasyon li pou Gwosè Font Responsive). Sèjousi, RFS kapab chanje pi fò pwopriyete CSS ak valè inite tankou margin
, padding
, border-radius
, oswa menm box-shadow
.
Mekanis la kalkile otomatikman valè ki apwopriye yo baze sou dimansyon fenèt navigatè a. Li pral konpile nan calc()
fonksyon ak yon melanj de rem
ak inite viewport yo ki ap pèmèt konpòtman an dekale reponn.
Sèvi ak RFS
Mixin yo enkli nan Bootstrap epi yo disponib yon fwa ou enkli Bootstrap la scss
. RFS kapab tou enstale otonòm si sa nesesè.
Sèvi ak mixin yo
rfs()
Mixin a gen stenografi pou , font-size
, margin
, margin-top
, margin-right
, margin-bottom
, margin-left
, padding
, padding-top
, padding-right
, padding-bottom
ak padding-left
. Gade egzanp ki anba a pou sous Sass ak konpile CSS.
.title {
@include font-size(4rem);
}
.title {
font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
.title {
font-size: 4rem;
}
}
Nenpòt lòt pwopriyete ka pase nan rfs()
mixin la tankou sa a:
.selector {
@include rfs(4rem, border-radius);
}
!important
kapab tou jis ajoute nan kèlkeswa valè ou vle:
.selector {
@include padding(2.5rem !important);
}
Sèvi ak fonksyon yo
Lè ou pa vle sèvi ak enkli ladan yo, gen tou de fonksyon:
rfs-value()
konvèti yon valè nan yonrem
valè si yonpx
valè pase, nan lòt ka li retounen menm rezilta a.rfs-fluid-value()
retounen vèsyon likid yon valè si pwopriyete a bezwen re-echèl.
Nan egzanp sa a, nou sèvi ak youn nan mixin Bootstrap ki entegre pou reponn a breakpoint pou sèlman aplike stil anba pwen lg
breakpoint la.
.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 */
}
}
Dokimantasyon pwolonje
RFS se yon pwojè separe anba òganizasyon Bootstrap la. Ou ka jwenn plis enfòmasyon sou RFS ak konfigirasyon li yo nan depo GitHub li yo .