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-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 Neue WebfontLTR बाट 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 लाई धन्यवाद , यो एकदमै सरल छ। तपाइँको @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 फाइलहरूमा प्रत्येक चयनकर्ता RTL फाइलहरूको लागि .ltr, र मार्फत अघि बढाइनेछ। .rtlअब तपाइँ एउटै पृष्ठमा दुवै फाइलहरू प्रयोग गर्न सक्षम हुनुहुन्छ, र केवल प्रयोग गर्नुहोस् .ltrवा .rtlतपाइँको कम्पोनेन्ट र्यापरहरूमा एक वा अर्को दिशा प्रयोग गर्न।

किनारा केसहरू र ज्ञात सीमाहरू

जबकि यो दृष्टिकोण बुझ्न योग्य छ, कृपया निम्नमा ध्यान दिनुहोस्:

स्विच गर्दा .ltrर .rtl, निश्चित गर्नुहोस् कि तपाईंले थप्नु भएको छ dirर langतदनुसार विशेषताहरू।
दुबै फाइलहरू लोड गर्दा वास्तविक कार्यसम्पादन अवरोध हुन सक्छ: केही अप्टिमाइजेसनलाई विचार गर्नुहोस्, र हुनसक्छ ती फाइलहरू मध्ये एउटालाई एसिन्क्रोनस रूपमा लोड गर्ने प्रयास गर्नुहोस् ।
यस तरिकाले नेस्टिङ शैलीहरूले हाम्रो form-validation-state()मिक्सिनलाई उद्देश्य अनुसार काम गर्नबाट रोक्नेछ, त्यसैले तपाईंले यसलाई आफैंले अलिकति ट्वीक गर्न आवश्यक छ। हेर्नुहोस् #31223 ।

ब्रेडक्रम्ब विभाजक एक मात्र केस हो जसलाई यसको आफ्नै ब्रान्ड नयाँ चर चाहिन्छ — अर्थात् — $breadcrumb-divider-flippedपूर्वनिर्धारित $breadcrumb-divider।

RTL