RTL

ຮຽນຮູ້ວິທີເປີດໃຊ້ການຮອງຮັບຂໍ້ຄວາມຈາກຂວາຫາຊ້າຍໃນ Bootstrap ໃນທົ່ວໂຄງຮ່າງ, ອົງປະກອບ ແລະຜົນປະໂຫຍດຂອງພວກເຮົາ.

ໃນໜ້ານີ້

ຄຸ້ນເຄີຍ

ພວກເຮົາແນະນໍາໃຫ້ເຮັດຄວາມຄຸ້ນເຄີຍກັບ Bootstrap ທໍາອິດໂດຍການອ່ານຜ່ານ ຫນ້າການເລີ່ມຕົ້ນການແນະນໍາ ຂອງພວກເຮົາ . ເມື່ອທ່ານໄດ້ແລ່ນຜ່ານມັນ, ສືບຕໍ່ອ່ານທີ່ນີ້ສໍາລັບວິທີການເປີດໃຊ້ RTL.

ທ່ານອາດຈະຕ້ອງການອ່ານກ່ຽວກັບ ໂຄງການ RTLCSS , ຍ້ອນວ່າມັນເຮັດໃຫ້ວິທີການຂອງພວກເຮົາກັບ RTL.

ຄຸນສົມບັດການທົດລອງ

ຄຸນສົມບັດ RTL ແມ່ນຍັງ ທົດລອງ ຢູ່ ແລະອາດຈະພັດທະນາໄປຕາມຄໍາຄິດເຫັນຂອງຜູ້ໃຊ້. ໄດ້ພົບເຫັນບາງສິ່ງບາງຢ່າງຫຼືມີການປັບປຸງທີ່ຈະແນະນໍາ? ເປີດບັນຫາ , ພວກເຮົາຢາກໄດ້ຮັບຄວາມເຂົ້າໃຈຂອງທ່ານ.

HTML ທີ່ຕ້ອງການ

ມີສອງຄວາມຕ້ອງການທີ່ເຄັ່ງຄັດສໍາລັບການເປີດໃຊ້ RTL ໃນຫນ້າ Bootstrap-powered.

ຕັ້ງ dir="rtl"ຢູ່ໃນ <html>ອົງປະກອບ.
ເພີ່ມ langຄຸນລັກສະນະທີ່ເຫມາະສົມ, ເຊັ່ນ: lang="ar"ໃນ <html>ອົງປະກອບ.

ຈາກບ່ອນນັ້ນ, ທ່ານຈະຕ້ອງລວມເອົາສະບັບ RTL ຂອງ CSS ຂອງພວກເຮົາ. ຕົວຢ່າງ, ນີ້ແມ່ນ stylesheet ສໍາລັບ CSS ທີ່ລວບລວມແລະຫຍໍ້ຂອງພວກເຮົາທີ່ມີ RTL ເປີດໃຊ້:

<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 ເຂົ້າໄປໃນ Bootstrap ມາພ້ອມກັບການຕັດສິນໃຈທີ່ສໍາຄັນສອງຢ່າງທີ່ມີຜົນກະທົບຕໍ່ວິທີທີ່ພວກເຮົາຂຽນແລະໃຊ້ CSS ຂອງພວກເຮົາ:

ທໍາອິດ, ພວກເຮົາໄດ້ຕັດສິນໃຈສ້າງມັນດ້ວຍ ໂຄງການ RTLCSS . ນີ້ເຮັດໃຫ້ພວກເຮົາມີຄຸນສົມບັດທີ່ມີປະສິດທິພາບບາງຢ່າງສໍາລັບການຄຸ້ມຄອງການປ່ຽນແປງແລະ overrides ເມື່ອຍ້າຍຈາກ LTR ໄປ RTL. ມັນຍັງອະນຸຍາດໃຫ້ພວກເຮົາສ້າງສອງຮຸ່ນຂອງ Bootstrap ຈາກ codebase ດຽວ.
ອັນທີສອງ, ພວກເຮົາໄດ້ປ່ຽນຊື່ຫ້ອງຮຽນທິດທາງຈຳນວນໜຶ່ງເພື່ອນຳໃຊ້ວິທີການຄຸນສົມບັດຢ່າງມີເຫດຜົນ. ສ່ວນໃຫຍ່ຂອງທ່ານມີປະຕິສໍາພັນກັບຄຸນສົມບັດຢ່າງມີເຫດຜົນແລ້ວຂໍຂອບໃຈກັບ flex utilities ຂອງພວກເຮົາ - ເຂົາເຈົ້າທົດແທນຄຸນສົມບັດທິດທາງຄື leftແລະ rightໃນຄວາມໂປດປານ startແລະ end. ທີ່ເຮັດໃຫ້ຊື່ຊັ້ນຮຽນແລະຄ່າທີ່ເຫມາະສົມກັບ LTR ແລະ RTL ໂດຍບໍ່ມີຄ່າໃຊ້ຈ່າຍໃດໆ.

ຕົວຢ່າງ, ແທນທີ່ຈະ .ml-3ໃຊ້ margin-left, ໃຊ້ .ms-3.

