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-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 مثالونه

زموږ د څو RTL مثالونو څخه یو سره پیل کړئ .

روش

په بوټسټراپ کې د RTL مالتړ رامینځته کولو لپاره زموږ چلند د دوه مهمو پریکړو سره راځي چې موږ څنګه زموږ CSS لیکلو او کارولو اغیزه کوو:

لومړی، موږ پریکړه وکړه چې دا د RTLCSS پروژې سره جوړ کړو. دا موږ ته د LTR څخه RTL ته د حرکت کولو په وخت کې د بدلونونو اداره کولو لپاره ځینې پیاوړي ځانګړتیاوې راکوي. دا موږ ته اجازه راکوي چې د بوټسټریپ دوه نسخې د یو کوډبیس څخه جوړ کړو.
دوهم، موږ د یو څو لارښوونو ټولګیو نوم بدل کړی ترڅو د منطقي ملکیت چلند غوره کړي. ستاسو څخه ډیری لا دمخه زموږ د فلیکس اسانتیاو څخه مننه د منطقي ملکیتونو سره اړیکه نیولې ده — دوی د سمت ملکیتونه لکه leftاو rightپه ګټه کې startځای په ځای کوي end. دا د ټولګي نومونه او ارزښتونه د LTR او RTL لپاره پرته له کوم سر څخه مناسب کوي.

د مثال په توګه، د .ml-3for پر ځای 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 جلا کونکی یوازینی قضیه ده چې خپل نوي نوي متغیر ته اړتیا لري - یعنی $breadcrumb-divider-flipped- ته defaulting $breadcrumb-divider.

RTL