RTL
Lær, hvordan du aktiverer understøttelse af højre-til-venstre-tekst i Bootstrap på tværs af vores layout, komponenter og hjælpeprogrammer.
Bliv bekendt
Vi anbefaler, at du først bliver fortrolig med Bootstrap ved at læse vores Introduktionsside Kom godt i gang . Når du har gennemgået det, fortsæt med at læse her for, hvordan du aktiverer RTL.
Du kan også læse om RTLCSS-projektet , da det driver vores tilgang til RTL.
Eksperimentel funktion
RTL-funktionen er stadig eksperimentel og vil sandsynligvis udvikle sig i henhold til brugerfeedback. Fandt du noget eller har du en forbedring at foreslå? Åbn et problem , vi vil meget gerne have din indsigt.
Påkrævet HTML
Der er to strenge krav for at aktivere RTL på Bootstrap-drevne sider.
- Sæt
dir="rtl"
på<html>
elementet. - Tilføj en passende
lang
attribut, såsomlang="ar"
, på<html>
elementet.
Derfra skal du inkludere en RTL-version af vores CSS. For eksempel, her er stilarket til vores kompilerede og minificerede CSS med RTL aktiveret:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" crossorigin="anonymous">
Starter skabelon
Du kan se ovenstående krav afspejlet i denne ændrede RTL-startskabelon.
<!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>
RTL eksempler
Kom godt i gang med et af vores flere RTL-eksempler .
Nærme sig
Vores tilgang til at indbygge RTL-support i Bootstrap kommer med to vigtige beslutninger, der påvirker, hvordan vi skriver og bruger vores CSS:
-
Først besluttede vi at bygge det med RTLCSS- projektet. Dette giver os nogle kraftfulde funktioner til at administrere ændringer og tilsidesættelser, når vi flytter fra LTR til RTL. Det giver os også mulighed for at bygge to versioner af Bootstrap fra én kodebase.
-
For det andet har vi omdøbt en håndfuld retningsbestemte klasser for at anvende en logisk egenskabstilgang. De fleste af jer har allerede interageret med logiske egenskaber takket være vores flex-værktøjer - de erstatter retningsegenskaber som
left
ogright
til fordelstart
ogend
. Det gør klassenavnene og -værdierne passende til LTR og RTL uden overhead.
Brug f.eks. i stedet for .ml-3
for .margin-left
.ms-3
At arbejde med RTL, gennem vores kilde Sass eller kompilerede CSS, burde dog ikke være meget anderledes end vores standard LTR.
Tilpas fra kilden
Når det kommer til tilpasning , er den foretrukne måde at drage fordel af variabler, kort og mixins. Denne tilgang fungerer på samme måde for RTL, selvom den efterbehandles fra de kompilerede filer, takket være hvordan RTLCSS fungerer .
Tilpassede RTL-værdier
Ved at bruge RTLCSS-værdidirektiver kan du lave et variabeloutput til en anden værdi for RTL. For at reducere vægten for $font-weight-bold
hele kodebasen kan du f.eks. bruge /*rtl: {value}*/
syntaksen:
$font-weight-bold: 700 #{/* rtl:600 */} !default;
Hvilket ville output til følgende for vores standard CSS og RTL CSS:
/* bootstrap.css */
dt {
font-weight: 700 /* rtl:600 */;
}
/* bootstrap.rtl.css */
dt {
font-weight: 600;
}
Alternativ skrifttypestak
Hvis du bruger en brugerdefineret skrifttype, skal du være opmærksom på, at ikke alle skrifttyper understøtter det ikke-latinske alfabet. For at skifte fra paneuropæisk til arabisk familie, skal du muligvis bruge /*rtl:insert: {value}*/
i din skrifttypestak til at ændre navnene på skrifttypefamilier.
For at skifte fra Helvetica Neue Webfont
for LTR til Helvetica Neue Arabic
for RTL, ser din Sass-kode således ud:
$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 og RTL på samme tid
Har du brug for både LTR og RTL på samme side? Takket være RTLCSS String Maps er dette ret ligetil. Pak dine @import
s med en klasse, og indstil en tilpasset omdøbningsregel for 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*/
Efter at have kørt Sass og derefter RTLCSS, vil hver vælger i dine CSS-filer blive sat foran af .ltr
, og .rtl
for RTL-filer. Nu er du i stand til at bruge begge filer på samme side og blot bruge .ltr
eller .rtl
på dine komponenters indpakning for at bruge den ene eller den anden retning.
Kantsager og kendte begrænsninger
Selvom denne tilgang er forståelig, skal du være opmærksom på følgende:
- Når du skifter
.ltr
og.rtl
, skal du sørge for at tilføjedir
oglang
attributter i overensstemmelse hermed. - Indlæsning af begge filer kan være en reel flaskehals i ydeevnen: overvej noget optimering , og prøv måske at indlæse en af disse filer asynkront .
- Indlejringsstile på denne måde forhindrer vores
form-validation-state()
mixin i at fungere efter hensigten, og kræver derfor, at du justerer det lidt selv. Se #31223 .
Brødkrumme sagen
Brødkrummeseparatoren er det eneste tilfælde, der kræver sin egen helt nye variabel – nemlig $breadcrumb-divider-flipped
– som standard til $breadcrumb-divider
.