RFS

RFS ni iki?

Umushinga wa Bootstrap kuruhande rwa RFS nigice cyo guhindura moteri yakozwe muburyo bwambere kugirango ihindure ingano yimyandikire (niyo mpamvu ahinnye yerekana Ingano yimyandikire). Muri iki gihe, RFS ishoboye gukuraho imitungo myinshi ya CSS hamwe nagaciro keza nka ,,, margincyangwa ndetse .paddingborder-radiusbox-shadow

Inzira ihita ibara indangagaciro zikwiye zishingiye ku bipimo byerekana amashusho. Bizakusanyirizwa calc()mumikorere hamwe no kuvanga remno kureba ibice kugirango bishoboze imyitwarire yo gupima.

Gukoresha RFS

Imvange zirimo Bootstrap kandi ziraboneka iyo ushizemo Bootstrap scss. RFS irashobora kandi gushyirwaho standalone mugihe bikenewe.

Gukoresha imvange

Kuvanga bifite amagambo rfs()ahinnye font-size,,,,,,,,, na . _ margin_ margin-top_ margin-right_ margin-bottom_ margin-left_ Reba urugero rukurikira kubisoko Sass hamwe na CSS yakusanyije.paddingpadding-toppadding-rightpadding-bottompadding-left

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

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

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

Ibindi bintu byose birashobora kunyuzwa kuri rfs()mixin nkiyi:

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

!importantirashobora kandi kongerwaho gusa agaciro kose ushaka:

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

Gukoresha imikorere

Mugihe udashaka gukoresha ibirimo, hari nibikorwa bibiri:

• rfs-value()ihindura agaciro mu remgaciro niba pxagaciro kanyujijwe, mubindi bihe gisubiza igisubizo kimwe.
• rfs-fluid-value()isubiza fluid verisiyo yagaciro niba umutungo ukeneye gukuraho.

Muriyi ngero, dukoresha imwe muri Bootstrap yubatswe muburyo bwo gusubiza ibyivanze kugirango dushyireho stiling munsi lgyumwanya.

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

Inyandiko yaguye

RFS ni umushinga wihariye munsi ya Bootstrap. Ibindi bijyanye na RFS nibisobanuro byayo murashobora kubisanga mububiko bwayo bwa GitHub .