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-+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 उदाहरणहरू
हाम्रा धेरै RTL उदाहरणहरू मध्ये एउटाको साथ सुरू गर्नुहोस् ।
दृष्टिकोण
बुटस्ट्र्यापमा RTL समर्थन निर्माण गर्ने हाम्रो दृष्टिकोणले हामीले हाम्रो CSS लेख्ने र प्रयोग गर्ने तरिकालाई असर गर्ने दुई महत्त्वपूर्ण निर्णयहरू लिएर आउँछ:
-
पहिले, हामीले यसलाई RTLCSS परियोजना मार्फत निर्माण गर्ने निर्णय गर्यौं। यसले हामीलाई LTR बाट RTL मा सार्दा परिवर्तनहरू र ओभरराइडहरू व्यवस्थापन गर्न केही शक्तिशाली सुविधाहरू दिन्छ। यसले हामीलाई एक कोडबेसबाट बुटस्ट्र्यापको दुई संस्करणहरू निर्माण गर्न अनुमति दिन्छ।
-
दोस्रो, हामीले तार्किक गुण दृष्टिकोण अपनाउन केही मुट्ठीभर दिशात्मक कक्षाहरूको नाम परिवर्तन गरेका छौं। तपाईंहरू मध्ये धेरैले पहिले नै तार्किक गुणहरूसँग अन्तर्क्रिया गरिसक्नु भएको छ हाम्रो फ्लेक्स उपयोगिताहरूको लागि धन्यवाद — तिनीहरूले दिशा गुणहरू जस्तै
left
रright
पक्षमा प्रतिस्थापनstart
गर्छन्end
। यसले कुनै पनि ओभरहेड बिना LTR र RTL को लागि वर्ग नाम र मानहरू उपयुक्त बनाउँछ।
उदाहरणका लागि, .ml-3
for को सट्टा 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 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 एकै समयमा
एउटै पृष्ठमा LTR र RTL दुवै चाहिन्छ? RTLCSS String Maps लाई धन्यवाद , यो एकदमै सरल छ। तपाइँको @import
s लाई क्लासको साथ लपेट्नुहोस्, र 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
तपाइँको कम्पोनेन्ट र्यापरहरूमा एक वा अर्को दिशा प्रयोग गर्न।
किनारा केसहरू र ज्ञात सीमाहरू
जबकि यो दृष्टिकोण बुझ्न योग्य छ, कृपया निम्नमा ध्यान दिनुहोस्:
- स्विच गर्दा
.ltr
र.rtl
, निश्चित गर्नुहोस् कि तपाईंले थप्नु भएको छdir
रlang
तदनुसार विशेषताहरू। - दुबै फाइलहरू लोड गर्दा वास्तविक कार्यसम्पादन अवरोध हुन सक्छ: केही अप्टिमाइजेसनलाई विचार गर्नुहोस्, र हुनसक्छ ती फाइलहरू मध्ये एउटालाई एसिन्क्रोनस रूपमा लोड गर्ने प्रयास गर्नुहोस् ।
- यस तरिकाले नेस्टिङ शैलीहरूले हाम्रो
form-validation-state()
मिक्सिनलाई उद्देश्य अनुसार काम गर्नबाट रोक्नेछ, त्यसैले तपाईंले यसलाई आफैंले अलिकति ट्वीक गर्न आवश्यक छ। हेर्नुहोस् #31223 ।
ब्रेडक्रम्ब केस
ब्रेडक्रम्ब विभाजक एक मात्र केस हो जसलाई यसको आफ्नै ब्रान्ड नयाँ चर चाहिन्छ — अर्थात् — $breadcrumb-divider-flipped
पूर्वनिर्धारित $breadcrumb-divider
।