RTL

ကျွန်ုပ်တို့၏ အပြင်အဆင်၊ အစိတ်အပိုင်းများနှင့် အသုံးအဆောင်များတစ်လျှောက် Bootstrap တွင် ညာမှလက်ဝဲစာသားအတွက် ပံ့ပိုးမှုဖွင့်နည်းကို လေ့လာပါ။

ဤစာမျက်နှာတွင်

ရင်းနှီးအောင်လုပ်ပါ။

ကျွန်ုပ်တို့၏ စတင်မိတ်ဆက်ခြင်းစာမျက်နှာ ကိုဖတ်ရှုခြင်းဖြင့် ဦးစွာ Bootstrap နှင့် ရင်းနှီးစေရန် အကြံပြုအပ်ပါသည် ။ ၎င်းကို သင်ဖြတ်သန်းပြီးသည်နှင့် RTL ကိုဖွင့်နည်းကို ဤနေရာတွင် ဆက်လက်ဖတ်ရှုပါ။

၎င်းသည် ကျွန်ုပ်တို့၏ RTL ချဉ်းကပ်မှုကို အားကောင်းစေသောကြောင့် RTLCSS ပရောဂျက် ကိုလည်း သင်ဖတ်ရှုလိုပေမည် ။

စမ်းသပ်မှုအင်္ဂါရပ်

RTL အင်္ဂါရပ်သည် စမ်းသပ်ဆဲ ဖြစ်ပြီး သုံးစွဲသူများ၏ အကြံပြုချက်အရ တိုးတက်မှု ဖြစ်နိုင်သည်။ တစ်ခုခုကို တွေ့လိုက်ရသည် သို့မဟုတ် အကြံပြုရန် တိုးတက်မှုရှိပါသလား။ ပြဿနာတစ်ခုကို ဖွင့်ပါ ၊ သင့်အသိဥာဏ်ကို ရယူလိုပါသည်။

လိုအပ်သော HTML

Bootstrap စနစ်သုံး စာမျက်နှာများတွင် 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 ဥပမာ များစွာထဲမှ တစ်ခုကို စတင်လိုက်ပါ ။

ရေးပါတယ်။

Bootstrap တွင် RTL ပံ့ပိုးကူညီမှုတည်ဆောက်ရန် ကျွန်ုပ်တို့၏ချဉ်းကပ်ပုံသည် ကျွန်ုပ်တို့၏ CSS ကို မည်သို့ရေးသားပြီးအသုံးပြုပုံအပေါ် သက်ရောက်မှုရှိသော အရေးကြီးသောဆုံးဖြတ်ချက်နှစ်ခုပါရှိသည်-

ပထမဦးစွာ RTLCSS ပရောဂျက် ဖြင့် တည်ဆောက်ရန် ဆုံးဖြတ်ခဲ့သည် ။ ၎င်းသည် ကျွန်ုပ်တို့အား LTR မှ RTL သို့ပြောင်းသည့်အခါ အပြောင်းအလဲများနှင့် အစားထိုးမှုများကို စီမံရန် အစွမ်းထက်သောအင်္ဂါရပ်အချို့ကို ပေးသည်။ ၎င်းသည် ကျွန်ုပ်တို့အား codebase တစ်ခုမှ Bootstrap ဗားရှင်းနှစ်ခုကို တည်ဆောက်နိုင်စေပါသည်။
ဒုတိယ၊ ကျွန်ုပ်တို့သည် ယုတ္တိဗေဒဂုဏ်သတ္တိများ ချဉ်းကပ်မှုကို လက်ခံရန်အတွက် လက်တစ်ဆုပ်စာ လမ်းညွှန်အတန်းများကို အမည်ပြောင်းထားပါသည်။ သင်အများစုသည် ကျွန်ုပ်တို့၏ flex utilities များကြောင့် ယုတ္တိဗေဒဂုဏ်သတ္တိများနှင့် အပြန်အလှန်အကျိုးသက်ရောက်ပြီးဖြစ်သည်—၎င်းတို့သည် ဦးတည်ချက်ဂုဏ်သတ္တိများ leftကို rightသဘောကျနှစ်သက်၍ startနှင့် end. ၎င်းသည် အတန်းအမည်များနှင့် တန်ဖိုးများကို LTR နှင့် RTL အတွက် သင့်လျော်မှုမရှိစေပါ။

ဥပမာအားဖြင့်၊ အစား .ml-3၊ margin-leftအသုံးပြု .ms-3ပါ။

ကျွန်ုပ်တို့၏အရင်းအမြစ် Sass သို့မဟုတ် စုစည်းထားသော CSS မှတဆင့် RTL နှင့်အလုပ်လုပ်ခြင်းသည် ကျွန်ုပ်တို့၏မူလ LTR နှင့် များစွာကွာခြားမည်မဟုတ်ပေ။

