RFS

He aha te RFS?

Ko te kaupapa taha a Bootstrap ko te RFS he miihini whakarereke i te waahanga i hangaia i te tuatahi ki te whakarereke i te rahi momotuhi (no reira tona whakapoto mo nga Rahi Momotuhi Whakautu). I enei wa ka taea e RFS te whakahou ano i te nuinga o nga taonga CSS me nga uara wae penei i te margin, padding, border-radius, , ara box-shadow.

Ka tatau aunoatia e te miihini nga uara e tika ana i runga i nga rahi o te tauranga tirohanga tirotiro. Ka whakahiatohia ki roto i calc()nga mahi me te whakakotahitanga o remnga waeine tiro kia taea ai te whanonga tauine aro.

Ma te whakamahi i te RFS

Ko nga ranunga kei roto i te Bootstrap ka waatea i te wa ka whakauruhia e koe a Bootstrap's scss. Ka taea hoki te whakauru i te RFS ki te hiahiatia.

Ma te whakamahi i nga ranunga

Ko te rfs()ranunga he kupu poto mo font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, me padding-left. Tirohia te tauira i raro nei mo te puna Sass me te CSS whakahiato.

.title {
  @include font-size(4rem);
}

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

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

Ko etahi atu taonga ka taea te tuku ki te rfs()mixin penei:

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

!importantKa taea hoki te taapiri atu ki nga uara e hiahia ana koe:

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

Te whakamahi i nga mahi

Mena kaore koe e hiahia ki te whakamahi i nga whakauru, e rua ano nga mahi:

• rfs-value()ka huri i te uara ki te remuara mena pxka paahitia he uara, i etahi atu keehi ka whakahoki ano i te hua ano.
• rfs-fluid-value()ka whakahoki mai i te putanga wai o te uara ki te hiahia te taonga ki te whakatikatika.

I roto i tenei tauira, ka whakamahia e matou tetahi o nga whakaurunga whawhati urupare a Bootstrap ki te whakamahi i te taatai ​​​​i raro i te lgwaahi pakaru.

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

Nga tuhinga roa

Ko te RFS he kaupapa motuhake i raro i te whakahaere Bootstrap. Ka kitea etahi atu korero mo te RFS me tana whirihoranga i runga i tana putunga GitHub .