Tlolela ho litaba tsa mantlha Tlolela ho li-docs navigation

Enjene ea Bootstrap e fetolang boholo e lekanya thepa e tloaelehileng ea CSS ho sebelisa hamolemo sebaka se fumanehang hohle libakeng tsa ho shebella le lisebelisoa.

RFS ke eng?

Projeke ea lehlakore ea Bootstrap RFS ke enjine ea ho fetola boholo ba yuniti eo qalong e ileng ea ntlafatsoa ho fetola boholo ba fonte (ka hona, khutsufatso ea eona bakeng sa boholo ba litlhaku tse arabelang). Matsatsing ana RFS e khona ho hlakisa boholo ba thepa ea CSS ka boleng ba yuniti joalo ka margin, padding, border-radius, kapa box-shadow.

Mochini o ipapisa le litekanyetso tse nepahetseng ho ipapisitsoe le boholo ba "browser viewport". E tla hlophisoa hore e be calc()mesebetsi e nang le motsoako oa likarolo le pono ea pono remho thusa boitšoaro bo arabelang.

Ho sebelisa RFS

Li-mixins li kenyellelitsoe ho Bootstrap 'me lia fumaneha hang ha u kenyelletsa Bootstrap's scss. RFS e ka boela ea kenngoa e ikemetseng ha ho hlokahala.

Ho sebelisa metsoako

Motsoako rfs()o na le li-shorthands tsa font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, le padding-left. Sheba mohlala o ka tlase bakeng sa mohloli oa Sass le CSS e hlophisitsoeng.

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

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

Thepa efe kapa efe e 'ngoe e ka fetisetsoa ho rfs()mixin ka tsela ena:

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

!importante ka eketsoa boleng bofe kapa bofe boo u bo batlang:

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

Ho sebelisa lits'ebetso

Ha u sa batle ho sebelisa lisebelisoa, ho boetse ho na le mesebetsi e 'meli:

  • rfs-value()e fetola boleng ho remboleng haeba pxboleng bo fetisitsoe, maemong a mang e khutlisa sephetho se tšoanang.
  • rfs-fluid-value()e khutlisa mofuta oa mokelikeli oa boleng haeba thepa e hloka ho hlakisoa.

Mohlaleng ona, re sebelisa e 'ngoe ea li-mixpoint tsa Bootstrap tse hahelletsoeng kahare ho sebelisa setaele ka tlase ho sebaka sa lgphomolo.

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

Litokomane tse atolositsoeng

RFS ke projeke e arohaneng tlasa mokhatlo oa Bootstrap. Tse ling mabapi le RFS le tlhophiso ea eona li ka fumanoa polokelong ea eona ea GitHub .