आर एफ एस
बूटस्ट्रैप दा आकार बदलने आह् ला इंजन प्रतिक्रियाशील रूप कन्नै आम 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 रिपोजिटरी पर दिक्खेआ जाई सकदा ऐ .