RTL

आमच्या लेआउट, घटक आणि युटिलिटीजमध्ये बूटस्ट्रॅपमध्ये उजवीकडून डावीकडे मजकुरासाठी समर्थन कसे सक्षम करायचे ते जाणून घ्या.

या पृष्ठावर

परिचित व्हा

आम्ही आमच्या प्रारंभ परिचय पृष्ठाद्वारे वाचून प्रथम बूटस्ट्रॅपशी परिचित होण्याची शिफारस करतो . एकदा तुम्ही ते चालवल्यानंतर, RTL कसे सक्षम करावे यासाठी येथे वाचन सुरू ठेवा.

तुम्हाला RTLCSS प्रकल्प देखील वाचायला आवडेल , कारण ते RTL कडे आमच्या दृष्टिकोनाला सामर्थ्य देते.

प्रायोगिक वैशिष्ट्य

RTL वैशिष्ट्य अद्याप प्रायोगिक आहे आणि कदाचित वापरकर्त्याच्या फीडबॅकनुसार विकसित होईल. काहीतरी दिसले किंवा सुचवण्यासाठी सुधारणा आहे? समस्या उघडा , आम्हाला तुमची अंतर्दृष्टी मिळायला आवडेल.

आवश्यक HTML

बूटस्ट्रॅप-संचालित पृष्ठांमध्ये RTL सक्षम करण्यासाठी दोन कठोर आवश्यकता आहेत.

घटकावर सेट करा dir="rtl".<html>
घटकावर एक योग्य langविशेषता जोडा, जसे की lang="ar".<html>

तिथून, तुम्हाला आमच्या CSS ची RTL आवृत्ती समाविष्ट करावी लागेल. उदाहरणार्थ, 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">

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

तुम्ही या सुधारित RTL स्टार्टर टेम्प्लेटमध्ये परावर्तित केलेल्या वरील आवश्यकता पाहू शकता.

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

RTL उदाहरणे

आमच्या अनेक RTL उदाहरणांपैकी एकासह प्रारंभ करा .

दृष्टीकोन

बूटस्ट्रॅपमध्ये RTL सपोर्ट तयार करण्याचा आमचा दृष्टिकोन दोन महत्त्वाच्या निर्णयांसह येतो जे आम्ही आमचे CSS कसे लिहितो आणि वापरतो यावर परिणाम होतो:

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

उदाहरणार्थ, .ml-3for ऐवजी margin-left, वापरा .ms-3.

आमच्या स्रोत Sass किंवा संकलित CSS द्वारे RTL सह कार्य करणे, आमच्या डीफॉल्ट LTR पेक्षा फारसे वेगळे नसावे.

स्त्रोतावरून सानुकूलित करा

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

सानुकूल RTL मूल्ये

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

LTR आणि RTL एकाच वेळी

एकाच पृष्ठावर LTR आणि RTL दोन्ही हवे आहेत? RTLCSS String Maps ला धन्यवाद , हे अगदी सरळ आहे. तुमचा @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.

RTL