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.
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 rem
iyo 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);
}
!important
Waxa 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 qiimerem
qiimo haddiipx
qiimaha 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 lg
jabinta.
.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 .