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

आरटीएल के बा

हमनी के लेआउट, घटक, आ उपयोगिता सभ में बूटस्ट्रैप में दाहिने से बाएं पाठ खातिर समर्थन सक्षम करे के तरीका सीखीं।

एह पन्ना पर दिहल गइल बा

परिचित हो जाइब

हमनी के सलाह बा कि हमनी के शुरुआत परिचय पन्ना के माध्यम से पढ़ के पहिले बूटस्ट्रैप से परिचित हो जाईं . एक बेर रउआँ एकरा से गुजरला के बाद, RTL के सक्षम करे के तरीका खातिर इहाँ पढ़त रहीं।

आप RTLCSS परियोजना पर भी पढ़ल चाहब , काहे कि ई आरटीएल के हमनी के दृष्टिकोण के शक्ति देला।

प्रयोगात्मक विशेषता के बा

आरटीएल फीचर अबहिन ले प्रयोगात्मक बा आ संभवतः यूजर सभ के प्रतिक्रिया के अनुसार बिकसित होखी। कुछ देखले बानी कि कवनो सुधार सुझावे के बा? एगो मुद्दा खोलीं , हमनी के रउरा सभे के अंतर्दृष्टि मिलल बहुते नीक लागी.

एचटीएमएल के जरूरत बा

बूटस्ट्रैप से चले वाला पन्ना सभ में RTL के सक्षम करे खातिर दू गो सख्त शर्त बा।

  1. तत्व dir="rtl"पर सेट कइल गइल बा।<html>
  2. तत्व पर एगो उचित langविशेषता जोड़ीं, जइसे कि ,।lang="ar"<html>

ओहिजा से रउरा हमनी के सीएसएस के आरटीएल संस्करण शामिल करे के पड़ी. उदाहरण खातिर, RTL सक्षम के साथ हमनी के संकलित आ लघुकृत CSS खातिर स्टाइलशीट इहाँ दिहल गइल बा:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" crossorigin="anonymous">

स्टार्टर टेम्पलेट बा

रउआँ उपर दिहल गइल आवश्यकता सभ के एह संशोधित आरटीएल स्टार्टर टेम्पलेट में परिलक्षित देख सकत बानी।

<!doctype html>
<html lang="ar" dir="rtl">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" crossorigin="anonymous">

    <title>مرحبا بالعالم!</title>
  </head>
  <body>
    <h1>مرحبا بالعالم!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

आरटीएल के उदाहरण दिहल गइल बा

हमनी के कई गो आरटीएल उदाहरण में से कवनो एक से शुरू करीं .

पहुॅंंच

बूटस्ट्रैप में RTL सपोर्ट बनावे के हमनी के तरीका दू गो महत्वपूर्ण निर्णय के साथ आवेला जवन हमनी के CSS के कइसे लिखेनी जा आ इस्तेमाल करेनी जा एकर असर डालेला:

  1. सबसे पहिले हमनी के आरटीएलसीएसएस प्रोजेक्ट के संगे एकरा के बनावे के फैसला कईनी । एह से हमनी के एलटीआर से आरटीएल में जाए के समय बदलाव आ ओवरराइड के प्रबंधन खातिर कुछ शक्तिशाली फीचर मिलेला। एकरा अलावे एकरा से हमनी के एक कोडबेस से बूटस्ट्रैप के दुगो वर्जन बनावे के मौका मिलेला।

  2. दूसरा, हमनी के तार्किक गुण दृष्टिकोण अपनावे खातिर मुट्ठी भर दिशात्मक वर्ग के नाम बदल देले बानी जा। रउआ में से अधिकतर लोग हमनी के फ्लेक्स उपयोगिता के बदौलत तार्किक गुण के साथ पहिलहीं से बातचीत कर चुकल बा-उ लोग दिशा गुण के जगह ले लेला जइसे कि leftआ rightपक्ष में startआ end. जवना से क्लास के नाम आ मान बिना कवनो ओवरहेड के एलटीआर आ आरटीएल खातिर उचित हो जाला।

उदाहरण खातिर, .ml-3for के बजाय, के margin-leftइस्तेमाल करीं .ms-3।

आरटीएल के साथ काम कइल, हमनी के स्रोत सास या संकलित सीएसएस के माध्यम से, हालांकि हमनी के डिफ़ॉल्ट एलटीआर से बहुत अलग ना होखे के चाहीं।

स्रोत से अनुकूलित करीं

जब कस्टमाइजेशन के बात होखे त पसंदीदा तरीका चर, नक्शा, आ मिक्सिन के फायदा उठावल बा। ई तरीका RTL खातिर भी एकही काम करेला, भले ही ई संकलित फाइल से पोस्ट-प्रोसेस होखे, धन्यवाद बा कि RTLCSS कइसे काम करेला .

