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.
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ő
lang
attribútumot, példáullang="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-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" 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-+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 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
ésright
a javárastart
és aend
. 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-3
for helyett margin-left
haszná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-bold
egé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 Neue Webfont
Ha például LTR-ről RTL- re szeretne váltani Helvetica Neue Arabic
, a Sass-kód így néz 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 @import
s-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 .rtl
az 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 .ltr
vagy .rtl
az 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.rtl
váltásakor ügyeljen arra, hogy ennek megfelelően adja hozzá adir
éslang
attribú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 kenyérmorzsa-ügy
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-flipped
alapértelmezett érték $breadcrumb-divider
.