አርኤፍኤስ
የቡትስትራፕን የሚቀይር ሞተር ምላሽ በሚሰጥ መልኩ የጋራ የሲኤስኤስ ንብረቶችን በመመዘን በእይታ ወደቦች እና መሳሪያዎች ላይ ያለውን ቦታ በተሻለ ሁኔታ ለመጠቀም።
RFS ምንድን ነው?
የቡትስትራፕ ጎን ፕሮጀክት RFS መጀመሪያ ላይ የቅርጸ ቁምፊ መጠኖችን መጠን ለመቀየር የተሰራ አሃድ የሚቀይር ሞተር ነው (ስለዚህ ምላሽ ሰጪ የቅርጸ-ቁምፊ መጠኖች ምህጻረ ቃል)። በአሁኑ ጊዜ RFS አብዛኛዎቹን የሲኤስኤስ ንብረቶች እንደ፣፣፣፣ ወይም እንደ ዩኒት ያሉ እሴቶችን margin
ማስተካከል ይችላል ።padding
border-radius
box-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-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 ማከማቻው ላይ ይገኛል ።