အရင်းအမြစ်မှ စိတ်ကြိုက်လုပ်ပါ။

စိတ်ကြိုက်ပြင်ဆင်ခြင်း နှင့် ပတ်သက်၍ ဦးစားပေးနည်းလမ်းမှာ ကိန်းရှင်များ၊ မြေပုံများနှင့် ရောနှောခြင်းများကို အခွင့်ကောင်းယူရန်ဖြစ်သည်။ ဤနည်းလမ်းသည် RTLCSS အလုပ်လုပ်ပုံ ကြောင့်၊ စုစည်းထားသောဖိုင်များမှ အပြီးလုပ်ဆောင်ခြင်းဖြစ်လျှင်ပင် RTL အတွက် အလားတူလုပ်ဆောင်သည် ။

စိတ်ကြိုက် RTL တန်ဖိုးများ

RTLCSS တန်ဖိုး ညွှန်ကြားချက်များကို အသုံးပြု၍ သင်သည် RTL အတွက် မတူညီသော တန်ဖိုးတစ်ခု ပြောင်းလဲနိုင်သော အထွက်ကို ပြုလုပ်နိုင်သည်။ ဥပမာအားဖြင့်၊ $font-weight-boldcodebase တစ်လျှောက်လုံးအတွက် အလေးချိန်ကို လျှော့ချရန်၊ သင်သည် /*rtl: {value}*/syntax ကို သုံးနိုင်သည်-

$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;
}

အစားထိုးဖောင့်အတွဲ

သင်စိတ်ကြိုက်ဖောင့်ကိုအသုံးပြုနေသည့်ကိစ္စတွင်၊ ဖောင့်အားလုံးသည် လက်တင်မဟုတ်သောအက္ခရာကို ပံ့ပိုးမည်မဟုတ်ကြောင်း သတိပြုပါ။ Pan-European မှ အာရဗီမိသားစုသို့ ပြောင်းရန် /*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 ကို run ပြီးနောက်၊ သင်၏ CSS ဖိုင်များတွင် ရွေးချယ်မှုတစ်ခုစီကို .ltrနှင့် .rtlRTL ဖိုင်များအတွက် ကြိုတင်ပြင်ဆင်ထားမည်ဖြစ်သည်။ ယခု သင်သည် တစ်မျက်နှာတည်းရှိ ဖိုင်နှစ်ခုလုံးကို အသုံးပြုနိုင်ပြီး တစ်ခုတည်း သို့မဟုတ် အခြားဦးတည်ချက်ကို အသုံးပြုရန် သင်၏ အစိတ်အပိုင်းများထုပ်ပိုးခြင်းများကို ရိုးရိုးရှင်းရှင်း .ltrသို့မဟုတ် အသုံးပြုနိုင်သည်။.rtl

အစွန်းအထင်းကိစ္စများနှင့် ကန့်သတ်ချက်များကို သိရှိသည်။

ဤနည်းလမ်းကို နားလည်နိုင်သော်လည်း၊ အောက်ပါတို့ကို ဂရုပြုပါ။

ကူးပြောင်းသည့်အခါတွင် ၊ သင်ထည့် သွင်းပြီး ရည်ညွှန်းချက်များနှင့်အညီ .ltrသေချာ ပါစေ။.rtldirlang
ဖိုင်နှစ်ခုစလုံးကို တင်ခြင်းသည် တကယ့်စွမ်းဆောင်ရည်ကို အနှောင့်အယှက်ဖြစ်စေနိုင်သည်- အချို့သော optimization ကို စဉ်းစားပြီး ထိုဖိုင်များထဲမှ တစ်ခုကို ချိန်ကိုက်၍ အချိန်မရွေး တင်ရန် ကြိုးစား နိုင်ပါသည်။
ဤနည်းဖြင့် Nesting စတိုင်များသည် form-validation-state()ကျွန်ုပ်တို့၏ mixin ကို ရည်ရွယ်ထားသည့်အတိုင်း လုပ်ဆောင်ခြင်းမှ တားဆီးနိုင်သောကြောင့် ၎င်းကို သင်ကိုယ်တိုင် နည်းနည်းပြင်ဆင်ရန် လိုအပ်ပါသည်။ #31223 ကိုကြည့်ပါ ။

breadcrumb ခွဲခြား သည့်ကိရိယာ သည် ၎င်း၏ကိုယ်ပိုင်အမှတ်တံဆိပ်အသစ်ပြောင်းလဲနိုင်မှုကို လိုအပ်သည့်တစ်ခုတည်းသောကိစ္စဖြစ်သည်— ဆိုလိုသည်မှာ — $breadcrumb-divider-flippeddefaulting to $breadcrumb-divider.

RTL