RTL

E aʻo pehea e hiki ai i ke kākoʻo no ka kikokikona hema-a-hema ma Bootstrap ma ko mākou hoʻolālā, nā ʻāpana, a me nā pono hana.

Ma kēia ʻaoʻao

E kamaʻāina

Paipai mākou e kamaʻāina mua iā Bootstrap ma ka heluhelu ʻana i kā mākou ʻaoʻao Hoʻomaka Hoʻomaka . Ke holo ʻoe ma ia mea, e hoʻomau i ka heluhelu ʻana ma aneʻi no ka hiki ʻana iā RTL.

Makemake paha ʻoe e heluhelu e pili ana i ka papahana RTLCSS , no ka mea e hoʻoikaika i kā mākou hoʻokokoke ʻana iā RTL.

Hiʻona hoʻokolohua

Ke hoʻokolohua mau nei ka hiʻohiʻona RTL a e ulu ana paha e like me ka manaʻo o ka mea hoʻohana. Ua ʻike ʻoe i kahi mea a i ʻole kahi hoʻomaikaʻi e manaʻo ai? E wehe i kahi pilikia , makemake mākou e ʻike i kāu ʻike.

Pono HTML

ʻElua mau koi koʻikoʻi no ka ʻae ʻana iā RTL ma nā ʻaoʻao Bootstrap-powered.

E hoʻonoho dir="rtl"i ka <html>mea.
Hoʻohui i kahi ʻano kūpono lang, e like me lang="ar", ma ka <html>mea.

Mai laila mai, pono ʻoe e hoʻokomo i kahi mana RTL o kā mākou CSS. Eia kekahi laʻana, eia ka stylesheet no kā mākou CSS i hōʻuluʻulu ʻia a hoʻemi ʻia me ka RTL i hoʻohana ʻia:

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

Hoʻopalapala hoʻomaka

Hiki iā ʻoe ke ʻike i nā koi i luna i hōʻike ʻia ma kēia ʻano hoʻololi hoʻomaka 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>

Nā laʻana RTL

E hoʻomaka me kekahi o kā mākou mau hiʻohiʻona RTL .

Hoʻokokoke

ʻO kā mākou ala e kūkulu ai i ke kākoʻo RTL i Bootstrap e hele mai me ʻelua mau hoʻoholo koʻikoʻi e pili ana i kā mākou kākau ʻana a hoʻohana i kā mākou CSS:

ʻO ka mea mua, ua hoʻoholo mākou e kūkulu me ka papahana RTLCSS . Hāʻawi kēia iā mākou i kekahi mau hiʻohiʻona ikaika no ka hoʻokele ʻana i nā loli a me nā overrides ke neʻe mai LTR a i RTL. Hiki iā mākou ke kūkulu i ʻelua mana o Bootstrap mai hoʻokahi codebase.
ʻO ka lua, ua kapa hou mākou i ka lima o nā papa kuhikuhi no ka hoʻohana ʻana i kahi ala kūpono. ʻO ka hapa nui o ʻoukou ua launa pū me nā waiwai kūpono e hoʻomaikaʻi i kā mākou mau pono hana maʻalahi - hoʻololi lākou i nā waiwai kuhikuhi e like leftme rightka makemake starta me end. ʻO ia ka mea e kūpono ai nā inoa papa a me nā waiwai no LTR a me RTL me ka ʻole o ke poʻo.

No ka laʻana, ma kahi o .ml-3ka margin-left, hoʻohana .ms-3.

ʻO ka hana pū me RTL, ma o kā mākou kumu Sass a i ʻole CSS i hōʻuluʻulu ʻia, ʻaʻole pono e ʻokoʻa loa mai kā mākou LTR paʻamau.

Hoʻopilikino mai ke kumu

I ka wā e pili ana i ka hana maʻamau , ʻo ke ala makemake ʻia e hoʻohana pono i nā ʻano like ʻole, nā palapala ʻāina, a me nā mixins. Hoʻohana like kēia ala no RTL, ʻoiai inā i hana ʻia ma hope o nā faila i hōʻuluʻulu ʻia, mahalo i ka hana ʻana o RTLCSS .

Nā waiwai RTL maʻamau

Me ka hoʻohana ʻana i nā kuhikuhi waiwai RTLCSS , hiki iā ʻoe ke hana i kahi hoʻololi hoʻololi i waiwai ʻē aʻe no RTL. No ka laʻana, hiki iā $font-weight-boldʻoe ke hoʻohana i ka /*rtl: {value}*/syntax:

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

ʻO ka mea e hoʻopuka i kēia mau mea no kā mākou CSS paʻamau a me RTL CSS:

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

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

Puʻupuʻu kikokikona ʻē aʻe

Inā ʻoe e hoʻohana nei i kahi paʻi maʻamau, e makaʻala ʻaʻole kākoʻo nā momi a pau i ka pīʻāpā Latin ʻole. No ka hoʻololi ʻana mai ka ʻohana Pan-European a i ka ʻohana ʻArabia, pono paha ʻoe e hoʻohana /*rtl:insert: {value}*/i loko o kāu pūʻulu font e hoʻololi i nā inoa o nā ʻohana font.

No ka laʻana, no ka hoʻololi ʻana mai Helvetica Neue Webfontka LTR i Helvetica Neue Arabicka RTL, ua like kāu code Sass penei:

$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 a me RTL i ka manawa like

Pono ʻo LTR a me RTL ma ka ʻaoʻao hoʻokahi? Mahalo iā RTLCSS String Maps , maʻalahi kēia. E kāʻei i kāu @imports me kahi papa, a hoʻonoho i ka lula inoa maʻamau no 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*/

Ma hope o ka holo ʻana iā Sass a laila RTLCSS, e hoʻomākaukau ʻia kēlā me kēia mea koho i kāu faila CSS e .ltr, a .rtlno nā faila RTL. I kēia manawa hiki iā ʻoe ke hoʻohana i nā faila ʻelua ma ka ʻaoʻao hoʻokahi, a e hoʻohana wale a i .ltrʻole .rtlma kāu mau ʻāpana ʻāpana e hoʻohana ai i hoʻokahi a i ʻole ka ʻaoʻao ʻē aʻe.

Nā hihia Edge a me nā palena i ʻike ʻia

ʻOiai hiki ke hoʻomaopopo ʻia kēia ala, e ʻoluʻolu e nānā i kēia:

Ke hoʻololi .ltra .rtl, e hōʻoia ʻoe e hoʻohui dira me langnā ʻano like.
ʻO ka hoʻouka ʻana i nā faila ʻelua hiki ke lilo i bottleneck hana maoli: e noʻonoʻo i ka hoʻonui ʻana , a e hoʻāʻo paha e hoʻouka i kekahi o ia mau faila asynchronously .
ʻO nā ʻano nesting i kēia ala e pale aku i kā mākou form-validation-state()mixin mai ka hana ʻana e like me ka mea i manaʻo ʻia, no laila e koi ʻoe e hoʻololi iki iā ʻoe iho. E nana #31223 .

ʻO ka mea hoʻokaʻawale palaoa ʻo ia wale nō ka hihia e koi ana i kāna ʻano hoʻololi hou - ʻo ia hoʻi $breadcrumb-divider-flipped- hoʻololi i $breadcrumb-divider.

RTL