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.
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
lang
atribut adequat, com aralang="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-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" 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-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>
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
left
iright
a favorstart
iend
. 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-3
per 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-bold
tota 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 Webfont
LTR a Helvetica Neue Arabic
RTL, 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 @import
s 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 .rtl
per als fitxers RTL. Ara podeu utilitzar els dos fitxers a la mateixa pàgina i, simplement, utilitzar .ltr
o .rtl
als 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
.ltr
i.rtl
, assegureu-vos d'afegirdir
ilang
atributs 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 cas del pa ratllat
El separador de ruta de navegació és l'únic cas que requereix la seva pròpia variable nova, és a dir, $breadcrumb-divider-flipped
per defecte $breadcrumb-divider
.