RFS

Waa maxay RFS?

Mashruuca dhinaca Bootstrap RFS waa halbeeg wax ka beddelaya matoorka kaas oo markii hore loo sameeyay si loo cabbiro cabbirrada farta (markaa loo soo gaabiyo cabbirrada farta ee Jawaabta ah). Maalmahan RFS waxa ay awood u leedahay in ay dib u habayn ku samayso inta badan guryaha CSS ee leh qiimayaasha cutubyada sida margin, padding, border-radius, ama xataa box-shadow.

Farsamaynta ayaa si toos ah u xisaabinaysa qiimayaasha ku habboon iyada oo ku saleysan cabbirka barta daawashada browserka. Waxa loo ururin doonaa calc()hawlo leh isku-dhafan remiyo unugyo daawasho si ay awood ugu yeelato hab-dhaqanka is-miidaaminta.

Isticmaalka RFS

Isku darka waxay ku jiraan Bootstrap oo la heli karo marka aad ku darto Bootstrap's scss. RFS sidoo kale waxaa lagu rakibi karaa kali ahaan haddii loo baahdo.

Isticmaalka isku-dhafka

Isku- rfs()darku wuxuu leeyahay gacmo-gaaban oo loogu talagalay font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, iyo padding-left. Fiiri tusaalaha hoose ee isha Sass iyo CSS la soo ururiyey.

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

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

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

Hanti kasta oo kale ayaa loo gudbin karaa isku- rfs()dhafka sida tan:

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

!importantWaxa kale oo lagu dari karaa qiime kasta oo aad rabto:

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

Isticmaalka hawlaha

Marka aadan rabin inaad isticmaasho waxa ka mid ah, waxa kale oo jira laba hawlood:

• rfs-value()wuxuu u beddelaa qiime remqiimo haddii pxqiimaha la dhaafo, xaaladaha kale waxay soo celisaa isla natiijada.
• rfs-fluid-value()soo celisa nooca dareeraha ee qiimaha haddii hantidu u baahan tahay dib u habeyn.

Tusaalahan, waxaanu isticmaalnaa mid ka mid ah Bootstrap-ku-ku- jirsan ee kajawaabista dhibcooyinka jabinta si aan ugu dabaqno qaabaynta ka hoosaysa barta lgjabinta.

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

Dukumentiyada la dheereeyey

RFS waa mashruuc gaar ah oo hoos yimaada ururka Bootstrap. Wax badan oo ku saabsan RFS iyo qaabeynteeda ayaa laga heli karaa kaydkeeda GitHub .