आर एफ एस
बूटस्ट्रैप दा आकार बदलने आह् ला इंजन प्रतिक्रियाशील रूप कन्नै आम CSS गुणें गी स्केल करदा ऐ तां जे पूरे व्यूपोर्ट ते डिवाइस च उपलब्ध जगह दा बेहतर उपयोग कीता जाई सकै।
आरएफएस केह् ऐ ?
बूटस्ट्रैप दा साइड प्रोजेक्ट आरएफएस इक इकाई आकार बदलने आह् ला इंजन ऐ जेह् ड़ा शुरू च फॉन्ट आकार बदलने आस्तै विकसित कीता गेआ हा (इस करी इसदा संक्षिप्त रूप रिस्पांसिव फॉन्ट आकारें आस्तै कीता गेआ ऐ)। अज्जकल आरएफएस margin, padding, border-radius, जां इत्थूं तगर जे इकाई मूल्यें कन्नै मते सारे CSS गुणें गी पुनर्स्केल करने च समर्थ ऐ box-shadow.
तंत्र ब्राउज़र व्यूपोर्ट दे आयामें दे आधार उप्पर उचित मूल्यें दी गणना स्वतः करदा ऐ। एह् प्रतिक्रियाशील स्केलिंग व्यवहार गी सक्षम करने आस्तै ते व्यूपोर्ट इकाइयें calc()दे मिश्रण कन्नै फंक्शनें च संकलित कीता जाग ।rem
आरएफएस दा इस्तेमाल करदे होई
मिक्सिन बूटस्ट्रैप च शामल न ते इक बारी जेकर तुस बूटस्ट्रैप गी शामल करदे ओ तां उपलब्ध होंदे न scss. जरूरत पौने पर आरएफएस गी स्टैंडअलोन बी स्थापत कीता जाई सकदा ऐ।
मिक्सिन दा इस्तेमाल करदे होई
rfs()मिक्सिन च , font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, 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()जेकर संपत्ति गी पुनर्स्केल करने दी लोड़ ऐ तां इक मूल्य दा द्रव संस्करण वापस करदा ऐ.
इस उदाहरन च, अस बूटस्ट्रैप दे बिल्ट-इन रिस्पांसिव ब्रेकपॉइंट मिक्सिन च इक दा इस्तेमाल करदे आं तां जे सिर्फ 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 ते इसदे कॉन्फ़िगरेशन दे बारे च होर मता इसदे GitHub रिपोजिटरी पर दिक्खेआ जाई सकदा ऐ .