मुख्य सामग्री पर जाएँ docs नेविगेशनं प्रति गच्छतु
Check
in English

आर टी एल

अस्माकं विन्यासः, घटकाः, उपयोगिता च मध्ये Bootstrap मध्ये दक्षिणतः वामपर्यन्तं पाठस्य समर्थनं कथं सक्षमं कर्तव्यमिति ज्ञातव्यम् ।

इस पृष्ठ पर

परिचित हो जाओ

अस्माकं Getting Started Introduction पृष्ठस्य माध्यमेन पठित्वा प्रथमं Bootstrap इत्यनेन परिचितं भवितुं वयं अनुशंसयामः | एकदा भवन्तः तत् धावित्वा, RTL कथं सक्षमीकरणीयम् इति अत्र पठनं निरन्तरं कुर्वन्तु ।

You may also want to read up on the RTLCSS project , यतः एतत् RTL प्रति अस्माकं दृष्टिकोणं शक्तिं ददाति।

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

RTL विशेषता अद्यापि प्रयोगात्मका अस्ति तथा च सम्भवतः उपयोक्तृप्रतिक्रियानुसारं विकसितं भविष्यति। किमपि दृष्टवान् वा सुझातुं सुधारः अस्ति वा? Open an issue , वयं भवतः अन्वेषणं प्राप्तुं प्रीतिमान् भविष्यामः।

आवश्यकम् HTML

Bootstrap-सञ्चालितपृष्ठेषु RTL सक्षमीकरणाय द्वौ कठोरौ आवश्यकताौ स्तः ।

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

ततः भवद्भिः अस्माकं CSS इत्यस्य RTL संस्करणं समाविष्टं कर्तव्यं भविष्यति । यथा, अत्र अस्माकं संकलितस्य लघुकृतस्य च CSS कृते RTL सक्षमीकरणेन सह शैलीपत्रिका अस्ति:

<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 उदाहरणेषु एकेन सह आरभत .

समीपगमनम्‌

Bootstrap मध्ये RTL समर्थनस्य निर्माणार्थं अस्माकं दृष्टिकोणः द्वयोः महत्त्वपूर्णयोः निर्णययोः सह आगच्छति यत् वयं अस्माकं CSS कथं लिखामः उपयोगं च कुर्मः इति प्रभावितं कुर्वन्ति:

  1. प्रथमं वयं RTLCSS परियोजनायाः सह तस्य निर्माणं कर्तुं निश्चितवन्तः। एतेन अस्मान् LTR तः RTL - मध्ये गमनसमये परिवर्तनस्य प्रबन्धनार्थं ओवरराइड् च प्रबन्धनार्थं केचन शक्तिशालिनः विशेषताः प्राप्यन्ते । एकस्मात् कोडबेस् तः Bootstrap इत्यस्य द्वौ संस्करणौ निर्मातुं अपि शक्नोति ।

  2. द्वितीयं, वयं तार्किकगुणपद्धतिं स्वीकुर्वितुं मुष्टिभ्यां दिशावर्गाणां नाम परिवर्तयामः । भवद्भिः अधिकांशः पूर्वमेव अस्माकं flex उपयोगितानां धन्यवादेन तार्किकगुणैः सह अन्तरक्रियाम् अकरोत्—ते दिशागुणानां स्थाने भवन्ति यथा 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 कृते एकं variable output इत्येतत् भिन्नं मूल्यं कर्तुं शक्नोति । यथा, $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;
}

वैकल्पिक फॉन्ट स्टैक

यस्मिन् सन्दर्भे भवान् कस्टम् फन्ट् उपयुङ्क्ते तर्हि अवगच्छतु यत् सर्वे फन्ट् अ-लैटिन-वर्णमालायाः समर्थनं न कुर्वन्ति । Pan-European तः Arabic परिवारं प्रति स्विच् कर्तुं, भवद्भिः /*rtl:insert: {value}*/font stack मध्ये font परिवारानां नामानि परिवर्तयितुं उपयोगः करणीयः भवेत् ।

यथा, Helvetica NeueLTR कृते font तः 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 इत्येतयोः द्वयोः आवश्यकता अस्ति वा? Thanks to 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 सञ्चिकासु प्रत्येकं चयनकर्ता , RTL सञ्चिकानां कृते .ltrच पूर्वनिर्धारितं भविष्यति । .rtlइदानीं भवान् एकस्मिन् पृष्ठे द्वयोः सञ्चिकायोः उपयोगं कर्तुं समर्थः अस्ति, तथा च केवलं एकस्य वा अन्यस्य वा दिशस्य उपयोगाय .ltrवा .rtlस्वस्य components wrappers इत्यस्य उपयोगं कर्तुं समर्थः अस्ति ।

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

यद्यपि एषः उपायः अवगम्यते तथापि निम्नलिखितविषयेषु ध्यानं दत्तव्यम् ।

  1. .ltrतथा स्विच करणसमये तदनुसारं योजयति तथा च विशेषतां .rtlददाति इति सुनिश्चितं कुर्वन्तु ।dirlang
  2. उभयोः सञ्चिकायोः लोडीकरणं वास्तविकं कार्यप्रदर्शनस्य अटङ्कं भवितुम् अर्हति: किञ्चित् अनुकूलनं विचारयन्तु , तथा च कदाचित् तासु सञ्चिकासु एकां अतुल्यकालिकरूपेण लोड् कर्तुं प्रयतध्वम् .
  3. एतेन प्रकारेण नेस्टिंग् शैल्याः अस्माकं form-validation-state()mixin यथा अभिप्रेतम् कार्यं कर्तुं न शक्नोति, अतः भवान् स्वयमेव किञ्चित् tweak करणीयम् । देखें # 31223 .

ब्रेडक्रम्ब प्रकरणम्

ब्रेडक्रम्ब विभाजकः एकमात्रः प्रकरणः अस्ति यस्य स्वस्य ब्राण्ड्-नवीनचरस्य आवश्यकता वर्तते— अर्थात् $breadcrumb-divider-flipped—defaulting to $breadcrumb-divider.

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