आरटीएल

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

इस पृष्ठ पर

परिचित हो जाओ

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

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

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

आरटीएल सुविधा अभी भी प्रायोगिक है और संभवत: उपयोगकर्ता प्रतिक्रिया के अनुसार विकसित होगी। कुछ देखा या सुझाव देने के लिए सुधार किया है? एक मुद्दा खोलें , हमें आपकी जानकारी प्राप्त करना अच्छा लगेगा।

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

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

तत्व dir="rtl"पर सेट करें ।<html>
एक उपयुक्त langविशेषता जोड़ें, जैसे lang="ar", <html>तत्व पर।

वहां से, आपको हमारे CSS का RTL संस्करण शामिल करना होगा। उदाहरण के लिए, आरटीएल सक्षम के साथ हमारे संकलित और छोटे सीएसएस के लिए स्टाइलशीट यहां दी गई है:

<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>

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

हमारे कई आरटीएल उदाहरणों में से एक के साथ आरंभ करें ।

दृष्टिकोण

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

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

उदाहरण के लिए, के लिए के बजाय का .ml-3उपयोग margin-leftकरें .ms-3।

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

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

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

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

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 Webfontएलटीआर से Helvetica Neue Arabicआरटीएल के लिए स्विच करने के लिए, आपका एसएएस कोड इस तरह दिखता है:

$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;

एक ही समय में एलटीआर और आरटीएल

LTR और RTL दोनों को एक ही पेज पर चाहिए? RTLCSS स्ट्रिंग मैप्स के लिए धन्यवाद , यह बहुत सीधा है। अपने 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

किनारे के मामले और ज्ञात सीमाएँ

हालांकि यह दृष्टिकोण समझ में आता है, कृपया निम्नलिखित पर ध्यान दें:

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

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