RTL

Lær hvordan du aktiverer støtte for høyre-til-venstre-tekst i Bootstrap på tvers av layout, komponenter og verktøy.

På denne siden

Bli kjent

Vi anbefaler å bli kjent med Bootstrap først ved å lese gjennom vår Komme i gang-introduksjonsside . Når du har kjørt gjennom det, fortsett å lese her for hvordan du aktiverer RTL.

Det kan også være lurt å lese deg opp om RTLCSS-prosjektet , siden det driver vår tilnærming til RTL.

Eksperimentell funksjon

RTL-funksjonen er fortsatt eksperimentell og vil sannsynligvis utvikle seg i henhold til tilbakemeldinger fra brukere. Har du oppdaget noe eller har du en forbedring å foreslå? Åpne et problem , vi vil gjerne ha innsikten din.

Obligatorisk HTML

Det er to strenge krav for å aktivere RTL på Bootstrap-drevne sider.

Sett dir="rtl"på <html>elementet.
Legg til et passende langattributt, som lang="ar", på <html>elementet.

Derfra må du inkludere en RTL-versjon av vår CSS. Her er for eksempel stilarket for vår kompilerte og minifiserte CSS med RTL aktivert:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" crossorigin="anonymous">

Startmal

Du kan se kravene ovenfor reflektert i denne modifiserte RTL-startmalen.

<!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 i gang med et av våre flere RTL-eksempler .

Nærme seg

Vår tilnærming til å bygge RTL-støtte inn i Bootstrap kommer med to viktige avgjørelser som påvirker hvordan vi skriver og bruker CSS:

Først bestemte vi oss for å bygge den med RTLCSS- prosjektet. Dette gir oss noen kraftige funksjoner for å administrere endringer og overstyringer når vi går fra LTR til RTL. Det lar oss også bygge to versjoner av Bootstrap fra én kodebase.
For det andre har vi gitt nytt navn til en håndfull retningsbestemte klasser for å ta i bruk en logisk egenskapstilnærming. De fleste av dere har allerede samhandlet med logiske egenskaper takket være våre flex-verktøy – de erstatter retningsegenskaper som leftog righti favør startog end. Det gjør klassenavnene og -verdiene passende for LTR og RTL uten overhead.

Bruk for eksempel i stedet for .ml-3for margin-left..ms-3

Å jobbe med RTL, gjennom vår kilde Sass eller kompilerte CSS, bør imidlertid ikke være mye forskjellig fra vår standard LTR.

Tilpass fra kilden

Når det gjelder tilpasning , er den foretrukne måten å dra nytte av variabler, kart og blandinger. Denne tilnærmingen fungerer på samme måte for RTL, selv om den er etterbehandlet fra de kompilerte filene, takket være hvordan RTLCSS fungerer .

Egendefinerte RTL-verdier

Ved å bruke RTLCSS-verdidirektiver kan du lage en variabel utdata til en annen verdi for RTL. For å redusere vekten for $font-weight-boldhele kodebasen, kan du for eksempel bruke /*rtl: {value}*/syntaksen:

$font-weight-bold: 700 #{/* rtl:600 */} !default;

Som vil sende ut til følgende for vår standard CSS og RTL CSS:

/* bootstrap.css */
dt {
  font-weight: 700 /* rtl:600 */;
}

/* bootstrap.rtl.css */
dt {
  font-weight: 600;
}

Alternativ fontstabel

I tilfelle du bruker en egendefinert skrift, vær oppmerksom på at ikke alle fonter støtter det ikke-latinske alfabetet. For å bytte fra paneuropeisk til arabisk familie, må du kanskje bruke /*rtl:insert: {value}*/i skriftstakken for å endre navnene på skriftfamilier.

For eksempel, for å bytte fra Helvetica Neue Webfontfor LTR til Helvetica Neue Arabicfor RTL, ser Sass-koden din slik ut:

$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 samtidig

Trenger du både LTR og RTL på samme side? Takket være RTLCSS String Maps er dette ganske enkelt. Pakk dine @imports med en klasse, og angi en egendefinert endre navn regel 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*/

Etter å ha kjørt Sass og deretter RTLCSS, vil hver velger i CSS-filene dine bli satt foran med .ltr, og .rtlfor RTL-filer. Nå kan du bruke begge filene på samme side, og ganske enkelt bruke .ltreller .rtlpå komponentinnpakningene dine for å bruke den ene eller den andre retningen.

Kantsaker og kjente begrensninger

Selv om denne tilnærmingen er forståelig, vær oppmerksom på følgende:

Når du bytter .ltrog .rtl, sørg for at du legger til dirog langattributter tilsvarende.
Å laste inn begge filene kan være en skikkelig flaskehals i ytelsen: vurder litt optimering , og prøv kanskje å laste en av disse filene asynkront .
Nesting-stiler på denne måten vil forhindre at blandingen vår form-validation-state()fungerer etter hensikten, og krever derfor at du justerer den litt selv. Se #31223 .

Brødsmule-separatoren er det eneste tilfellet som krever sin egen splitter nye variabel – nemlig $breadcrumb-divider-flipped– som standard er $breadcrumb-divider.

RTL