कस्टम आरटीएल मान के बा

RTLCSS मान निर्देशक के उपयोग करके , रउआ एगो चर आउटपुट के RTL खातिर एगो अलग मान बना सकत बानी। उदाहरण खातिर, $font-weight-boldपूरा कोडबेस में खातिर वजन कम करे खातिर, रउआँ /*rtl: {value}*/सिंटैक्स के इस्तेमाल कर सकत बानी:

$font-weight-bold: 700 #{/* rtl:600 */} !default;

जवन हमनी के डिफ़ॉल्ट CSS आ RTL CSS खातिर निम्नलिखित में आउटपुट करी:

/* bootstrap.css */
dt {
  font-weight: 700 /* rtl:600 */;
}

/* bootstrap.rtl.css */
dt {
  font-weight: 600;
}

वैकल्पिक फॉन्ट के ढेर बा

एह मामिला में कि रउआँ कस्टम फॉन्ट के इस्तेमाल करत बानी, ध्यान दीं कि सभ फॉन्ट गैर-लैटिन वर्णमाला के सपोर्ट ना करे लें। पैन-यूरोपीय से अरबी परिवार में बदले खातिर, रउआँ /*rtl:insert: {value}*/के अपना फॉन्ट स्टैक में फॉन्ट परिवार सभ के नाँव संशोधित करे खातिर इस्तेमाल करे के जरूरत पड़ सके ला।

उदाहरण खातिर, Helvetica Neue WebfontLTR खातिर Helvetica Neue Arabicसे RTL खातिर स्विच करे खातिर, राउर Sass कोड अइसन लउकी:

$font-family-sans-serif:
  Helvetica Neue #{"/* rtl:insert:Arabic */"},
  // Cross-platform generic font family (default user interface font)
  system-ui,
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // Basic web fallback
  Arial,
  // Linux
  "Noto Sans",
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

एक संगे एलटीआर अवुरी आरटीएल

एके पन्ना पर एलटीआर आ आरटीएल दुनु के जरूरत बा? RTLCSS String Maps के धन्यवाद , ई काफी सीधा बा। अपना s के एगो क्लास के साथ लपेटीं @import, आ RTLCSS खातिर एगो कस्टम नाम बदले के नियम सेट करीं:

/* rtl:begin:options: {
  "autoRename": true,
  "stringMap":[ {
    "name": "ltr-rtl",
    "priority": 100,
    "search": ["ltr"],
    "replace": ["rtl"],
    "options": {
      "scope": "*",
      "ignoreCase": false
    }
  } ]
} */
.ltr {
  @import "../node_modules/bootstrap/scss/bootstrap";
}
/*rtl:end:options*/

Sass फिर RTLCSS चलावे के बाद, आपके CSS फाइल में हर चयनकर्ता के द्वारा प्रीपेंड कइल जाई .ltr, आ .rtlRTL फाइल खातिर। अब रउआँ एकही पन्ना पर दुनो फाइल के इस्तेमाल करे में सक्षम बानी, आ बस एक या दूसरा दिशा के इस्तेमाल करे खातिर .ltrया अपना घटक रैपर पर इस्तेमाल कर सकेनी।.rtl

एज केस आ ज्ञात सीमा के बारे में बतावल गइल बा

हालांकि ई तरीका समझ में आवे वाला बा, कृपया निम्नलिखित बातन पर ध्यान दीं:

  1. .ltrआ स्विच करत घरी .rtl, सुनिश्चित करीं कि रउआँ ओह हिसाब से जोड़त dirआ langविशेषता देत बानी।
  2. दुनो फाइल लोड कइल एगो वास्तविक प्रदर्शन अड़चन हो सकेला: कुछ अनुकूलन पर विचार करीं , आ शायद ओह फाइल में से कवनो एक के एसिंक्रोनस रूप से लोड करे के कोशिश करीं .
  3. एह तरीका से नेस्टिंग स्टाइल हमनी के form-validation-state()मिक्सिन के इरादा के अनुसार काम करे से रोकी, एह तरीका से रउआँ के खुद से एकरा के तनी ट्वीक करे के पड़ी। देखल जाव #31223 .

ब्रेडक्रंब केस के बारे में बतावल गईल

ब्रेडक्रंब सेपरेटर एकमात्र अइसन मामला बा जवना में ओकर खुद के बिल्कुल नया चर के जरूरत बा— अर्थात $breadcrumb-divider-flipped—डिफ़ॉल्ट करे के $breadcrumb-divider.

अतिरिक्त संसाधन के बारे में बतावल गइल बा