RTL
Mësoni se si të aktivizoni mbështetjen për tekstin nga e djathta në të majtë në Bootstrap në paraqitjen, komponentët dhe shërbimet tona.
Njihuni
Ne ju rekomandojmë që së pari të njiheni me Bootstrap duke lexuar faqen tonë të hyrjes për të filluar . Pasi ta keni kaluar, vazhdoni të lexoni këtu se si të aktivizoni RTL.
Ju gjithashtu mund të dëshironi të lexoni për projektin RTLCSS , pasi ai fuqizon qasjen tonë ndaj RTL.
Veçori eksperimentale
Veçoria RTL është ende eksperimentale dhe ndoshta do të evoluojë sipas reagimeve të përdoruesve. Vërehet diçka apo keni ndonjë përmirësim për të sugjeruar? Hap një çështje , do të donim të merrnim njohuritë tuaja.
HTML e kërkuar
Ekzistojnë dy kërkesa strikte për aktivizimin e RTL në faqet e fuqizuara nga Bootstrap.
- Vendoseni
dir="rtl"
në<html>
element. - Shtoni një
lang
atribut të përshtatshëm, silang="ar"
, në<html>
element.
Nga atje, do t'ju duhet të përfshini një version RTL të CSS tonë. Për shembull, këtu është fleta e stilit për CSS-në tonë të përpiluar dhe të minuar me RTL të aktivizuar:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">
Modeli fillestar
Ju mund të shihni kërkesat e mësipërme të pasqyruara në këtë shabllon fillestar të modifikuar 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>
Shembuj RTL
Filloni me një nga disa shembujt tanë RTL .
Qasje
Qasja jonë për ndërtimin e mbështetjes RTL në Bootstrap vjen me dy vendime të rëndësishme që ndikojnë në mënyrën se si ne shkruajmë dhe përdorim CSS-në tonë:
-
Së pari, vendosëm ta ndërtonim me projektin RTLCSS . Kjo na jep disa veçori të fuqishme për menaxhimin e ndryshimeve dhe anulimeve kur lëvizim nga LTR në RTL. Gjithashtu na lejon të ndërtojmë dy versione të Bootstrap nga një bazë kodi.
-
Së dyti, ne kemi riemërtuar një pjesë të vogël të klasave të drejtimit për të adoptuar një qasje të vetive logjike. Shumica prej jush kanë ndërvepruar tashmë me vetitë logjike falë shërbimeve tona flex—ato zëvendësojnë vetitë e drejtimit si
left
dheright
në favorstart
dheend
. Kjo i bën emrat dhe vlerat e klasave të përshtatshme për LTR dhe RTL pa asnjë shpenzim.
Për shembull, në vend të .ml-3
për margin-left
, përdorni .ms-3
.
Megjithatë, puna me RTL, përmes Sass-it tonë burimor ose CSS-së së përpiluar, nuk duhet të jetë shumë e ndryshme nga LTR-ja jonë e paracaktuar.
Personalizojeni nga burimi
Kur bëhet fjalë për personalizimin , mënyra e preferuar është të përfitoni nga variablat, hartat dhe përzierjet. Kjo qasje funksionon njësoj për RTL, edhe nëse është e përpunuar pas nga skedarët e përpiluar, falë mënyrës se si funksionon RTLCSS .
Vlerat e personalizuara RTL
Duke përdorur direktivat e vlerave RTLCSS , mund të bëni një dalje variable një vlerë të ndryshme për RTL. Për shembull, për të ulur peshën për $font-weight-bold
të gjithë bazën e kodeve, mund të përdorni /*rtl: {value}*/
sintaksën:
$font-weight-bold: 700 #{/* rtl:600 */} !default;
E cila do të jepte si më poshtë për CSS-në tonë të paracaktuar dhe RTL CSS:
/* bootstrap.css */
dt {
font-weight: 700 /* rtl:600 */;
}
/* bootstrap.rtl.css */
dt {
font-weight: 600;
}
Stack alternativ i shkronjave
Në rast se jeni duke përdorur një font të personalizuar, kini parasysh se jo të gjitha fontet mbështesin alfabetin jo latin. Për të kaluar nga familja pan-evropiane në arabe, mund t'ju duhet të përdorni /*rtl:insert: {value}*/
në grupin tuaj të shkronjave për të modifikuar emrat e familjeve të shkronjave.
Për shembull, për të kaluar nga Helvetica Neue Webfont
për LTR në Helvetica Neue Arabic
për RTL, kodi juaj Sass duket si ky:
$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 dhe RTL në të njëjtën kohë
Keni nevojë për LTR dhe RTL në të njëjtën faqe? Falë RTLCSS String Maps , kjo është mjaft e thjeshtë. Mbështillni @import
s-të tuaj me një klasë dhe vendosni një rregull të personalizuar të riemërtimit për 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*/
Pas ekzekutimit të Sass dhe më pas RTLCSS, çdo përzgjedhës në skedarët tuaj CSS do të paraprihet nga .ltr
, dhe .rtl
për skedarët RTL. Tani mund të përdorni të dy skedarët në të njëjtën faqe dhe thjesht përdorni .ltr
ose .rtl
në mbështjellësit e komponentëve tuaj për të përdorur një ose tjetrin drejtim.
Rastet e skajeve dhe kufizimet e njohura
Ndërsa kjo qasje është e kuptueshme, ju lutemi kushtojini vëmendje sa vijon:
- Kur ndërroni
.ltr
dhe.rtl
, sigurohuni që të shtonidir
dhelang
atribuoni në përputhje me rrethanat. - Ngarkimi i të dy skedarëve mund të jetë një pengesë e vërtetë e performancës: merrni parasysh disa optimizime dhe ndoshta provoni të ngarkoni një nga ata skedarë në mënyrë asinkrone .
- Stilet e folezimit në këtë mënyrë do të parandalojnë që
form-validation-state()
miksin tonë të funksionojë siç synohet, kështu që ju kërkojnë ta rregulloni pak vetë. Shihni #31223 .
Kutia e bukës
Ndarësi i bukës është i vetmi rast që kërkon variablin e tij krejt të ri—domethënë $breadcrumb-divider-flipped
—default në $breadcrumb-divider
.