Tɛmɛn ka taa kunnafoni kunbabaw la Tɛmɛn ka taa docs navigation kan
in English

RFS ye

Bootstrap ka bonya caman cili masin bɛ jaabi di CSS nafamafɛnw sɛgɛsɛgɛli ma walasa ka yɔrɔ sɔrɔlenw baara ka ɲɛ filɛliyɔrɔw ni minɛnw cɛma.

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 .