RTL
Yekola lolenge nini kofungola lisungi mpo na makomi ya loboko ya mobali kino na loboko ya mwasi na Bootstrap na kati ya layout na biso, biteni, mpe ba utilitaires.
Bómesana na makambo yango
Tosengi oyeba liboso Bootstrap na kotanga na nzela ya lokasa na biso ya Maloba ya ebandeli ya kobanda . Soki osilisi kokima na yango, kobá kotánga awa mpo na ndenge ya kofungola RTL.
Okoki pe kolinga kotanga likolo na projet RTLCSS , lokola yango epesaka nguya na ndenge na biso ya kosala na RTL.
Eloko ya komeka
Ezaleli ya RTL ezali naino ya komeka mpe ekobongwana mbala mosusu engebene na makanisi ya basaleli. Omoni eloko moko to oza na amélioration ya ko proposer? Fungola nimero moko , tokosepela kozwa makanisi na yo.
HTML oyo esengeli
Ezali na masengami mibale ya makasi mpo na kofungola RTL na nkasa oyo ezali na nguya ya Bootstrap.
- Set
dir="rtl"
na<html>
élément. - Bakisa
lang
attribut oyo ebongi, lokolalang="ar"
, na<html>
élément.
Uta kuna, ekosenga otia version RTL ya CSS na biso. Ndakisa, awa ezali feuille de style mpo na CSS na biso oyo esangisi mpe oyo esalemi na RTL oyo efungolami:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" crossorigin="anonymous">
Modèle de démarrage
Okoki komona masengi oyo ezali likolo oyo emonisami na modèle oyo ya kobanda RTL oyo ebongisami.
<!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>
Bandakisa ya RTL
Bandá na moko ya bandakisa na biso mingi ya RTL .
Kopusana
Ndenge na biso ya kotonga lisungi ya RTL na kati ya Bootstrap eyaka na mikano mibale ya ntina oyo ezali na bopusi na lolenge nini tokomaka mpe tosalelaka CSS na biso:
-
Ya liboso, tozwaki mokano ya kotonga yango na projet RTLCSS . Yango epesi biso mwa makambo ya nguya mpo na kokamba mbongwana mpe bolongolami ntango tozali kolongwa na LTR kino na RTL. Ezali mpe kopesa biso nzela ya kotonga ba versions mibale ya Bootstrap uta na codebase moko.
-
Ya mibale, tobongoli kombo ya mwa ndambo ya bakelasi ya direction mpo na kozwa approche ya ba propriétés logique. Mingi kati na bino bosili kosala interaction na ba propriétés logique grâce na ba utilitaires na biso ya flex —ba remplacer ba propriétés ya direction lokola
left
mperight
na faveurstart
mpeend
. Yango ekomisaka ba kombo ya classe na ba valeurs ezala appropriée pona LTR na RTL sans aucun frais ya likolo.
Na ndakisa, na esika ya .ml-3
mpo na margin-left
, salelá .ms-3
.
Kosala na RTL, na nzela ya source na biso Sass to CSS compilé, esengeli te kozala mingi différent na LTR na biso par défaut atako bongo.
Personnaliser à partir ya source
When it comes to customization , lolenge ya malamu ezali ya kozwa litomba na ba variables, ba cartes, mpe ba mixins. Approche oyo esalaka ndenge moko pona RTL, ata soki esalemi post-traité à partir ya ba fichiers compilé, grâce na ndenge RTLCSS esalaka .
Ba valeurs ya RTL ya personnalisé
Na kosalelaka ba directives ya valeur ya RTLCSS , okoki kosala sortie ya variable valeur différente pona RTL. Ndakisa, mpo na kokitisa kilo mpo $font-weight-bold
na na boumeli ya codebase mobimba, okoki kosalela /*rtl: {value}*/
syntaxe:
$font-weight-bold: 700 #{/* rtl:600 */} !default;
Oyo elingaki kobimisa na oyo elandi mpo na CSS na biso ya liboso mpe CSS RTL:
/* bootstrap.css */
dt {
font-weight: 700 /* rtl:600 */;
}
/* bootstrap.rtl.css */
dt {
font-weight: 600;
}
Stack ya ba fonts ya ndenge mosusu
Na likambo oyo ozali kosalela fonte oyo olingi, yebá ete bafonte nyonso te nde esimbaka alfabɛ oyo ezali ya Latin te. Mpo na kobongola uta na libota ya Pan-European kino na libota ya Arabe, ekoki kozala ete osengeli kosalela /*rtl:insert: {value}*/
na stack na yo ya makomi mpo na kobongola bankombo ya mabota ya makomi.
Ndakisa, mpo na kobongola uta Helvetica Neue Webfont
mpo na LTR kino Helvetica Neue Arabic
mpo na RTL, code na yo ya Sass ekozala boye:
$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 na RTL na tango moko
Esengeli na LTR mpe RTL na lokasa moko? Merci na RTLCSS String Maps , oyo ezali kitoko semba. Zinga @import
s na yo na kelasi, mpe tia mobeko ya bozongisi nkombo ya momesano mpo na 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*/
Sima ya kosala Sass sima RTLCSS, sélecteur moko na moko na ba fichiers CSS na yo ekozala prépendé na .ltr
, mpe .rtl
mpo na ba fichiers RTL. Sikoyo ozali na makoki ya kosalela ba fichiers nionso mibale na lokasa moko, mpe kosalela kaka .ltr
to .rtl
na ba enveloppes ya ba composants na yo mpo na kosalela direction moko to mosusu.
Ba cas ya bord na ba limitations eyebani
Atako lolenge oyo ya kosala ezali likambo ya kokanga ntina, tosɛngi yo otya likebi na makambo oyo elandi:
- Ntango ozali kobongola
.ltr
mpe.rtl
, salá makasi obakisadir
mpe otyalang
bizaleli na kolanda yango. - Ko charger ba fichiers nionso mibale ekoki kozala vrai goulot d'étranglement ya performance: considérer quelques optimisation , et peut-être meka ko charger moko ya ba fichiers wana asynchrone .
- Ba styles ya nesting na ndenge oyo ekopekisa
form-validation-state()
mixin na biso esala ndenge esengelaki, donc esengaka o tweak yango mua moke yo moko. Talá #31223 .
Etui ya mikuwa ya mampa
Separateur ya mikuwa ya mapa ezali cas se moko oyo esengaka variable na yango moko ya sika mpenza — elingi koloba $breadcrumb-divider-flipped
—kosala défault na $breadcrumb-divider
.