RTL

Obteniu informació sobre com activar el suport per al text de dreta a esquerra a Bootstrap a través del nostre disseny, components i utilitats.

En aquesta pàgina

Familiaritza't

Us recomanem que primer familiaritzeu-vos amb Bootstrap llegint la nostra pàgina Introducció per començar . Un cop ho hàgiu fet, continueu llegint aquí per saber com activar RTL.

És possible que també vulgueu llegir el projecte RTLCSS , ja que potencia el nostre enfocament a RTL.

Característica experimental

La funció RTL encara és experimental i probablement evolucionarà segons els comentaris dels usuaris. Heu trobat alguna cosa o teniu alguna millora per suggerir? Obre un problema , ens agradaria rebre les teves estadístiques.

HTML obligatori

Hi ha dos requisits estrictes per habilitar RTL a les pàgines alimentades amb Bootstrap.

Posa dir="rtl"a l' <html>element.
Afegiu un langatribut adequat, com ara lang="ar", a l' <html>element.

A partir d'aquí, haureu d'incloure una versió RTL del nostre CSS. Per exemple, aquí teniu el full d'estil per al nostre CSS compilat i minificat amb RTL habilitat:

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

Plantilla d'inici

Podeu veure els requisits anteriors reflectits en aquesta plantilla d'inici de RTL modificada.

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

Exemples de RTL

Comenceu amb un dels nostres diversos exemples de RTL .

Aproximació

El nostre enfocament per crear suport RTL a Bootstrap inclou dues decisions importants que afecten la manera com escrivim i utilitzem el nostre CSS:

Primer, vam decidir construir-lo amb el projecte RTLCSS . Això ens ofereix algunes funcions potents per gestionar els canvis i les substitucions quan passem de LTR a RTL. També ens permet crear dues versions de Bootstrap a partir d'una base de codi.
En segon lloc, hem canviat el nom d'un grapat de classes direccionals per adoptar un enfocament de propietats lògiques. La majoria de vosaltres ja heu interactuat amb propietats lògiques gràcies a les nostres utilitats flexibles: substitueixen propietats de direcció com lefti righta favor starti end. Això fa que els noms i valors de classe siguin adequats per a LTR i RTL sense cap sobrecàrrega.

Per exemple, en comptes de .ml-3per a margin-left, utilitzeu .ms-3.

Tanmateix, treballar amb RTL, mitjançant el nostre Sass font o CSS compilat, no hauria de ser molt diferent del nostre LTR predeterminat.

Personalitza des de la font

Quan es tracta de personalització , la manera preferida és aprofitar variables, mapes i mixins. Aquest enfocament funciona igual per a RTL, fins i tot si es processa posteriorment a partir dels fitxers compilats, gràcies a com funciona RTLCSS .

Valors RTL personalitzats

Utilitzant les directives de valors RTLCSS , podeu fer que una variable tingui un valor diferent per a RTL. Per exemple, per reduir el pes de $font-weight-boldtota la base de codi, podeu utilitzar la /*rtl: {value}*/sintaxi:

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

El que sortiria al següent per als nostres CSS i CSS RTL predeterminats:

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

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

Pila de tipus de lletra alternativa

En el cas que utilitzeu un tipus de lletra personalitzat, tingueu en compte que no tots els tipus de lletra admeten l'alfabet no llatí. Per canviar de la família paneuropea a àrab, potser haureu d'utilitzar /*rtl:insert: {value}*/a la vostra pila de fonts per modificar els noms de les famílies de tipus de lletra.

Per exemple, per canviar de Helvetica Neue WebfontLTR a Helvetica Neue ArabicRTL, el vostre codi Sass té aquest aspecte:

$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 alhora

Necessites tant LTR com RTL a la mateixa pàgina? Gràcies a RTLCSS String Maps , això és bastant senzill. Emboliqueu el vostre @imports amb una classe i configureu una regla de canvi de nom personalitzada per a 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*/

Després d'executar Sass i després RTLCSS, cada selector dels vostres fitxers CSS s'adjuntarà amb .ltr, i .rtlper als fitxers RTL. Ara podeu utilitzar els dos fitxers a la mateixa pàgina i, simplement, utilitzar .ltro .rtlals embolcalls dels vostres components per utilitzar una o l'altra direcció.

Casos límit i limitacions conegudes

Tot i que aquest enfocament és comprensible, presteu atenció al següent:

Quan canvieu .ltri .rtl, assegureu-vos d'afegir diri langatributs en conseqüència.
Carregar els dos fitxers pot ser un veritable coll d'ampolla de rendiment: considereu una mica d'optimització i potser intenteu carregar un d'aquests fitxers de manera asíncrona .
Els estils de nidificació d'aquesta manera evitaran que el nostre form-validation-state()mixin funcioni com s'ha previst, de manera que cal que el modifiqueu una mica. Veure #31223 .

El separador de ruta de navegació és l'únic cas que requereix la seva pròpia variable nova, és a dir, $breadcrumb-divider-flippedper defecte $breadcrumb-divider.

RTL