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-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" 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-+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
ເລີ່ມຕົ້ນດ້ວຍຫນຶ່ງໃນ ຕົວຢ່າງ 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 Arabic
RTL, ລະຫັດ 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 , ນີ້ແມ່ນຂ້ອນຂ້າງກົງໄປກົງມາ. ຫໍ່ @import
s ຂອງທ່ານດ້ວຍຊັ້ນ, ແລະກໍານົດກົດລະບຽບການປ່ຽນຊື່ແບບກໍານົດເອງສໍາລັບ 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 ແມ່ນກໍລະນີດຽວທີ່ຮຽກຮ້ອງໃຫ້ມີຕົວແປໃຫມ່ຂອງຕົນເອງ - ຄື - $breadcrumb-divider-flipped
ເລີ່ມຕົ້ນເປັນ $breadcrumb-divider
.