मुख्य सामग्री पर जाउ डॉक्स नेविगेशन पर जाउ
Check
in English

आर एफ एस

बूटस्ट्रैप कें आकार बदलय वाला इंजन प्रतिक्रियाशील रूप सं आम सीएसएस गुणक कें स्केल करयत छै ताकि व्यूपोर्ट आ डिवाइस भर मे उपलब्ध स्थान कें बेहतर उपयोग कैल जा सकय.

आरएफएस की अछि ?

बूटस्ट्रैप केरऽ साइड प्रोजेक्ट आरएफएस एगो यूनिट रिसाइजिंग इंजन छै जेकरा शुरू म॑ फॉन्ट साइज बदलै लेली विकसित करलऽ गेलऽ छेलै (अतः एकरऽ संक्षिप्त रूप रिस्पांसिव फॉन्ट साइज लेली) । आजकल आरएफएस अधिकांश 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 भंडार पर भेट सकैत अछि .