आर एफ एस
बूटस्ट्रैप कें आकार बदलय वाला इंजन प्रतिक्रियाशील रूप सं आम सीएसएस गुणक कें स्केल करयत छै ताकि व्यूपोर्ट आ डिवाइस भर मे उपलब्ध स्थान कें बेहतर उपयोग कैल जा सकय.
आरएफएस की अछि ?
बूटस्ट्रैप केरऽ साइड प्रोजेक्ट आरएफएस एगो यूनिट रिसाइजिंग इंजन छै जेकरा शुरू म॑ फॉन्ट साइज बदलै लेली विकसित करलऽ गेलऽ छेलै (अतः एकरऽ संक्षिप्त रूप रिस्पांसिव फॉन्ट साइज लेली) । आजकल आरएफएस अधिकांश CSS गुण कें यूनिट मान जैना margin
, padding
, border-radius
, या यहां तक कें साथ रिस्केल करय मे सक्षम छै 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
| स्रोत 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()
यदि गुण कें पुनर्स्केल करय कें जरूरत छै त कोनों मान कें द्रव संस्करण वापस करयत छै.
एहि उदाहरण मे, हम बूटस्ट्रैप क बिल्ट-इन रिस्पांसिव ब्रेकपॉइंट मिक्सिन मे स एकटा क उपयोग केवल 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 */
}
}
विस्तारित दस्तावेजीकरण
आरएफएस बूटस्ट्रैप संगठन कें तहत एकटा अलग परियोजना छै. आरएफएस आओर ओकर विन्यास क बारे मे बेसी जानकारी एकर GitHub भंडार पर भेट सकैत अछि .