RTL

فێربە چۆن پشتگیری بۆ دەقی ڕاست بۆ چەپ لە Bootstrap چالاک بکەیت لە سەرانسەری نەخشە، پێکهاتەکان و سوودمەندییەکانمان.

لەم پەیجەدا

ئاشنا بە

پێشنیار دەکەین سەرەتا ئاشنا بیت بە Bootstrap بە خوێندنەوەی لاپەڕەی ناساندنی دەستپێکردنمان . کاتێک کە تێیدا تێپەڕیت، لێرە بەردەوام بە لە خوێندنەوە بۆ چۆنیەتی چالاککردنی RTL.

هەروەها لەوانەیە بتەوێت لەسەر پڕۆژەی RTLCSS بخوێنیتەوە ، چونکە هێز دەدات بە رێبازی ئێمە بۆ RTL.

تایبەتمەندی تاقیکاری

تایبەتمەندی RTL هێشتا تاقیکارییە و بە ئەگەرێکی زۆرەوە بەپێی فیدباکەکانی بەکارهێنەر پەرەدەستێنێت. شتێکت بینیوە یان باشتربوونێکت هەیە پێشنیاری بکەیت؟ پرسێک بکەرەوە , ئێمە زۆرمان پێ خۆشە تێگەیشتنەکانتان بەدەست بهێنین.

HTML پێویستە

دوو مەرجی توند هەیە بۆ چالاککردنی RTL لە لاپەڕەکانی بەهێزکراوی Bootstrap.

dir="rtl"لەسەر <html>توخمەکە دابنێ .
تایبەتمەندییەکی گونجاو زیاد بکە lang، وەک lang="ar", لەسەر <html>توخمەکە.

لەوێشەوە پێویستە وەشانی RTL ی CSS ی ئێمە دابنێیت. بۆ نموونە، لێرەدا ستایلشیت بۆ 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 بۆ ناو Bootstrap لەگەڵ دوو بڕیاری گرنگدا دێت کە کاریگەرییان لەسەر چۆنیەتی نووسین و بەکارهێنانی CSS ـەکەمان هەیە:

سەرەتا بڕیارماندا بە پرۆژەی RTLCSS دروستی بکەین . ئەمەش چەند تایبەتمەندییەکی بەهێزمان پێدەبەخشێت بۆ بەڕێوەبردنی گۆڕانکاری و سەرپێچی لەکاتی گواستنەوە لە LTR بۆ RTL. هەروەها ڕێگەمان پێدەدات دوو وەشانی Bootstrap لە یەک کۆدبەیسەوە دروست بکەین.
دووەم: ئێمە ناوی مشتێک پۆلی ئاراستەییمان گۆڕیوە بۆ ئەوەی رێبازێکی تایبەتمەندییە لۆژیکیەکان بگرینەبەر. زۆربەی ئێوە پێشتر کارلێکتان لەگەڵ تایبەتمەندییە لۆژیکییەکان کردووە بەهۆی سوودمەندییە فلیکسەکانمانەوە-ئەوان جێگەی تایبەتمەندییەکانی ئاراستە دەگرنەوە وەک leftو rightلە بەرژەوەندی startو end. کە ناو و بەهاکانی پۆلەکان دەکاتە گونجاو بۆ LTR و RTL بەبێ هیچ سەرپێچێک.

بۆ نموونە لەبری .ml-3for margin-left، بەکاربهێنە .ms-3.

کارکردن لەگەڵ RTL، لە ڕێگەی سەرچاوەی Sass یان CSS ی کۆکراوەمانەوە، نابێت زۆر جیاواز بێت لە LTR ی پێشوەختەمان هەرچەندە.

لە سەرچاوەوە خۆکارانە بکە

کاتێک باس لە customization دەکرێت ، ڕێگەی پەسەندکراو ئەوەیە کە سوود لە گۆڕاوەکان، نەخشەکان، و میکسینەکان وەربگریت. ئەم ڕێبازە بۆ 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، کۆدی ساسەکەت بەم شێوەیە دەبێت:

$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 , ئەمە زۆر ڕاستەوخۆیە. 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 ـتدا بە .ltr, و .rtlبۆ فایلەکانی RTL پێشوەختە دەبێت. ئێستا دەتوانیت هەردوو فایلەکە لە یەک لاپەڕەدا بەکاربهێنیت، و بە سادەیی .ltrیان .rtlلەسەر پێچەرەی پێکهاتەکانت بەکاربهێنیت بۆ بەکارهێنانی ئاراستەیەک یان ئاراستەیەکی تر.

کەیسەکانی لێوار و سنووردارکردنی ناسراو

لە کاتێکدا ئەم رێبازە جێگەی تێگەیشتنە، تکایە گرنگی بەمانەی خوارەوە بدەن:

لە کاتی گۆڕینی .ltrو .rtl, دڵنیابە کە بەپێی ئەو زیاد دەکەیت dirو langتایبەتمەندیەکانت دەدەیت.
بارکردنی هەردوو پەڕگەکە دەتوانێت گەردنی تەنگێکی ڕاستەقینەی کارایی بێت: هەندێک باشترکردن لەبەرچاو بگرە ، و ڕەنگە هەوڵبدە یەکێک لەو پەڕگانە بە شێوەیەکی ناهاوسەنگ بار بکەیت .
ستایلەکانی هێلانەکردن بەم شێوەیە ڕێگری دەکات form-validation-state()لە کارکردنی میکسینەکەمان وەک مەبەست، بەم شێوەیە پێویستە کەمێک بە خۆت تویک بکەیت. سەیری #31223 بکە .

جیاکەرەوەی نانە وردکراوەکان تاکە حاڵەتە کە پێویستی بە گۆڕاوە نوێیەکەی خۆی $breadcrumb-divider-flippedهەیە- واتە - بەپێی پێشوەختە بۆ $breadcrumb-divider.

RTL