RFS ye

RFS ye mun ye?

Bootstrap ka kɛrɛfɛ porozɛ RFS ye unit resizing engine ye min Dabɔra a daminɛ na walasa ka sɛbɛnnibolow bonya caman ɲɔgɔnna Kɛ (o de y’a To a surunyalen dòn Responsive Font Sizes). bi RFS bɛ se ka CSS nafa fanba sɛgɛsɛgɛ kokura ni unit nafaw ye i n' a fɔ margin, padding, border-radius, walima hali box-shadow.

Fɛɛrɛ bɛ jatebɔ kɛ a yɛrɛma nafa bɛnnenw kan ka da navigatɔrɔn ka jatebɔlan hakɛw kan. A bɛna Lajɛ ka Kɛ calc()baarakɛcogo ye ni remni filɛli-yɔrɔw ɲagaminen ye walasa ka jaabi-sɛgɛsɛgɛli kɛcogo Kɛ.

Baara kɛ ni RFS ye

Mixins bɛ Bootstrap kɔnɔ ani u bɛ sɔrɔ ni i ye Bootstrap's don a scsskɔnɔ . RFS fana bɛ se ka sigi a yɛrɛma ni a mago bɛ a la.

Baara kɛ ni mixins ye

rfs()mixin in bɛ ni sɛbɛnni surunw ye font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottomani padding-left. Aw ye misali lajɛ jukɔrɔ source Sass ani compiled CSS kan.

.title {
  @include font-size(4rem);
}

.title {
  font-size: calc(1.525rem + 3.3vw);
}

@media (min-width: 1200px) {
  .title {
    font-size: 4rem;
  }
}

Nafolo wɛrɛ o wɛrɛ bɛ se ka tɛmɛ rfs()mixin fɛ nin cogo la:

.selector {
  @include rfs(4rem, border-radius);
}

!importantfana bɛ se ka fara dɔrɔn nafa o nafa kan i b’a fɛ:

.selector {
  @include padding(2.5rem !important);
}

Baara kɛ ni baarakɛcogo ye

Ni i t’a fɛ ka baara Kɛ ni includes ye, baara fla fana bɛ yen:

• rfs-value()bɛ nafa dɔ sɛmɛntiya ka kɛ remnafa ye ni pxnafa dɔ tɛmɛna, ko wɛrɛw la a bɛ o nɔ kelen in segin.
• rfs-fluid-value()bɛ nafa dɔ ka fluid version segin ni nafolo mago bɛ sɛgɛsɛgɛli kura la.

Nin misali in na, an bɛ baara Kɛ ni Bootstrap ka jaabi-yɔrɔ-misɛnninw dɔ ye min bɛ Dòn a kɔnɔ walasa ka styling dɔrɔn de Kɛ kari-yɔrɔ jukɔrɔ lg.

.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 */
  }
}

Sɛbɛnw janyalenw

RFS ye porozɛ danfaralen ye Bootstrap jɛkulu ka bolo kan. RFS n' a labɛncogo caman bɛ se ka sɔrɔ a ka GitHub marayɔrɔ la .