RTL

Aprende a activar a compatibilidade de texto de dereita a esquerda en Bootstrap no noso deseño, compoñentes e utilidades.

Nesta páxina

Familiarizarse

Recomendamos que primeiro se familiarice con Bootstrap lendo a nosa páxina de Introdución para comezar . Unha vez que o recorres, continúa lendo aquí para saber como activar RTL.

Tamén pode querer ler sobre o proxecto RTLCSS , xa que potencia o noso enfoque de RTL.

Característica experimental

A función RTL aínda é experimental e probablemente evolucionará segundo os comentarios dos usuarios. Descubriches algo ou tes algunha mellora que suxerir? Abre un problema , encantaríanos obter as túas informacións.

HTML obrigatorio

Hai dous requisitos estritos para habilitar RTL en páxinas con Bootstrap.

Establecer dir="rtl"no <html>elemento.
langEngade un atributo apropiado , como lang="ar", ao <html>elemento.

A partir de aí, terás que incluír unha versión RTL do noso CSS. Por exemplo, aquí está a folla de estilo para o noso CSS compilado e minificado con RTL activado:

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

Modelo de inicio

Podes ver os requisitos anteriores reflectidos neste modelo de inicio RTL modificado.

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

Exemplos de RTL

Comeza cun dos nosos varios exemplos de RTL .

Aproximación

O noso enfoque para crear compatibilidade con RTL en Bootstrap inclúe dúas decisións importantes que afectan a forma en que escribimos e usamos o noso CSS:

En primeiro lugar, decidimos construílo co proxecto RTLCSS . Isto ofrécenos algunhas funcións poderosas para xestionar cambios e anulacións ao pasar de LTR a RTL. Tamén nos permite construír dúas versións de Bootstrap a partir dunha base de código.
En segundo lugar, renomeamos un puñado de clases direccionais para adoptar un enfoque de propiedades lóxicas. A maioría de vós xa interactuou coas propiedades lóxicas grazas ás nosas utilidades flexibles: substitúen as propiedades de dirección como lefte righta favor starte end. Isto fai que os nomes e valores das clases sexan apropiados para LTR e RTL sen sobrecarga.

Por exemplo, en lugar de .ml-3para margin-left, use .ms-3.

Traballar con RTL, a través da nosa fonte Sass ou CSS compilado, non debería ser moi diferente do noso LTR predeterminado.

Personalizar desde a orixe

Cando se trata de personalización , o xeito preferido é aproveitar variables, mapas e mixins. Este enfoque funciona igual para RTL, aínda que sexa posprocesado a partir dos ficheiros compilados, grazas ao funcionamento de RTLCSS .

Valores RTL personalizados

Usando directivas de valor RTLCSS , pode facer que unha variable saia un valor diferente para RTL. Por exemplo, para diminuír o peso en $font-weight-boldtoda a base de código, pode usar a /*rtl: {value}*/sintaxe:

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

O que sairía ao seguinte para o noso CSS predeterminado e RTL CSS:

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

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

Pila de fontes alternativa

No caso de utilizar unha fonte personalizada, teña en conta que non todas as fontes admiten o alfabeto non latino. Para cambiar da familia paneuropea á árabe, é posible que necesites usar /*rtl:insert: {value}*/na túa pila de fontes para modificar os nomes das familias de fontes.

Por exemplo, para cambiar de Helvetica Neue WebfontLTR a Helvetica Neue ArabicRTL, o teu código Sass ten este aspecto:

$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 e RTL ao mesmo tempo

Necesitas LTR e RTL na mesma páxina? Grazas a RTLCSS String Maps , isto é bastante sinxelo. Envolve o teu @imports cunha clase e establece unha regra de cambio de nome personalizada para 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*/

Despois de executar Sass e logo RTLCSS, cada selector dos teus ficheiros CSS irá anteposto por .ltr, e .rtlpara os ficheiros RTL. Agora podes usar os dous ficheiros na mesma páxina e simplemente usar .ltrou .rtlnos seus envoltorios de compoñentes para usar unha ou outra dirección.

Casos extremos e limitacións coñecidas

Aínda que este enfoque é comprensible, preste atención ao seguinte:

Ao cambiar .ltre .rtl, asegúrate de engadir dire langatributos en consecuencia.
Cargar ambos ficheiros pode ser un verdadeiro pescozo de botella de rendemento: considere algunha optimización e quizais intente cargar un deses ficheiros de forma asíncrona .
Os estilos de anidación deste xeito evitarán que o noso form-validation-state()mixin funcione segundo o previsto, polo que esixe que o modifiques un pouco por ti mesmo. Ver #31223 .

O separador de ruta de navegación é o único caso que require a súa propia variable nova, é dicir, $breadcrumb-divider-flippedpor defecto $breadcrumb-divider.

RTL