RTL
Aprenda a habilitar la compatibilidad con texto de derecha a izquierda en Bootstrap en nuestro diseño, componentes y utilidades.
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.
- Establecer
dir="rtl"
en el<html>
elemento. - Agregue un
lang
atributo apropiado, comolang="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-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" 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-+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>
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:
-
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.
-
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
left
yright
a favorstart
yend
. Eso hace que los nombres y valores de clase sean apropiados para LTR y RTL sin sobrecarga.
Por ejemplo, en lugar de .ml-3
para 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-bold
todo 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 Webfont
LTR a Helvetica Neue Arabic
RTL, 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 @import
correos 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 .rtl
para archivos RTL. Ahora puede usar ambos archivos en la misma página y simplemente usar .ltr
o .rtl
en 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:
- Al cambiar
.ltr
y.rtl
, asegúrese de agregardir
ylang
atributos en consecuencia. - 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 .
- 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-flipped
a saber, el valor predeterminado es $breadcrumb-divider
.