RFS

Matoorka wax ka beddelka ee Bootstrap ayaa si wax ku ool ah u miisaamaya guryaha CSS ee caadiga ah si ay si wanaagsan uga faa'iidaystaan bannaanka bannaan ee daawashada iyo qalabka.

Boggan

Waa maxay RFS?

Mashruuca dhinaca Bootstrap ee RFS waa halbeeg wax ka beddelaya matoorka kaas oo markii hore loo sameeyay si loo cabbiro cabbirrada farta (sidaa darteed 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 qiyamka unugga sida margin, padding, border-radius, ama xataa box-shadow.

Habkani wuxuu si toos ah u xisaabiyaa qiyamka ku haboon iyadoo lagu salaynayo cabbirka goobta daawashada browserka. Waxaa lagu soo ururin doonaa calc()hawlo leh isku dhafan remiyo unugyo daawasho si ay awood ugu yeelato hab-dhaqanka miisaan-qaadista.

Isticmaalka RFS

Isku darka waxay ku jiraan Bootstrap waxayna diyaar yihiin markaad ku darto Bootstrap's scss. RFS sidoo kale waxaa lagu rakibi karaa kali ahaan haddii loo baahdo.

Isticmaalka isku-dhafka

Isku- rfs()dhafkan 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, waxaan u isticmaalnaa mid ka mid ah Bootstrap-ka ku dhex-yaalla isku darka jabinta jawaab celinta si aan ugu dabaqno qaabaynta ka hooseysa 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 .