RTL

Ismerje meg, hogyan engedélyezheti a jobbról balra haladó szöveg támogatását a Bootstrapban az elrendezésünkben, az összetevőinkben és a segédprogramjainkban.

Ezen az oldalon

Megismerni

Javasoljuk, hogy először ismerkedjen meg a Bootstrappel az Első lépések Bevezető oldalunk elolvasásával . Miután végigfutott rajta, folytassa az olvasást itt az RTL engedélyezéséről.

Érdemes lehet olvasni az RTLCSS projektről is, mivel ez az RTL-lel kapcsolatos megközelítésünket erősíti.

Kísérleti funkció

Az RTL funkció még kísérleti jellegű , és valószínűleg a felhasználói visszajelzések alapján fejlődik majd. Észrevett valamit, vagy van valami fejlesztési javaslata? Nyisson meg egy problémát , szívesen vennénk az Ön betekintését.

Kötelező HTML

Két szigorú követelmény van az RTL engedélyezéséhez a Bootstrap által támogatott oldalakon.

Állítsa dir="rtl"be az <html>elemre.
Adjon hozzá egy megfelelő langattribútumot, például lang="ar", az <html>elemhez.

Innentől kezdve hozzá kell adnia CSS-ünk RTL-verzióját. Például íme a lefordított és kicsinyített CSS-ünk stíluslapja RTL-lel:

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

Kezdő sablon

A fenti követelmények tükröződnek ebben a módosított RTL-indítósablonban.

<!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-OXTEbYDqaX2ZY/BOaZV/yFGChYHtrXH2nyXJ372n2Y8abBhrqacCEe+3qhSHtLjy" 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-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" 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-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>
    -->
  </body>
</html>

RTL példák

Kezdje a több RTL-es példánk egyikével .

Megközelítés

Az RTL-támogatás Bootstrap rendszerbe való beépítésére irányuló megközelítésünk két fontos döntéssel jár, amelyek hatással vannak a CSS írására és használatára:

Először úgy döntöttünk, hogy az RTLCSS projekttel építjük meg. Ez néhány hatékony funkciót biztosít számunkra a változtatások és felülírások kezeléséhez, amikor LTR-ről RTL-re váltunk. Azt is lehetővé teszi, hogy egy kódbázisból két Bootstrap-verziót készítsünk.
Másodszor, átneveztünk néhány irányosztályt, hogy elfogadjuk a logikai tulajdonságok megközelítését. A legtöbben már használtak logikai tulajdonságokat rugalmas segédprogramjainknak köszönhetően – ezek helyettesítik az olyan iránytulajdonságokat, mint a leftés righta javára startés a end. Ezáltal az osztálynevek és értékek megfelelőek az LTR-hez és az RTL-hez, minden költség nélkül.

Például a .ml-3for helyett margin-lefthasználja a .ms-3.

Az RTL-lel való munkavégzés a Sass forrásunkon vagy a lefordított CSS-en keresztül azonban nem sokban különbözhet az alapértelmezett LTR-től.

Testreszabás forrásból

Ami a testreszabást illeti, az előnyben részesített mód a változók, térképek és mixinek előnyeinek kihasználása. Ez a megközelítés ugyanúgy működik az RTL-nél, még akkor is, ha utófeldolgozásra kerül a lefordított fájlokból, köszönhetően az RTLCSS működésének .

Egyéni RTL értékek

Az RTLCSS érték direktívák használatával a változó kimenetét más értékkel állíthatja be az RTL-hez. Például az $font-weight-boldegész kódbázis súlyának csökkentéséhez használhatja a következő /*rtl: {value}*/szintaxist:

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

Ami a következőt adná ki az alapértelmezett CSS és RTL CSS esetén:

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

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

Alternatív betűkészlet

Ha egyéni betűtípust használ, vegye figyelembe, hogy nem minden betűtípus támogatja a nem latin ábécét. Ha páneurópairól arab családra szeretne váltani, előfordulhat, hogy /*rtl:insert: {value}*/a betűkészletben módosítani kell a betűtípuscsaládok nevét.

Helvetica NeueHa például az LTR betűtípusáról az RTL- re szeretne váltani Helvetica Neue Arabic, a Sass-kód így nézhet ki:

$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 és RTL egyszerre

LTR-re és RTL-re is szüksége van egy oldalon? Az RTLCSS String Maps -nek köszönhetően ez nagyon egyszerű. Csomagolja be az @imports-t egy osztályba, és állítson be egyéni átnevezési szabályt az RTLCSS számára:

/* 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*/

A Sass, majd az RTLCSS futtatása után a CSS-fájlok minden szelektora elé kerül a .ltrés .rtlaz RTL-fájlok esetében. Mostantól mindkét fájlt használhatja ugyanazon az oldalon, és egyszerűen használja az összetevők burkolóit .ltrvagy .rtlaz egyik vagy másik irányt.

Edge esetek és ismert korlátozások

Bár ez a megközelítés érthető, kérjük, vegye figyelembe a következőket:

A .ltrés .rtlváltásakor ügyeljen arra, hogy ennek megfelelően adja hozzá a dirés langattribútumokat.
Mindkét fájl betöltése valódi szűk keresztmetszet lehet a teljesítményben: fontolja meg az optimalizálást , és próbálja meg aszinkron módon betölteni az egyik fájlt .
Az ilyen stílusok egymásba ágyazása megakadályozza, hogy a form-validation-state()mixinünk a kívánt módon működjön, ezért egy kicsit egyedül kell módosítania. Lásd #31223 .

A navigációs útvonal-elválasztó az egyetlen olyan eset, amelyhez saját vadonatúj változó szükséges – nevezetesen – az $breadcrumb-divider-flippedalapértelmezett érték $breadcrumb-divider.

RTL