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

आर टी एल

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

इस पेज पर

परिचित हो जाओ

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

तुस आरटीएलसीएसएस परियोजना पर बी पढ़ना चांह् दे ओ , की जे एह् आरटीएल आस्तै साढ़े दृष्टिकोण गी शक्ति दिंदा ऐ।

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

आरटीएल फीचर अजें बी प्रयोगात्मक ऐ ते संभवत: बरतूनी दी प्रतिक्रिया दे अनुसार विकसित होग। कुछ स्पॉट कीता या सुझाव देने आस्ते कोई सुधार ऐ? Open an issue , अस तुंदी अंतर्दृष्टि पाना बड़ा पसंद करगे।

एचटीएमएल दी लोड़ ऐ

बूटस्ट्रैप-चालित पन्नें च आरटीएल गी सक्षम करने आस्तै दो सख्त शर्तें न.

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

उत्थै थमां, तुसेंगी साढ़े सीएसएस दा इक आरटीएल संस्करण शामल करना होग। मसाल आस्तै, आरटीएल सक्षम कन्नै साढ़े संकलित ते मिनीफाइड CSS आस्तै स्टाइलशीट इत्थै ऐ:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" 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-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" 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-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 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-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

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

साढ़े केईं आरटीएल उदाहरणें च इक कन्नै शुरू करो .

नजरिया

बूटस्ट्रैप च आरटीएल समर्थन बनाने दा साढ़ा तरीका दो महत्वपूर्ण फैसले कन्नै औंदा ऐ जेह् ड़ा इस गल्लै गी प्रभावित करदा ऐ जे अस अपने CSS गी किस चाल्ली लिखने ते बरतने आं :

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

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

मसलन, .ml-3for दे बजाय margin-left, इस्तेमाल करो .ms-3.

RTL कन्नै कम्म करना, साढ़े स्रोत Sass जां संकलित CSS दे राहें, साढ़े डिफ़ॉल्ट LTR थमां हालांकि मता बक्ख नेईं होना चाहिदा.

स्रोत थमां अनुकूलित करो

जदूं कस्टमाइजेशन दी गल्ल आंदी ऐ तां पसंदीदा तरीका ऐ चर, नक्शे, ते मिक्सिन दा फायदा लैना। एह् तरीका 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 ArabicRTL आस्तै स्विच करने आस्तै, तुंदा 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.

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