RTL
Aprann kijan pou pèmèt sipò pou tèks adwat-a-gòch nan Bootstrap atravè layout, konpozan ak sèvis piblik nou yo.
Jwenn abitye
Nou rekòmande pou w abitye ak Bootstrap anvan lè w li paj Entwodiksyon pou Kòmanse . Yon fwa ou te kouri atravè li, kontinye li isit la pou kòman yo pèmèt RTL.
Ou ka vle tou li sou pwojè RTLCSS la , kòm li pouvwa apwòch nou an nan RTL.
Karakteristik eksperimantal
Karakteristik RTL la toujou eksperimantal epi li pral pwobableman evolye dapre fidbak itilizatè yo. Ou ta wè yon bagay oswa ou gen yon amelyorasyon sijere? Louvri yon pwoblèm , nou ta renmen jwenn lide ou.
HTML obligatwa
Gen de kondisyon strik pou pèmèt RTL nan paj Bootstrap ki mache ak pisans.
- Mete
dir="rtl"
sou<html>
eleman an. lang
Ajoute yon atribi apwopriye , tankoulang="ar"
, sou<html>
eleman an.
Soti nan la, ou pral bezwen mete yon vèsyon RTL nan CSS nou an. Pou egzanp, isit la nan stylesheet pou CSS konpile ak minified nou an ak RTL pèmèt:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" crossorigin="anonymous">
Starter modèl
Ou ka wè kondisyon ki anwo yo reflete nan modèl RTL pou kòmanse modifye sa a.
<!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>
Egzanp RTL
Kòmanse ak youn nan plizyè egzanp RTL nou yo .
Apwòch
Apwòch nou pou konstwi sipò RTL nan Bootstrap vini ak de desizyon enpòtan ki gen enpak sou fason nou ekri ak itilize CSS nou an:
-
Premyèman, nou te deside bati li ak pwojè RTLCSS la. Sa a ban nou kèk karakteristik pwisan pou jere chanjman ak overrides lè w ap deplase soti nan LTR nan RTL. Li pèmèt nou tou bati de vèsyon Bootstrap soti nan yon baz kod.
-
Dezyèmman, nou te chanje non yon ti ponyen nan klas direksyon yo adopte yon apwòch pwopriyete lojik. Pifò nan nou te deja kominike ak pwopriyete lojik gras a sèvis piblik flex nou yo-yo ranplase pwopriyete direksyon tankou
left
akright
an favèstart
akend
. Sa fè non klas yo ak valè yo apwopriye pou LTR ak RTL san okenn anlè.
Pa egzanp, olye pou yo .ml-3
pou margin-left
, sèvi ak .ms-3
.
Travay ak RTL, atravè sous Sass nou an oswa konpile CSS, pa ta dwe anpil diferan de LTR default nou an.
Customize soti nan sous
Lè li rive personnalisation , fason pi pito a se pran avantaj de varyab, kat, ak mixin. Apwòch sa a ap travay menm jan an pou RTL, menm si li nan post-trete nan dosye yo konpile, gras a ki jan RTLCSS travay .
Custom RTL valè
Sèvi ak direktiv valè RTLCSS , ou ka fè yon pwodiksyon varyab yon valè diferan pou RTL. Pou egzanp, pou diminye pwa $font-weight-bold
nan tout kodbaz la, ou ka itilize /*rtl: {value}*/
sentaks la:
$font-weight-bold: 700 #{/* rtl:600 */} !default;
Ki ta bay sa ki annapre yo pou CSS default ak RTL CSS nou an:
/* bootstrap.css */
dt {
font-weight: 700 /* rtl:600 */;
}
/* bootstrap.rtl.css */
dt {
font-weight: 600;
}
Pile font altènatif
Nan ka w ap itilize yon polis koutim, ou dwe konnen ke se pa tout polis ki sipòte alfabè ki pa Latin nan. Pou chanje soti nan fanmi Pan-Ewopeyen an Arab, ou ka bezwen itilize /*rtl:insert: {value}*/
nan pil font ou a modifye non yo nan fanmi polis yo.
Pou egzanp, pou chanje soti nan Helvetica Neue Webfont
pou LTR nan Helvetica Neue Arabic
pou RTL, kòd Sass ou gade tankou sa a:
$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 ak RTL an menm tan
Bezwen tou de LTR ak RTL sou menm paj la? Mèsi a RTLCSS String Maps , sa a se trè senp. Anvlope @import
s ou yo ak yon klas, epi mete yon règ chanje non koutim pou 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*/
Apre w fin kouri Sass ak RTLCSS, chak seleksyon nan fichye CSS ou yo pral ajoute .ltr
, epi .rtl
pou fichye RTL yo. Koulye a, ou kapab sèvi ak tou de dosye sou menm paj la, epi tou senpleman itilize .ltr
oswa .rtl
sou anbalaj konpozan ou yo pou itilize youn oswa lòt direksyon.
Ka Edge ak limit li te ye
Pandan ke apwòch sa a se konprann, tanpri peye atansyon sou bagay sa yo:
- Lè chanje
.ltr
ak.rtl
, asire w ke ou ajoutedir
aklang
atribi kòmsadwa. - Chaje tou de fichye yo kapab yon vrè pwoblèm pèfòmans: konsidere kèk optimize , e petèt eseye chaje youn nan fichye sa yo asynchrone .
- Styles nidifikasyon fason sa a ap anpeche
form-validation-state()
mixin nou an soti nan travay jan sa vle di, kidonk mande pou ou ajiste li yon ti jan pou kont ou. Gade #31223 .
Ka a pen
Separatè pen an se sèl ka ki mande pwòp mak nouvo varyab li yo - sètadi $breadcrumb-divider-flipped
- default nan $breadcrumb-divider
.