RTL

سکو ته ڪيئن ساڄي کان کاٻي متن لاءِ سپورٽ کي فعال ڪجي Bootstrap ۾ اسان جي ترتيب، اجزاء ۽ يوٽيلٽيز ۾.

هن صفحي تي

واقف ٿيو

اسان سفارش ڪريون ٿا ته Bootstrap سان واقف ٿيڻ کان پهريان اسان جي شروعاتي تعارف واري صفحي ذريعي پڙهڻ سان . هڪ دفعو توهان ان جي ذريعي هلائي ڇڏيو، پڙهڻ جاري رکو هتي RTL کي ڪيئن فعال ڪرڻ لاء.

توھان پڻ پڙھڻ چاھيو ٿا RTLCSS پروجيڪٽ تي ، جيئن اھو RTL ڏانھن اسان جي طريقي کي طاقت ڏئي ٿو.

تجرباتي خصوصيت

RTL خاصيت اڃا تائين تجرباتي آهي ۽ شايد صارف جي راء جي مطابق ترقي ڪندي. ڪجهه ڏٺو آهي يا تجويز ڪرڻ لاء بهتر آهي؟ هڪ مسئلو کوليو ، اسان توهان جي بصيرت حاصل ڪرڻ چاهيندا.

گهربل HTML

بوٽ اسٽريپ تي هلندڙ صفحن ۾ 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-+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، margin-leftاستعمال ڪريو .ms-3.

RTL سان ڪم ڪرڻ، اسان جي ماخذ Sass يا مرتب ڪيل CSS ذريعي، جيتوڻيڪ اسان جي ڊفالٽ 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 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 فائلن ۾ هر چونڊيندڙ کي اڳي ڪيو ويندو .ltr، ۽ .rtlRTL فائلن لاءِ. هاڻي توهان هڪ ئي صفحي تي ٻنهي فائلن کي استعمال ڪرڻ جي قابل ٿي رهيا آهيو، ۽ صرف هڪ .ltrيا .rtlٻئي طرف استعمال ڪرڻ لاء توهان جي اجزاء جي لفافي تي استعمال ڪريو.

کنڊ جا ڪيس ۽ ڄاڻايل حدون

جڏهن ته هي طريقو سمجھ ۾ اچي ٿو، مھرباني ڪري ھيٺين ڏانھن ڌيان ڏيو:

جڏهن سوئچنگ .ltr۽ .rtl، پڪ ڪريو ته توهان شامل ڪيو dir۽ langخاصيتون مطابق.
ٻنهي فائلن کي لوڊ ڪرڻ هڪ حقيقي ڪارڪردگي جي رڪاوٽ ٿي سگهي ٿي: ڪجهه اصلاح تي غور ڪريو، ۽ ٿي سگهي ٿو انهن فائلن مان هڪ کي غير مطابقت سان لوڊ ڪرڻ جي ڪوشش ڪريو .
نيسٽنگ اسلوب هن طريقي سان اسان جي form-validation-state()ميڪسين کي ڪم ڪرڻ کان روڪيندو جيئن ارادو ڪيو وڃي، تنهنڪري توهان کي پنهنجي طرفان ان کي ٿورو ترتيب ڏيڻ جي ضرورت آهي. ڏسو نمبر 31223 .

breadcrumb separator اهو واحد ڪيس آهي جنهن کي پنهنجي نئين برانڊ متغير جي ضرورت آهي- يعني $breadcrumb-divider-flipped-defaulting to $breadcrumb-divider.

RTL