RTL

Zistite, ako povoliť podporu pre text písaný sprava doľava v Bootstrape v našom rozložení, komponentoch a pomôckach.

Na tejto stránke

Zoznámte sa

Odporúčame vám, aby ste sa najskôr zoznámili s Bootstrap prečítaním si našej úvodnej stránky Začíname . Keď to prejdete, pokračujte v čítaní tu, kde nájdete informácie o tom, ako povoliť RTL.

Môžete si tiež prečítať o projekte RTLCSS , pretože podporuje náš prístup k RTL.

Experimentálna funkcia

Funkcia RTL je stále experimentálna a pravdepodobne sa bude vyvíjať podľa spätnej väzby od používateľov. Všimli ste si niečo alebo chcete navrhnúť zlepšenie? Otvorte problém , radi by sme dostali vaše postrehy.

Povinné HTML

Existujú dve prísne požiadavky na povolenie RTL na stránkach s podporou Bootstrapu.

Nastavte dir="rtl"na <html>prvok.
Pridajte k prvku vhodný langatribút, napríklad .lang="ar"<html>

Odtiaľ budete musieť zahrnúť verziu RTL nášho CSS. Napríklad tu je šablóna so štýlmi pre náš skompilovaný a miniifikovaný CSS s povoleným RTL:

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

Štartovacia šablóna

Vyššie uvedené požiadavky môžete vidieť v tejto upravenej štartovacej šablóne RTL.

<!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>

Príklady RTL

Začnite s jedným z našich niekoľkých príkladov RTL .

Prístup

Náš prístup k budovaniu podpory RTL do Bootstrapu prichádza s dvoma dôležitými rozhodnutiami, ktoré ovplyvňujú spôsob, akým píšeme a používame naše CSS:

Najprv sme sa rozhodli postaviť ho pomocou projektu RTLCSS . To nám poskytuje niektoré výkonné funkcie na správu zmien a prepisov pri prechode z LTR na RTL. Umožňuje nám tiež zostaviť dve verzie Bootstrapu z jednej kódovej základne.
Po druhé, premenovali sme niekoľko smerových tried, aby sme prijali prístup logických vlastností. Väčšina z vás už interagovala s logickými vlastnosťami vďaka našim flexibilným nástrojom – nahrádzajú smerové vlastnosti ako lefta rightv prospech starta end. Vďaka tomu sú názvy tried a hodnoty vhodné pre LTR a RTL bez akejkoľvek réžie.

Napríklad namiesto .ml-3for margin-leftpoužite .ms-3.

Práca s RTL prostredníctvom nášho zdroja Sass alebo kompilovaného CSS by sa však nemala príliš líšiť od našej predvolenej LTR.

Prispôsobiť zo zdroja

Pokiaľ ide o prispôsobenie , preferovaným spôsobom je využiť výhody premenných, máp a mixov. Tento prístup funguje rovnako pre RTL, aj keď je dodatočne spracovaný z kompilovaných súborov, vďaka tomu, ako funguje RTLCSS .

Vlastné hodnoty RTL

Pomocou direktív hodnôt RTLCSS môžete nastaviť výstup premennej na inú hodnotu pre RTL. Napríklad, ak chcete znížiť váhu pre $font-weight-boldcelú kódovú základňu, môžete použiť /*rtl: {value}*/syntax:

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

Čo by pre naše predvolené CSS a RTL CSS vynieslo nasledovné:

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

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

Alternatívny zásobník písiem

V prípade, že používate vlastné písmo, uvedomte si, že nie všetky písma podporujú inú ako latinskú abecedu. Ak chcete prejsť z paneurópskej na arabskú rodinu, možno budete musieť použiť /*rtl:insert: {value}*/v zásobníku písiem na úpravu názvov rodín písiem.

Ak chcete napríklad prejsť z Helvetica Neue Webfontpre LTR na Helvetica Neue ArabicRTL, váš kód Sass bude vyzerať takto:

$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 a RTL súčasne

Potrebujete LTR aj RTL na tej istej stránke? Vďaka RTLCSS String Maps je to celkom jednoduché. Zabaľte svoje @imports triedou a nastavte vlastné pravidlo premenovania pre 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*/

Po spustení Sass a potom RTLCSS bude pred každým selektorom vo vašich súboroch CSS predpona .ltr, a .rtlpre súbory RTL. Teraz môžete použiť oba súbory na tej istej stránke a jednoducho použiť .ltralebo .rtlna obaloch komponentov použiť jeden alebo druhý smer.

Okrajové prípady a známe obmedzenia

Aj keď je tento prístup pochopiteľný, venujte prosím pozornosť nasledujúcemu:

Pri prepínaní .ltra .rtl, nezabudnite pridať dira langatribúty podľa toho.
Načítanie oboch súborov môže predstavovať skutočnú prekážku výkonu: zvážte určitú optimalizáciu a možno skúste načítať jeden z týchto súborov asynchrónne .
Štýly vnorenia týmto spôsobom zabránia tomu, aby náš form-validation-state()mixin fungoval tak, ako má, a preto si to vyžaduje, aby ste ho trochu upravili sami. Pozri #31223 .

Oddeľovač strúhanky je jediný prípad , ktorý vyžaduje vlastnú úplne novú premennú – konkrétne $breadcrumb-divider-flipped– predvolenú na $breadcrumb-divider.

RTL