RTL

Aflați cum să activați suportul pentru textul de la dreapta la stânga în Bootstrap în aspectul, componentele și utilitățile noastre.

Pe aceasta pagina

Familiarizați-vă

Vă recomandăm să vă familiarizați cu Bootstrap mai întâi citind pagina noastră Introducere Introducere . După ce l-ați parcurs, continuați să citiți aici pentru a afla cum să activați RTL.

De asemenea, vă recomandăm să citiți despre proiectul RTLCSS , deoarece ne ajută la abordarea RTL.

Caracteristica experimentală

Caracteristica RTL este încă experimentală și probabil va evolua în funcție de feedback-ul utilizatorilor. Ați găsit ceva sau aveți o îmbunătățire de sugerat? Deschideți o problemă , ne-ar plăcea să obținem informațiile dvs.

HTML obligatoriu

Există două cerințe stricte pentru activarea RTL în paginile bazate pe Bootstrap.

Setați dir="rtl"pe <html>element.
Adăugați un langatribut adecvat, cum ar fi lang="ar", pe <html>element.

De acolo, va trebui să includeți o versiune RTL a CSS-ului nostru. De exemplu, iată foaia de stil pentru CSS-ul nostru compilat și miniat cu RTL activat:

<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">

Șablon de pornire

Puteți vedea cerințele de mai sus reflectate în acest șablon de pornire RTL modificat.

<!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>

Exemple RTL

Începeți cu unul dintre exemplele noastre RTL .

Abordare

Abordarea noastră de a construi suportul RTL în Bootstrap vine cu două decizii importante care influențează modul în care scriem și folosim CSS-ul nostru:

În primul rând, am decis să-l construim cu proiectul RTLCSS . Acest lucru ne oferă câteva funcții puternice pentru gestionarea modificărilor și înlocuirilor atunci când trecem de la LTR la RTL. De asemenea, ne permite să construim două versiuni de Bootstrap dintr-o bază de cod.
În al doilea rând, am redenumit câteva clase direcționale pentru a adopta o abordare a proprietăților logice. Majoritatea dintre voi ați interacționat deja cu proprietățile logice datorită utilităților noastre flexibile — acestea înlocuiesc proprietățile de direcție precum leftși rightîn favoarea startși end. Acest lucru face ca numele claselor și valorile să fie adecvate pentru LTR și RTL fără nicio suprasarcină.

De exemplu, în loc de .ml-3pentru margin-left, utilizați .ms-3.

Lucrul cu RTL, prin Sass-ul nostru sursă sau CSS compilat, nu ar trebui să fie mult diferit de LTR-ul nostru implicit.

Personalizați din sursă

Când vine vorba de personalizare , modalitatea preferată este să profitați de variabile, hărți și mixuri. Această abordare funcționează la fel pentru RTL, chiar dacă este post-procesată din fișierele compilate, datorită modului în care funcționează RTLCSS .

Valori RTL personalizate

Folosind directivele de valoare RTLCSS , puteți face o ieșire variabilă o valoare diferită pentru RTL. De exemplu, pentru a reduce greutatea pentru $font-weight-boldîntreaga bază de cod, puteți utiliza /*rtl: {value}*/sintaxa:

$font-weight-bold: 700 #{/* rtl:600 */} !default;

Care ar rezulta în următoarele pentru CSS și RTL CSS implicit:

/* bootstrap.css */
dt {
  font-weight: 700 /* rtl:600 */;
}

/* bootstrap.rtl.css */
dt {
  font-weight: 600;
}

Stivă alternativă de fonturi

În cazul în care utilizați un font personalizat, rețineți că nu toate fonturile acceptă alfabetul non-latin. Pentru a trece de la familia paneuropeană la familia arabă, poate fi necesar să utilizați /*rtl:insert: {value}*/în stiva de fonturi pentru a modifica numele familiilor de fonturi.

De exemplu, pentru a comuta de la Helvetica Neuefont pentru LTR la Helvetica Neue Arabicpentru RTL, codul tău Sass ar putea arăta astfel:

$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 și RTL în același timp

Aveți nevoie de LTR și RTL pe aceeași pagină? Datorită RTLCSS String Maps , acest lucru este destul de simplu. Încheiați-vă @importcu o clasă și setați o regulă de redenumire personalizată pentru 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*/

După ce rulați Sass și apoi RTLCSS, fiecare selector din fișierele dvs. CSS va fi antepus .ltr, și .rtlpentru fișierele RTL. Acum puteți folosi ambele fișiere pe aceeași pagină și pur și simplu utilizați .ltrsau .rtlpe wrapper-urile componentelor pentru a utiliza una sau alta direcție.

Cazuri marginale și limitări cunoscute

Deși această abordare este de înțeles, vă rugăm să acordați atenție următoarelor:

Când comutați .ltrși .rtl, asigurați-vă că adăugați dirși langatributele în consecință.
Încărcarea ambelor fișiere poate fi un adevărat blocaj de performanță: luați în considerare unele optimizari și poate încercați să încărcați unul dintre acele fișiere în mod asincron .
Stilurile de cuibărire în acest fel vor împiedica form-validation-state()mixin-ul nostru să funcționeze conform intenției, prin urmare, vă va cere să îl modificați puțin singur. Vezi #31223 .

Separatorul breadcrumb este singurul caz care necesită propria sa variabilă nou-nouță, și anume, $breadcrumb-divider-flippedimplicit la $breadcrumb-divider.

RTL