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.
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 melang="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
left
meright
ka makemakestart
a meend
. ʻ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-3
ka 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 Webfont
ka LTR i Helvetica Neue Arabic
ka 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 @import
s 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 .rtl
no 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 .rtl
ma 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
.ltr
a.rtl
, e hōʻoia ʻoe e hoʻohuidir
a melang
nā ʻ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 pahu palaoa
ʻ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
.