ການເຮັດວຽກກັບ RTL, ຜ່ານ Sass ແຫຼ່ງຂອງພວກເຮົາຫຼືລວບລວມ CSS, ບໍ່ຄວນແຕກຕ່າງຈາກ LTR ເລີ່ມຕົ້ນຂອງພວກເຮົາ.

ປັບແຕ່ງຈາກແຫຼ່ງ

ເມື່ອເວົ້າເຖິງການ ປັບແຕ່ງ , ວິທີທີ່ມັກແມ່ນການໃຊ້ປະໂຫຍດຈາກຕົວແປ, ແຜນທີ່, ແລະ mixins. ວິທີການນີ້ເຮັດວຽກຄືກັນສໍາລັບ RTL, ເຖິງແມ່ນວ່າມັນຖືກປຸງແຕ່ງຈາກໄຟລ໌ທີ່ຖືກລວບລວມ, ຂອບໃຈກັບ ວິທີການເຮັດວຽກຂອງ RTLCSS .

ຄ່າ RTL ແບບກຳນົດເອງ

ການນໍາໃຊ້ ຄໍາສັ່ງມູນຄ່າ RTLCSS , ທ່ານສາມາດເຮັດໃຫ້ຜົນຜະລິດຕົວແປເປັນມູນຄ່າທີ່ແຕກຕ່າງກັນສໍາລັບ RTL. ຕົວຢ່າງ, ເພື່ອຫຼຸດລົງນ້ໍາຫນັກ $font-weight-boldຕະຫຼອດ codebase, ທ່ານອາດຈະໃຊ້ /*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;
}

stack ຟອນທາງເລືອກ

ໃນກໍລະນີທີ່ທ່ານກໍາລັງໃຊ້ຟອນແບບກໍານົດເອງ, ຈົ່ງຈື່ໄວ້ວ່າບໍ່ແມ່ນຕົວອັກສອນທັງຫມົດທີ່ສະຫນັບສະຫນູນຕົວອັກສອນທີ່ບໍ່ແມ່ນພາສາລາຕິນ. ເພື່ອປ່ຽນຈາກ Pan-European ເປັນຄອບຄົວ Arabic, ທ່ານອາດຈະຈໍາເປັນຕ້ອງໃຊ້ /*rtl:insert: {value}*/ໃນ stack font ຂອງທ່ານເພື່ອດັດແປງຊື່ຂອງຄອບຄົວຕົວອັກສອນ.

ຕົວຢ່າງ, ເພື່ອປ່ຽນຈາກ 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, ແລະ .rtlສໍາລັບໄຟລ໌ RTL. ໃນປັດຈຸບັນທ່ານສາມາດນໍາໃຊ້ທັງສອງໄຟລ໌ຢູ່ໃນຫນ້າດຽວກັນ, ແລະພຽງແຕ່ນໍາໃຊ້ .ltrຫຼື .rtlໃສ່ wrappers ອົງປະກອບຂອງທ່ານເພື່ອນໍາໃຊ້ຫນຶ່ງຫຼືທິດທາງອື່ນ.

ກໍລະນີຂອບແລະຂໍ້ຈໍາກັດທີ່ຮູ້ຈັກ

ໃນຂະນະທີ່ວິທີການນີ້ແມ່ນເຂົ້າໃຈໄດ້, ກະລຸນາເອົາໃຈໃສ່ຕໍ່ໄປນີ້:

ເມື່ອປ່ຽນ .ltrແລະ .rtl, ໃຫ້ແນ່ໃຈວ່າທ່ານເພີ່ມ dirແລະ langຄຸນລັກສະນະຕາມຄວາມເຫມາະສົມ.
ການໂຫຼດທັງສອງໄຟລ໌ສາມາດເປັນຂໍ້ບົກຜ່ອງດ້ານການປະຕິບັດຕົວຈິງ: ພິຈາລະນາການ ເພີ່ມປະສິດທິພາບ ບາງຢ່າງ ແລະບາງທີອາດຈະພະຍາຍາມ ໂຫຼດໄຟລ໌ເຫຼົ່ານັ້ນແບບບໍ່ກົງກັນ .
ການຈັດຮູບແບບຂອງຮັງດ້ວຍວິທີນີ້ຈະປ້ອງກັນບໍ່ໃຫ້ form-validation-state()mixin ຂອງພວກເຮົາເຮັດວຽກຕາມທີ່ຕັ້ງໃຈໄວ້, ດັ່ງນັ້ນທ່ານຕ້ອງການປັບມັນເລັກນ້ອຍດ້ວຍຕົວທ່ານເອງ. ເບິ່ງ #31223 .

ຕົວ ແຍກ breadcrumb ແມ່ນກໍລະນີດຽວທີ່ຮຽກຮ້ອງໃຫ້ມີຕົວແປໃຫມ່ຂອງຕົນເອງ - ຄື - $breadcrumb-divider-flippedເລີ່ມຕົ້ນເປັນ $breadcrumb-divider.

RTL