RFS
Bootstrap-ның зурлыктагы двигателе күренешләр һәм приборлар аша булган урынны яхшырак куллану өчен, гомуми CSS үзлекләрен масштаблый.
Нәрсә ул RFS?
Bootstrap ягы проекты - RFS - шрифт зурлыкларын үзгәртү өчен эшләнгән берәмлек размеры. Бүгенге көндә RFS күпчелек CSS үзлекләрен, яки, хәтта берәмлек кыйммәтләре белән margin
коткарырга сәләтле .padding
border-radius
box-shadow
Механизм браузер күренешенең үлчәмнәренә нигезләнеп тиешле кыйммәтләрне автоматик рәвештә исәпли. Ул җаваплы масштаб тәртибен булдыру calc()
өчен функцияләргә тупланачак .rem
RFS куллану
Миксиннар Bootstrap эченә кертелгән һәм Bootstrap'ны керткәч була scss
. Кирәк булса, RFSны үзенчәлекле урнаштырырга мөмкин .
Миксиннарны куллану
rfs()
Миксинның ,,,,,,,,, һәм font-size
өчен стенограммалары margin
бар . _ margin-top
_ margin-right
_ margin-bottom
_ margin-left
_ padding
_ Sass чыганагы һәм тупланган CSS өчен түбәндәге мисалны карагыз.padding-top
padding-right
padding-bottom
padding-left
.title {
@include font-size(4rem);
}
.title {
font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
.title {
font-size: 4rem;
}
}
Башка теләсә нинди милек rfs()
миксинга мондый күчерелергә мөмкин:
.selector {
@include rfs(4rem, border-radius);
}
!important
теләсә нинди кыйммәткә генә өстәп була:
.selector {
@include padding(2.5rem !important);
}
Функцияләрне куллану
Керүләрне кулланырга теләмәгәндә, ике функция дә бар:
rfs-value()
rem
кыйммәт узса, кыйммәтне кыйммәткә әйләндерә,px
башка очракларда ул шул ук нәтиҗәне кире кайтара.rfs-fluid-value()
мөлкәтне коткарырга кирәк булса, кыйммәтнең сыеклык версиясен кире кайтара.
Бу мисалда, без Bootstrap'ның урнаштырылган җаваплы нокта миксиннарының берсен кулланабыз , алар бары тик өзек астындагы стилизацияне кулланалар 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 */
}
}
Киңәйтелгән документлар
RFS - Bootstrap оешмасы астында аерым проект. RFS һәм аның конфигурациясе турында күбрәк GitHub складында табып була .