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.

På denne side

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 langattribut, såsom lang="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 leftog righttil fordel startog end. Det gør klassenavnene og -værdierne passende til LTR og RTL uden overhead.

Brug f.eks. i stedet for .ml-3for .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-boldhele 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 Webfontfor LTR til Helvetica Neue Arabicfor 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 @imports 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 .rtlfor RTL-filer. Nu er du i stand til at bruge begge filer på samme side og blot bruge .ltreller .rtlpå 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 .ltrog .rtl, skal du sørge for at tilføje dirog langattributter 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ødkrummeseparatoren er det eneste tilfælde, der kræver sin egen helt nye variabel – nemlig $breadcrumb-divider-flipped– som standard til $breadcrumb-divider.

RTL