Passà à u cuntenutu principale Salta à a navigazione di documenti
in English

RTL

Amparate cumu attivà u supportu per u testu da diritta à sinistra in Bootstrap in u nostru layout, cumpunenti è utilità.

In sta pagina

Fate familiarità

Hè ricumandemu di familiarizà cun Bootstrap prima leghjendu a nostra pagina di Introduzione di Introduzione . Una volta chì l'avete attraversatu, cuntinueghja à leghje quì per cumu attivà RTL.

Puderete ancu vulete leghje nantu à u prughjettu RTLCSS , cum'è u putere di u nostru approcciu à RTL.

Funzione sperimentale

A funzione RTL hè sempre sperimentale è probabilmente evolverà secondu u feedback di l'utilizatori. Avete vistu qualcosa o avete una migliione à suggerisce? Aprite un prublema , ci piacerebbe avè a vostra cunniscenza.

HTML necessariu

Ci hè dui requisiti stretti per attivà RTL in e pagine alimentate da Bootstrap.

  1. Mettite dir="rtl"nantu à l' <html>elementu.
  2. Aghjunghjite un langattributu adattatu, cum'è lang="ar", nantu à l' <html>elementu.

Da quì, avete bisognu di include una versione RTL di u nostru CSS. Per esempiu, quì hè u fogliu di stile per u nostru CSS compilatu è minificatu cù RTL attivatu:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">

U mudellu di partenza

Pudete vede i requisiti sopra riflessi in stu mudellu RTL starter mudificatu.

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

Esempi di RTL

Cumincià cù unu di i nostri parechji esempi RTL .

Avvicinamentu

U nostru approcciu per custruisce un supportu RTL in Bootstrap vene cun duie decisioni impurtanti chì impactanu cumu scrivemu è utilizemu u nostru CSS:

  1. Prima, avemu decisu di custruisce cù u prughjettu RTLCSS . Questu ci dà alcune funzioni putenti per gestisce i cambiamenti è l'annullamenti quandu si move da LTR à RTL. Ci permette ancu di custruisce duie versioni di Bootstrap da una basa di codice.

  2. Siconda, avemu rinominatu una manciata di classi direzzione per aduttà un approcciu di pruprietà logica. A maiò parte di voi avete digià interazzione cù e proprietà logiche grazia à i nostri utilità flessibili - rimpiazzanu e proprietà di direzzione cum'è leftè rightin favore startè end. Chì rende i nomi di classi è i valori adatti per LTR è RTL senza alcunu overhead.

Per esempiu, invece di .ml-3per margin-left, utilizate .ms-3.

U travagliu cù RTL, attraversu a nostra fonte Sass o CSS compilatu, ùn deve micca esse assai sfarente da u nostru LTR predeterminatu.

Personalizà da a fonte

Quandu si tratta di persunalizazione , u modu preferitu hè di prufittà di variabili, carte è mixin. Stu approcciu funziona u listessu per RTL, ancu s'ellu hè post-processatu da i schedari compilati, grazia à cumu funziona RTLCSS .

Valori RTL persunalizati

Utilizendu direttive di valore RTLCSS , pudete fà una variabile output un valore diversu per RTL. Per esempiu, per diminuisce u pesu per $font-weight-boldtutta a basa di codice, pudete aduprà a /*rtl: {value}*/sintassi:

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

Chì avaristi à u seguente per u nostru CSS predeterminatu è RTL CSS:

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

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

Pila di font alternativa

In u casu chì aduprate un font persunalizatu, sia cuscenti chì micca tutti i fonts supportanu l'alfabetu non latinu. Per passà da a famiglia paneuropea à araba, pudete avè bisognu di utilizà /*rtl:insert: {value}*/in a vostra pila di fonti per mudificà i nomi di famiglie di fonti.

Per esempiu, per cambià da Helvetica Neue Webfontper LTR à Helvetica Neue Arabicper RTL, u vostru codice Sass pare cusì:

$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 è RTL à u stessu tempu

Avete bisognu di LTR è RTL in a stessa pagina? Grazie à RTLCSS String Maps , questu hè abbastanza simplice. Imbulighjate i vostri @imports cù una classa, è stabilisce una regula di rinominazione persunalizata per 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*/

Dopu avè eseguitu Sass allora RTLCSS, ogni selettore in i vostri fugliali CSS serà prepostu da .ltr, è .rtlper i schedari RTL. Avà pudete aduprà i dui fugliali nantu à a stessa pagina, è simpricimenti aduprà .ltro .rtlnantu à i vostri wrappers di cumpunenti per aduprà una o l'altra direzzione.

Casi Edge è limitazioni cunnisciute

Mentre chì questu approcciu hè comprensibile, fate attenzione à i seguenti:

  1. Quandu cambiate .ltrè .rtl, assicuratevi di aghjunghje dirè langattributi in cunseguenza.
  2. Caricà i dui fugliali pò esse un veru collu di buttiglia di rendiment: cunsiderà qualchì ottimisazione , è forse pruvate à carica unu di quelli fugliali in modu asincronu .
  3. I stili di nidificazione in questu modu impediscenu à u nostru form-validation-state()mixin di travaglià cum'è previstu, cusì esigenu di tweak un pocu da sè stessu. Vede # 31223 .

U casu di pane

U separatore di breadcrumb hè l'unicu casu chì richiede a so propria variabile nova - vale à dì $breadcrumb-divider-flipped- default à $breadcrumb-divider.

Risorse supplementari