RFS
Motora guheztina mezinbûnê ya Bootstrap bi bertek taybetmendiyên CSS-ê yên hevpar dipîve da ku cîhê berdest li seranserê dîtingeh û cîhazan çêtir bikar bîne.
RFS çi ye?
Projeya alîgir a Bootstrap RFS motorek guhezbarkirina yekîneyek e ku di destpêkê de ji bo mezinbûna mezinahiyên fontê hate pêşve xistin (ji ber vê yekê kurteya wê ji bo Mezinahiyên Fontê Bersivdar). Naha RFS dikare piraniya taybetmendiyên CSS-ê bi nirxên yekîneyê yên mîna margin
, padding
, border-radius
, an tewra ji nû ve bihejîne box-shadow
.
Mekanîzma bixweber nirxên guncan li ser bingeha pîvanên dîmendera gerokê hesab dike. calc()
Ew ê di fonksiyonên bi tevlihevî rem
û yekîneyên dîtinê de were berhev kirin da ku tevgera pîvana bersivdar çalak bike.
Bikaranîna RFS
Miksîn di Bootstrap-ê de cih digirin û gava ku hûn Bootstrap-ê têxin berdest in scss
. Ger hewce be RFS jî dikare serbixwe were saz kirin .
Miksan bikar tînin
Di rfs()
mixin de kurtenivîsên font-size
, margin
, margin-top
, margin-right
, margin-bottom
, margin-left
, padding
, padding-top
, padding-right
, padding-bottom
, û padding-left
. Ji bo çavkaniya Sass û CSS-ya berhevkirî mînaka jêrîn bibînin.
.title {
@include font-size(4rem);
}
.title {
font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
.title {
font-size: 4rem;
}
}
Taybetmendiyek din dikare bi vî rengî derbasî rfs()
mixin bibe:
.selector {
@include rfs(4rem, border-radius);
}
!important
her weha dikare tenê li nirxa ku hûn dixwazin lê zêde bikin:
.selector {
@include padding(2.5rem !important);
}
Karanîna fonksiyonan
Dema ku hûn nexwazin têdeyan bikar bînin, du fonksiyon jî hene:
rfs-value()
rem
Heke nirxek derbas bibepx
nirxek vediguherîne nirxek, di rewşên din de heman encamê vedigerîne.rfs-fluid-value()
Ger malûmilk hewceyê nûvekirinê be guhertoya herikbar a nirxek vedigerîne.
Di vê nimûneyê de, em yek ji mîksên xala veqetînê ya bersivdar a Bootstrap-ê bikar tînin da ku tenê şêwazê li jêr xala veqetandinê bicîh bikin 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 */
}
}
Belgeya berfireh
RFS di bin rêxistina Bootstrap de projeyek cihê ye. Zêdetir li ser RFS û veavakirina wê dikare li ser depoya wê ya GitHub were dîtin .