मुखेल आशयाचेर वचचें डॉक्स नेव्हिगेशनाचेर वचचें
in English

आर टी एल

आमच्या मांडावळ, घटक, आनी उपयुक्ततायांतल्यान Bootstrap त उजव्या-दाव्या मजकूराक आदार कसो सक्षम करचो तें शिकात.

ह्या पानाचेर

वळख करून घेवची

आमच्या सुरवातीची वळख पान वाचून पयलीं Bootstrap ची वळख करून घेवपाची आमी शिफारस करतात . एकदां तुमी तातूंतल्यान धांवल्या उपरांत, RTL कशें सक्षम करप हाचे खातीर हांगा वाचप चालू दवरात.

You may also want to read up on the RTLCSS project , कारण तो आमच्या आरटीएल पद्दतीक शक्त दिता.

प्रायोगिक खाशेलपण

आरटीएल वैशिश्ट्य अजूनय प्रायोगिक आसा आनी वापरप्यांच्या प्रतिसादा प्रमाण घडये विकसीत जातलें. कितें तरी पळयलें वा सुचवपाची सुदारणा आसा? Open an issue , तुमचीं अंतर्दृष्टी मेळोवपाक आमकां आवडटलें.

गरजेचें एचटीएमएल

बूटस्ट्रॅप-शक्तीन चलपी पानांनी RTL सक्षम करपाखातीर दोन खर गरजां आसात.

  1. घटकाचेर सेट करात dir="rtl".<html>
  2. घटकाचेर योग्य 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-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" 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-+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. पयलीं आमी आरटीएलसीएसएस प्रकल्पा वांगडा बांदपाचें थारायलें . हाका लागून आमकां LTR वयल्यान RTL कडेन वतना बदल आनी ओव्हररायड वेवस्थापन करपाक कांय बळिश्ट वैशिश्ट्यां मेळटात. तशेंच एका कोडबेसा वयल्यान Bootstrap ची दोन आवृत्ती तयार करपाक मेळटा.

  2. दुसरें, आमी तार्कीक गुणधर्म पद्दत आपणावपा खातीर मुठीभर दिश्टीकोन वर्गांचें नांव बदललां. तुमच्यांतल्या चडशांनी आमच्या फ्लेक्स उपयुक्ततायांक लागून पयलींच तार्कीक गुणधर्मां कडेन संवाद सादला-ते सारके leftआनी rightफाटबळांत दिका गुणधर्मांची सुवात घेतात startआनी end. ताका लागून वर्ग नांवां आनी मोलां कसलोच ओव्हरहेड नासतना LTR आनी RTL खातीर योग्य जातात.

देखीक, .ml-3for बदला margin-leftवापरात .ms-3.

RTL कडेन काम करप, आमच्या स्रोत Sass वा संकलित CSS वरवीं, आमच्या मुलभूत LTR परस जरी चड वेगळें आसूंक फावना.

स्त्रोता कडल्यान पसंतीचें करचें

When it comes to customization , पसंतीचो मार्ग म्हणल्यार चड-उणें, नकाशे, आनी मिक्सिनांचो फायदो घेवप. हो पद्दत RTL खातीर तसोच काम करता, जरी तो संकलित फायलीं वयल्यान पोस्ट-प्रोसेस केल्लो आसलो तरी, RTLCSS कशें काम करता ताका लागून .

सानुकूल RTL मोलां

RTLCSS value directives वापरून , तुमी 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;

एलटीआर आनी आरटीएल एकाच वेळार

एकाच पानाचेर एलटीआर आनी आरटीएल दोनूय जाय? Thanks to RTLCSS String Maps , हें सामकें सरळ आसा. तुमचो @imports वर्गान गुठलावचो, आनी 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दितात हाची खात्री करात .dirlang
  2. दोनूय फायली लोड करप खरी कार्यक्षमताय अडचण जावंक शकता: कांय ऑप्टिमायझेशन विचारात , आनी घडये त्या फायलींनी एक अतुल्यकालिक लोड करपाचो यत्न करात .
  3. अशे तरेन नेस्टिंग शैली आमच्या form-validation-state()मिक्सिनाक हेतू प्रमाणें काम करपाक आडायतली, अशे तरेन तुमकां स्वता थोडें ट्वीक करचें पडटलें. पळयात # 31223 .

ब्रेडक्रंब केस

ब्रेडक्रंब विभाजक ही एकूच केस आसा जी ताच्या स्वताच्या एकदम नव्या चक्राची गरज आसा— म्हणल्यार $breadcrumb-divider-flipped—डिफॉल्ट करप $breadcrumb-divider.

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