RTL
Aprende a activar a compatibilidade de texto de dereita a esquerda en Bootstrap no noso deseño, compoñentes e utilidades.
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. lang
Engade un atributo apropiado , comolang="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-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" 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-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>
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
left
eright
a favorstart
eend
. Isto fai que os nomes e valores das clases sexan apropiados para LTR e RTL sen sobrecarga.
Por exemplo, en lugar de .ml-3
para 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-bold
toda 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 Webfont
LTR a Helvetica Neue Arabic
RTL, 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 @import
s 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 .rtl
para os ficheiros RTL. Agora podes usar os dous ficheiros na mesma páxina e simplemente usar .ltr
ou .rtl
nos 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
.ltr
e.rtl
, asegúrate de engadirdir
elang
atributos 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 caso da miga de pan
O separador de ruta de navegación é o único caso que require a súa propia variable nova, é dicir, $breadcrumb-divider-flipped
por defecto $breadcrumb-divider
.