आरएफएस
बूटस्ट्रॅपाचें आकार बदलपी इंजिन प्रतिसाद दिवन सामान्य CSS गुणधर्मांक स्केल करता जेणे करून दृश्यपोर्ट आनी साधनां मदीं उपलब्ध जाग्याचो बरो वापर करपाक मेळटा.
आरएफएस म्हणल्यार कितें?
बूटस्ट्रॅपाचो बाजूचो प्रकल्प RFS हें एक युनिट आकार बदलपी इंजिन आसा जें सुरवेक फॉन्ट आकार बदलपाखातीर विकसीत केल्लें (देखून ताचो संक्षेप Responsive Font Sizes). margin
सद्या RFS चडशे CSS गुणधर्म , padding
, border-radius
, वा लेगीत सारकिल्या एकक मूल्यां सयत रिस्केल करपाक सक्षम आसा box-shadow
.
ब्राउझर दृश्यपोर्टाच्या परिमाणांचेर आदारीत यंत्रणा आपोआप योग्य मोलां मेजता. प्रतिसाद दिवपी मापन वर्तन सक्षम करपाक आनी दृश्यपोर्ट एककांच्या calc()
मिश्रणा वांगडा कार्यांत संकलित करतले .rem
आरएफएस वापरप
मिक्सिन बूटस्ट्रॅपांत आस्पावतात आनी एकदां तुमी बूटस्ट्रॅप चो आस्पाव केल्या उपरांत उपलब्ध आसात scss
. गरज पडल्यार RFS स्टँडअलोनय प्रतिष्ठापीत करूंक शकता.
मिक्सिनांचो उपेग करून
मिक्सिनांत rfs()
, font-size
, margin
, margin-top
, margin-right
, margin-bottom
, margin-left
, padding
, padding-top
, padding-right
, padding-bottom
आनी padding-left
. स्रोत Sass आनी संकलित CSS खातीर सकयल दिल्���ें उदाहरण पळयात.
.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);
}
कार्यांचो वापर करून
जेन्ना तुमकां includes वापरपाक जायना तेन्ना दोन कार्यांय आसात:
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 हो बूटस्ट्रॅप संघटने खाला एक वेगळो प्रकल्प आसा. RFS आनी ताचे संरचनेविशीं चड ताच्या GitHub भंडाराचेर मेळूं येता .