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

आर टी एल

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

इस पेज पर

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

हम अपन शुरूआत परिचय पृष्ठ के माध्यम स पढ़ि कए पहिने बूटस्ट्रैप स परिचित हेबाक सलाह दैत छी . एक बेर जखन अहां एकरा सं गुजरि लेब तखन आरटीएल कोना सक्षम कएल जाए ताहि लेल एतय पढ़ैत रहू.

अहां आरटीएलसीएसएस परियोजना पर सेहो पढ़य चाहब , कियाकि इ आरटीएल कें लेल हमर दृष्टिकोण कें शक्ति प्रदान करयत छै.

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

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

आवश्यक एचटीएमएल

बूटस्ट्रैप संचालित पृष्ठक मे आरटीएल कें सक्षम करय कें लेल दूटा सख्त आवश्यकता छै.

  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-OXTEbYDqaX2ZY/BOaZV/yFGChYHtrXH2nyXJ372n2Y8abBhrqacCEe+3qhSHtLjy" 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-OXTEbYDqaX2ZY/BOaZV/yFGChYHtrXH2nyXJ372n2Y8abBhrqacCEe+3qhSHtLjy" 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-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" 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-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>
    -->
  </body>
</html>

आरटीएल के उदाहरण

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

दृष्टिकोण

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

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

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

जेना, .ml-3for केर बदला मे margin-left, प्रयोग करू .ms-3.

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

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

जब बात आबै छै अनुकूलन , पसंदीदा तरीका चर, नक्शा, आरू मिक्सिन के लाभ उठाना छै. इ दृष्टिकोण आरटीएल कें लेल एकहि तरह कें काज करयत छै, भले ही इ संकलित फाइल सं पोस्ट-प्रोसेस कैल गेल होय, धन्यवाद कें लेल जे आरटीएलसीएसएस कोना काज करयत छै .

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

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 NeueLTR कें 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, आओर RTL फाइल के लेल प्रीपेंड कएल जाएत .rtl. आब अहां एकहि पन्ना पर दुनू फाइल के उपयोग करय मे सक्षम छी, आओर बस एक या दोसर दिशा के उपयोग करय लेल .ltrया अपन कंपोनेंट रैपर के उपयोग करय मे सक्षम छी..rtl

एज केस एवं ज्ञात सीमाएँ

जखन कि ई दृष्टिकोण बुझय योग्य अछि, कृपया निम्नलिखित पर ध्यान दियौक:

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

ब्रेडक्रम्ब केस

ब्रेडक्रम्ब विभाजक एकमात्र मामला छै जइ मे अपनय बिल्कुल नया चर कें आवश्यकता होयत छै— अर्थात $breadcrumb-divider-flipped—डिफ़ॉल्ट करनाय $breadcrumb-divider.

अतिरिक्त संसाधन