Saltar al contenido principal Saltar a la navegación de documentos
in English

RTL

Aprenda a habilitar la compatibilidad con texto de derecha a izquierda en Bootstrap en nuestro diseño, componentes y utilidades.

En esta página

Familiarizarse

Recomendamos familiarizarse con Bootstrap primero leyendo nuestra página de introducción Introducción . Una vez que lo hayas leído, sigue leyendo aquí para saber cómo habilitar RTL.

También puede leer sobre el proyecto RTLCSS , ya que impulsa nuestro enfoque de RTL.

característica experimental

La función RTL aún es experimental y probablemente evolucionará de acuerdo con los comentarios de los usuarios. ¿Detectó algo o tiene alguna mejora que sugerir? Abre un problema , nos encantaría conocer tu opinión.

HTML requerido

Hay dos requisitos estrictos para habilitar RTL en páginas con tecnología Bootstrap.

  1. Establecer dir="rtl"en el <html>elemento.
  2. Agregue un langatributo apropiado, como lang="ar", en el <html>elemento.

A partir de ahí, deberá incluir una versión RTL de nuestro CSS. Por ejemplo, aquí está la hoja de estilo para nuestro CSS compilado y minimizado con RTL habilitado:

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

Plantilla de inicio

Puede ver los requisitos anteriores reflejados en esta plantilla de inicio 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-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>

Ejemplos de RTL

Comience con uno de nuestros varios ejemplos de RTL .

Acercarse

Nuestro enfoque para incorporar la compatibilidad con RTL en Bootstrap viene con dos decisiones importantes que afectan la forma en que escribimos y usamos nuestro CSS:

  1. Primero, decidimos construirlo con el proyecto RTLCSS . Esto nos brinda algunas características poderosas para administrar cambios y anulaciones al pasar de LTR a RTL. También nos permite crear dos versiones de Bootstrap a partir de un código base.

  2. En segundo lugar, hemos cambiado el nombre de un puñado de clases direccionales para adoptar un enfoque de propiedades lógicas. La mayoría de ustedes ya han interactuado con propiedades lógicas gracias a nuestras utilidades flexibles: reemplazan propiedades de dirección como lefty righta favor starty end. Eso hace que los nombres y valores de clase sean apropiados para LTR y RTL sin sobrecarga.

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

Sin embargo, trabajar con RTL, a través de nuestra fuente Sass o CSS compilado, no debería ser muy diferente de nuestro LTR predeterminado.

Personalizar desde la fuente

Cuando se trata de personalización , la forma preferida es aprovechar las variables, los mapas y los mixins. Este enfoque funciona igual para RTL, incluso si se procesa posteriormente a partir de los archivos compilados, gracias a cómo funciona RTLCSS .

Valores RTL personalizados

Usando directivas de valor RTLCSS , puede hacer que una salida variable tenga un valor diferente para RTL. Por ejemplo, para disminuir el peso de $font-weight-boldtodo el código base, puede usar la /*rtl: {value}*/sintaxis:

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

Lo que daría como resultado lo siguiente para nuestro CSS y RTL CSS predeterminados:

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

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

Pila de fuentes alternativas

En caso de que utilice una fuente personalizada, tenga en cuenta que no todas las fuentes admiten el alfabeto no latino. Para cambiar de la familia paneuropea a la árabe, es posible que deba usar /*rtl:insert: {value}*/en su pila de fuentes para modificar los nombres de las familias de fuentes.

Por ejemplo, para cambiar de Helvetica Neue WebfontLTR a Helvetica Neue ArabicRTL, su código Sass se ve así:

$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 y RTL al mismo tiempo

¿Necesita LTR y RTL en la misma página? Gracias a RTLCSS String Maps , esto es bastante sencillo. Envuelva sus @importcorreos electrónicos con una clase y establezca una regla de cambio de nombre 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*/

Después de ejecutar Sass y luego RTLCSS, cada selector en sus archivos CSS estará precedido por .ltr, y .rtlpara archivos RTL. Ahora puede usar ambos archivos en la misma página y simplemente usar .ltro .rtlen los contenedores de sus componentes para usar una u otra dirección.

Casos extremos y limitaciones conocidas

Si bien este enfoque es comprensible, preste atención a lo siguiente:

  1. Al cambiar .ltry .rtl, asegúrese de agregar diry langatributos en consecuencia.
  2. Cargar ambos archivos puede ser un cuello de botella de rendimiento real: considere alguna optimización y tal vez intente cargar uno de esos archivos de forma asíncrona .
  3. Anidar estilos de esta manera evitará que nuestra form-validation-state()mezcla funcione según lo previsto, por lo que es necesario que la modifique un poco por su cuenta. Ver #31223 .

El caso de la miga de pan

El separador de migas de pan es el único caso que requiere su propia variable completamente nueva, $breadcrumb-divider-flippeda saber, el valor predeterminado es $breadcrumb-divider.

Recursos adicionales