RFS

RFS دېگەن نېمە؟

Bootstrap نىڭ يان تەرەپتىكى تۈرى RFS بىر خىل چوڭلۇقتىكى ماتور بولۇپ ، دەسلەپتە خەت چوڭلۇقىنىڭ چوڭ-كىچىكلىكىنى ئۆزگەرتىش ئۈچۈن ياسالغان (شۇڭلاشقا ئۇنىڭ خەت نۇسخىسىنىڭ قىسقارتىلمىسى). ھازىر RFS كۆپىنچە CSS خۇسۇسىيەتلىرىنى ، ھەتتا ، ھەتتا بىرلىك قىممىتى بىلەن بىر marginتەرەپ قىلالايدۇ .paddingborder-radiusbox-shadow

بۇ مېخانىزم توركۆرگۈچنىڭ كۆرۈنۈش ئۆلچىمىگە ئاساسەن مۇۋاپىق قىممەتلەرنى ئاپتوماتىك ھېسابلايدۇ. calc()ئۇ ئارىلاشما ۋە كۆرۈش ئۈسكۈنىلىرى ئارىلاشتۇرۇلغان ئىقتىدارلارغا توپلىنىپ rem، ئىنكاس قايتۇرۇش كۆلىمىنى قوزغىتىدۇ.

RFS نى ئىشلىتىش

بۇ ئارىلاشمىلار Bootstrap غا كىرگۈزۈلگەن بولۇپ ، Bootstrap نى ئۆز ئىچىگە ئالغاندىن كېيىن ئىشلەتكىلى بولىدۇ scss. زۆرۈر تېپىلغاندا RFS نى مۇستەقىل ئورنىتىشقا بولىدۇ.

ئارىلاشمىلارنى ئىشلىتىش

بۇ ئارىلاشما rfs(),,,,,,,,,, font-sizeۋە ۋە . margin_ margin-top_ margin-right_ margin-bottom_ margin-left_ padding_ padding-top_ مەنبە Sass ۋە تۈزۈلگەن CSS ئۈچۈن تۆۋەندىكى مىسالغا قاراڭ.padding-rightpadding-bottompadding-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 ئامبىرىدىن تاپقىلى بولىدۇ .