आर टी एल
अस्माकं विन्यासः, घटकाः, उपयोगिता च मध्ये 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 सक्षमीकरणाय द्वौ कठोरौ आवश्यकताौ स्तः ।
- तत्व
dir="rtl"
पर सेट करें ।<html>
- तत्त्वे ,
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-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" 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-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>
आरटीएल उदाहरणानि
अस्माकं अनेक RTL उदाहरणेषु एकेन सह आरभत .
समीपगमनम्
Bootstrap मध्ये RTL समर्थनस्य निर्माणार्थं अस्माकं दृष्टिकोणः द्वयोः महत्त्वपूर्णयोः निर्णययोः सह आगच्छति यत् वयं अस्माकं CSS कथं लिखामः उपयोगं च कुर्मः इति प्रभावितं कुर्वन्ति:
-
प्रथमं वयं RTLCSS परियोजनायाः सह तस्य निर्माणं कर्तुं निश्चितवन्तः। एतेन अस्मान् LTR तः RTL - मध्ये गमनसमये परिवर्तनस्य प्रबन्धनार्थं ओवरराइड् च प्रबन्धनार्थं केचन शक्तिशालिनः विशेषताः प्राप्यन्ते । एकस्मात् कोडबेस् तः Bootstrap इत्यस्य द्वौ संस्करणौ निर्मातुं अपि शक्नोति ।
-
द्वितीयं, वयं तार्किकगुणपद्धतिं स्वीकुर्वितुं मुष्टिभ्यां दिशावर्गाणां नाम परिवर्तयामः । भवद्भिः अधिकांशः पूर्वमेव अस्माकं flex उपयोगितानां धन्यवादेन तार्किकगुणैः सह अन्तरक्रियाम् अकरोत्—ते दिशागुणानां स्थाने भवन्ति यथा
left
तथाright
च पक्षेstart
तथाend
च तत् वर्गनामानि मूल्यानि च LTR तथा RTL कृते विना किमपि ओवरहेड् उपयुक्तानि करोति ।
यथा - .ml-3
for इत्यस्य स्थाने 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 Neue Webfont
LTR कृते तः 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;
एलटीआर एवं आरटीएल एक ही समय में
एकस्मिन् पृष्ठे 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 इत्यस्य उपयोगं कर्तुं समर्थः अस्ति ।
एज केस एवं ज्ञात सीमाएँ
यद्यपि एषः उपायः अवगम्यते तथापि निम्नलिखितविषयेषु ध्यानं दत्तव्यम् ।
.ltr
तथा स्विच करणसमये तदनुसारं योजयति तथा च विशेषतां.rtl
ददाति इति सुनिश्चितं कुर्वन्तु ।dir
lang
- उभयोः सञ्चिकायोः लोडीकरणं वास्तविकं कार्यप्रदर्शनस्य अटङ्कं भवितुम् अर्हति: किञ्चित् अनुकूलनं विचारयन्तु , तथा च कदाचित् तासु सञ्चिकासु एकां अतुल्यकालिकरूपेण लोड् कर्तुं प्रयतध्वम् .
- एतेन प्रकारेण नेस्टिंग् शैल्याः अस्माकं
form-validation-state()
mixin यथा अभिप्रेतम् कार्यं कर्तुं न शक्नोति, अतः भवान् स्वयमेव किञ्चित् tweak करणीयम् । देखें # 31223 .
ब्रेडक्रम्ब प्रकरणम्
ब्रेडक्रम्ब विभाजकः एकमात्रः प्रकरणः अस्ति यस्य स्वस्य ब्राण्ड् नूतनचरस्य आवश्यकता वर्तते— अर्थात् $breadcrumb-divider-flipped
—defaulting to $breadcrumb-divider
.