RFS

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 remak 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-bottomak 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);
}

!importantkapab 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 yon remvalè si yon pxvalè 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 lgbreakpoint 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 .