RTL

Phunzirani momwe mungathandizire kuthandizira zolemba kuchokera kumanja kupita kumanzere mu Bootstrap pamasanjidwe athu, zida, ndi zofunikira.

Patsamba ili

Dziwani bwino

Tikukulimbikitsani kuti mudziwe zambiri za Bootstrap powerenga patsamba lathu loyambira . Mukamaliza, pitilizani kuwerenga apa kuti muyambitse bwanji RTL.

Mwinanso mungafune kuwerenga pulojekiti ya RTLCSS , chifukwa imathandizira njira yathu ya RTL.

Zoyeserera

Mawonekedwe a RTL akadali oyesera ndipo mwina asintha malinga ndi mayankho a ogwiritsa ntchito. Kodi mwawonapo kanthu kapena muli ndi zomwe munganene? Tsegulani nkhani , tikufuna kudziwa zambiri.

HTML yofunika

Pali zofunikira ziwiri zolimba kuti mutsegule RTL mumasamba oyendetsedwa ndi Bootstrap.

Khalani dir="rtl"pa <html>chinthu.
Onjezani chinthu choyenera lang, monga lang="ar", pa <html>chinthucho.

Kuchokera pamenepo, muyenera kuphatikiza mtundu wa RTL wa CSS yathu. Mwachitsanzo, nali masitayelo a CSS yathu yopangidwa ndi minified yokhala ndi RTL yoyatsidwa:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" crossorigin="anonymous">

template yoyambira

Mutha kuwona zomwe zili pamwambapa zomwe zikuwonetsedwa mu template yosinthidwa ya 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 zitsanzo

Yambani ndi chimodzi mwa zitsanzo zathu zingapo za RTL .

Njira

Njira yathu yopangira chithandizo cha RTL mu Bootstrap imabwera ndi zisankho ziwiri zofunika zomwe zimakhudza momwe timalembera ndikugwiritsa ntchito CSS yathu:

Choyamba, tinaganiza zomanga ndi polojekiti ya RTLCSS . Izi zimatipatsa zida zamphamvu zowongolera zosintha ndikuzichotsa mukamachoka ku LTR kupita ku RTL. Imatithandizanso kupanga mitundu iwiri ya Bootstrap kuchokera ku codebase imodzi.
Chachiwiri, tasinthanso magulu angapo owongolera kuti agwiritse ntchito njira zomveka. Ambiri ainu mudalumikizana kale ndi zinthu zomveka chifukwa cha zida zathu zosinthika - zimasintha mawonekedwe amayendedwe monga leftndikuthandizira rightndi start. endIzi zimapangitsa kuti mayina amkalasi ndi zikhalidwe zikhale zoyenera kwa LTR ndi RTL popanda kuwongolera kulikonse.

Mwachitsanzo, m'malo mwa .ml-3, margin-leftgwiritsani ntchito .ms-3.

Kugwira ntchito ndi RTL, kudzera mu gwero lathu la Sass kapena CSS yophatikizidwa, sikuyenera kukhala kosiyana kwambiri ndi LTR yathu yokhazikika.

Sinthani Mwamakonda Anu kuchokera kochokera

Zikafika pakusintha mwamakonda , njira yomwe mumakonda ndikutenga mwayi pazosintha, mamapu, ndi zosakaniza. Njirayi imagwira ntchito chimodzimodzi kwa RTL, ngakhale itasinthidwa kuchokera pamafayilo ophatikizidwa, chifukwa cha momwe RTLCSS imagwirira ntchito .

Mtengo wa RTL

Pogwiritsa ntchito RTLCSS value Directives , mutha kupanga zosintha kukhala mtengo wosiyana wa RTL. Mwachitsanzo, kuti muchepetse kulemera kwa $font-weight-boldcodebase yonse, mutha kugwiritsa ntchito /*rtl: {value}*/mawu akuti:

$font-weight-bold: 700 #{/* rtl:600 */} !default;

Zomwe zingatulutse ku zotsatirazi kwa CSS yathu yokhazikika ndi RTL CSS:

/* bootstrap.css */
dt {
  font-weight: 700 /* rtl:600 */;
}

/* bootstrap.rtl.css */
dt {
  font-weight: 600;
}

Mitundu ina ya zilembo

Ngati mukugwiritsa ntchito zilembo zachilatini, dziwani kuti si zilembo zonse zomwe zimagwirizana ndi zilembo zomwe si zachilatini. Kuti musinthe kuchoka ku Pan-European kupita kubanja lachiarabu, mungafunike kugwiritsa ntchito /*rtl:insert: {value}*/font yanu kuti musinthe mayina amitundu yamafonti.

Mwachitsanzo, kusintha kuchokera Helvetica Neue Webfontku LTR kupita Helvetica Neue Arabicku RTL, nambala yanu ya Sass imawoneka motere:

$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 ndi RTL nthawi yomweyo

Mukufuna zonse za LTR ndi RTL patsamba lomwelo? Chifukwa cha RTLCSS String Maps , izi ndizowongoka kwambiri. Manga @imports anu ndi kalasi, ndikukhazikitsa lamulo lakusintha dzina la 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*/

Pambuyo kuthamanga Sass ndiye RTLCSS, aliyense kusankha mu CSS owona adzakhala prepended ndi .ltr, ndi .rtlRTL owona. Tsopano mutha kugwiritsa ntchito mafayilo onse patsamba lomwelo, ndikungogwiritsa ntchito .ltrkapena .rtlpazigawo zanu kuti mugwiritse ntchito njira imodzi kapena ina.

Milandu ya m'mphepete ndi malire odziwika

Ngakhale njira iyi ndiyomveka, chonde samalani izi:

Mukasintha .ltrndi .rtl, onetsetsani kuti mwawonjezera dirndikuwonetsa langmolingana.
Kutsegula mafayilo onsewa kumatha kukhala vuto lenileni: ganizirani kukhathamiritsa , ndipo mwina yesani kutsitsa imodzi mwamafayilowo mosasinthasintha .
Masitayilo a nesting motere alepheretsa form-validation-state()mixin yathu kuti isagwire ntchito monga momwe timafunira, chifukwa chake imafunika kuti musinthe nokha. Onani #31223 .

Cholekanitsa mkate ndiye vuto lokhalo lomwe limafunikira mtundu wake watsopano - womwe ndi $breadcrumb-divider-flipped-kusasintha mpaka $breadcrumb-divider.

RTL