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.

Na lokasa oyo

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 langattribut oyo ebongi, lokola lang="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-OXTEbYDqaX2ZY/BOaZV/yFGChYHtrXH2nyXJ372n2Y8abBhrqacCEe+3qhSHtLjy" 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-OXTEbYDqaX2ZY/BOaZV/yFGChYHtrXH2nyXJ372n2Y8abBhrqacCEe+3qhSHtLjy" 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-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" 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-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" 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 leftmpe rightna faveur startmpe end. 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-3mpo 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-boldna 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 na Helvetica Neuefont mpo na LTR kino Helvetica Neue Arabicmpo na RTL, code na yo ya Sass ekoki komonana 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 @imports 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 .rtlmpo na ba fichiers RTL. Sikoyo ozali na makoki ya kosalela ba fichiers nionso mibale na lokasa moko, mpe kosalela kaka .ltrto .rtlna 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 .ltrmpe .rtl, salá makasi obakisa dirmpe otya langbizaleli 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 .

Separateur ya mikuwa ya mampa ezali cas se moko oyo esengaka variable na yango moko ya sika mpenza — elingi koloba $breadcrumb-divider-flipped—kosala défault na $breadcrumb-divider.

RTL