RTL

Zjistěte, jak povolit podporu pro text psaný zprava doleva v Bootstrapu v našem rozložení, komponentách a utilitách.

Na této straně

Seznamte se

Doporučujeme nejprve se seznámit s Bootstrap tím, že si přečtete naši úvodní stránku Začínáme . Jakmile to projdete, pokračujte ve čtení zde, kde se dozvíte, jak povolit RTL.

Můžete si také přečíst o projektu RTLCSS , protože podporuje náš přístup k RTL.

Experimentální funkce

Funkce RTL je stále experimentální a pravděpodobně se bude vyvíjet podle zpětné vazby od uživatelů. Zaznamenali jste něco nebo chcete navrhnout zlepšení? Otevřete problém , rádi bychom získali vaše postřehy.

Povinné HTML

Existují dva přísné požadavky na povolení RTL na stránkách s podporou Bootstrapu.

Nastavte dir="rtl"na <html>prvek.
Přidejte k prvku vhodný langatribut, například .lang="ar"<html>

Odtud budete muset zahrnout verzi RTL našeho CSS. Zde je například šablona stylů pro naše zkompilované a minifikované 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">

Startovací šablona

Výše uvedené požadavky můžete vidět v této upravené úvodní šabloně 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>

Příklady RTL

Začněte s jedním z našich několika příkladů RTL .

Přístup

Náš přístup k zabudování podpory RTL do Bootstrapu přichází se dvěma důležitými rozhodnutími, která ovlivňují způsob, jakým píšeme a používáme naše CSS:

Nejprve jsme se rozhodli jej postavit pomocí projektu RTLCSS . To nám dává některé výkonné funkce pro správu změn a přepisů při přechodu z LTR na RTL. Umožňuje nám také vytvořit dvě verze Bootstrapu z jedné kódové základny.
Za druhé, přejmenovali jsme několik směrových tříd, abychom přijali přístup logických vlastností. Většina z vás již interagovala s logickými vlastnostmi díky našim flex utilitám – nahrazují směrové vlastnosti jako lefta rightve prospěch starta end. Díky tomu jsou názvy a hodnoty tříd vhodné pro LTR a RTL bez jakékoli režie.

Například místo .ml-3for margin-leftpoužijte .ms-3.

Práce s RTL prostřednictvím našeho zdrojového Sass nebo kompilovaného CSS by se však neměla příliš lišit od našeho výchozího LTR.

Přizpůsobit ze zdroje

Pokud jde o přizpůsobení , preferovaným způsobem je využití proměnných, map a mixů. Tento přístup funguje stejně pro RTL, i když je následně zpracován z kompilovaných souborů, díky tomu, jak funguje RTLCSS .

Vlastní hodnoty RTL

Pomocí direktiv hodnot RTLCSS můžete nastavit výstup proměnné na jinou hodnotu pro RTL. Chcete-li například snížit váhu pro $font-weight-boldcelou kódovou základnu, můžete použít /*rtl: {value}*/syntaxi:

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

Což by pro naše výchozí CSS a RTL CSS přineslo následující:

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

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

Alternativní zásobník písem

V případě, že používáte vlastní písmo, mějte na paměti, že ne všechna písma podporují nelatinkovou abecedu. Chcete-li přepnout z celoevropské na arabskou rodinu, možná budete muset použít /*rtl:insert: {value}*/v zásobníku písem k úpravě názvů rodin písem.

Chcete-li například přepnout z Helvetica Neue Webfontfor LTR na Helvetica Neue Arabicpro RTL, váš kód Sass bude vypadat 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 zároveň

Potřebujete LTR i RTL na stejné stránce? Díky RTLCSS String Maps je to docela jednoduché. Zabalte své @imports třídou a nastavte vlastní pravidlo pro přejmenování pro 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 spuštění Sass a poté RTLCSS bude každý selektor ve vašich souborech CSS doplněn o .ltr, a .rtlpro soubory RTL. Nyní můžete používat oba soubory na stejné stránce a jednoduše použít .ltrnebo .rtlna obalech komponent k použití jednoho nebo druhého směru.

Okrajové případy a známá omezení

I když je tento přístup pochopitelný, věnujte prosím pozornost následujícímu:

Při přepínání .ltra .rtl, ujistěte se, že přidáváte dira langatributy odpovídajícím způsobem.
Načítání obou souborů může být skutečným problémem výkonu: zvažte nějakou optimalizaci a možná zkuste načíst jeden z těchto souborů asynchronně .
Vnoření stylů tímto způsobem zabrání tomu, aby náš form-validation-state()mixin fungoval tak, jak bylo zamýšleno, a proto je nutné, abyste jej trochu vylepšili sami. Viz #31223 .

Oddělovač drobečkové navigace je jediný případ, který vyžaduje vlastní zbrusu novou proměnnou – konkrétně $breadcrumb-divider-flipped– výchozí je $breadcrumb-divider.

RTL