ወደ ዋናው ይዘት ዝለል ወደ ሰነዶች ዳሰሳ ዝለል
in English

አርኤፍኤስ

የቡትስትራፕን የሚቀይር ሞተር ምላሽ በሚሰጥ መልኩ የጋራ የሲኤስኤስ ንብረቶችን በመመዘን በእይታ ወደቦች እና መሳሪያዎች ላይ ያለውን ቦታ በተሻለ ሁኔታ ለመጠቀም።

RFS ምንድን ነው?

የቡትስትራፕ ጎን ፕሮጀክት RFS መጀመሪያ ላይ የቅርጸ ቁምፊ መጠኖችን መጠን ለመቀየር የተሰራ አሃድ የሚቀይር ሞተር ነው (ስለዚህ ምላሽ ሰጪ የቅርጸ-ቁምፊ መጠኖች ምህጻረ ቃል)። በአሁኑ ጊዜ RFS አብዛኛዎቹን የሲኤስኤስ ንብረቶች እንደ፣፣፣፣ ወይም እንደ ዩኒት ያሉ እሴቶችን marginማስተካከል ይችላል ።paddingborder-radiusbox-shadow

ስልቱ በአሳሹ መመልከቻ መጠን ላይ በመመርኮዝ ተገቢውን ዋጋዎችን በራስ-ሰር ያሰላል። ምላሽ ሰጪውን የመጠን ባህሪን ለማንቃት ከተደባለቀ እና የመመልከቻ ክፍሎች calc()ጋር ወደ ተግባራት ይዘጋጃል ።rem

RFS በመጠቀም

ድብልቆቹ በ Bootstrap ውስጥ የተካተቱ ናቸው እና አንዴ ቡትስትራፕን ካካተቱ በኋላ ይገኛሉ scss። አስፈላጊ ከሆነ RFS እንዲሁ በተናጥል ሊጫን ይችላል ።

ድብልቆችን በመጠቀም

rfs()ድብልቅው font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, እና . _ padding-right_ ምንጭ Sass እና የተጠናቀረ CSS ለማግኘት ከታች ያለውን ምሳሌ ይመልከቱ።padding-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 ማከማቻው ላይ ይገኛል ።