RTL ye
Aw ye a dɔn cogo min na aw bɛ se ka sɛbɛnni kɛ kinin fɛ ka taa numan fɛ Bootstrap kɔnɔ an ka labɛncogo, a yɔrɔw ani a nafalanw kɔnɔ.
Aw ye aw yɛrɛ dɔn
an b' a ɲini aw fɛ aw ka Bootstrap dɔn fɔlɔ ni aw ye an ka Daminɛ daminɛ ɲɛ kalan . Ni aw bolila a fɛ, aw bɛ taa a fɛ ka kalan kɛ yan walasa ka RTL daminɛcogo dɔn.
Aw bɛ se fana ka kalan kɛ RTLCSS porozɛ kan , bawo a bɛ fanga di an ka RTL taabolo ma.
Kɔrɔbɔli kɛcogo
RTL ka baarakɛcogo bɛ kɔrɔbɔli la hali bi, wa n’a sɔrɔla a bɛna wuli ka kɛɲɛ ni baarakɛlaw ka hakilinaw ye. I ye fɛn dɔ ye walima i ye ɲɛtaa dɔ sɔrɔ min bɛ se ka hakilina di wa? Open an issue , an b'a fɛ ka aw ka hakilinaw sɔrɔ.
HTML wajibiyalen don
Sariya gɛlɛn fila bɛ RTL daminɛni na Bootstrap-powered ɲɛw kɔnɔ.
- Set
dir="rtl"
kan<html>
element. - Aw bɛ fɛn bɛnnen dɔ fara a kan
lang
, i n’a fɔlang="ar"
,<html>
fɛn in kan.
Ka Bɔ yen, i bɛna an ka CSS RTL sɛrɛ dɔ Dòn a la. Misali la, an ka CSS lajɛlen ni min sɛgɛsɛgɛlen don ni RTL daminɛna, o cogoya sɛbɛn filɛ nin ye:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">
Modèle de démarrage
Aw bɛ se ka sanfɛla wajibiyalenw ye minnu bɛ jira nin RTL daminɛcogo caman sɛmɛntiyalen in na.
<!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>
RTL misaliw
aw bɛ a daminɛ ni an ka RTL misali caman dɔ ye .
Surunya
An ka fɛɛrɛ min bɛ RTL dɛmɛni jɔ Bootstrap kɔnɔ, o bɛ na ni latigɛ nafama fila ye minnu bɛ nɔ bila an ka CSS sɛbɛnni n’a baaracogo la:
-
Fɔlɔ, an y’a latigɛ k’a jɔ ni RTLCSS porozɛ ye. O bɛ fɛɛrɛ barikama dɔw Di an ma fɛn caman bɛrɛbɛrɛw ni 'kɔnɔnafiliw ɲɛnabɔli la ni an bɛ Bɔ LTR la ka Taa RTL la. A fana b'a To an bɛ Bootstrap 'sèn fla jɔ ka Bɔ codebase kelen na.
-
Filanan, an ye ɲɛmajɔ-kalanso damadɔ tɔgɔ caman Tà walasa ka logical properties (nafolomafɛnw) fɛɛrɛ ta. Aw fanba ye jɛɲɔgɔnya kɛ kaban ni logical properties ye k’a sababu kɛ an ka flex utilities ye—u bɛ direction properties nɔnabila i n’a fɔ
left
aniright
in favourstart
aniend
. O b’a To kalasi tɔgɔw ni nafaw bɛ Bɛn LTR ni RTL ma k’a sɔrɔ musaka si ma Kɛ.
Misali la, .ml-3
for margin-left
, baara kɛ ni .ms-3
.
Baara kɛli ni RTL ye, an ka source Sass fɛ walima CSS compiled fɛ, o man kan ka danfaraba don an ka LTR default la hali ni o kɛra.
Customize ka bɔ source la
Ni a bɛ fɔ customization , fɛɛrɛ min ka fisa, o ye ka nafa sɔrɔ fɛn caman na, kartiw, ani mixins. Nin fɛɛrɛ in bɛ baara kɛ cogo kelen na RTL la, hali n’a kɛra kɔfɛ-baarakɛcogo ye ka bɔ dosiyew lajɛlenw na, k’a sababu kɛ RTLCSS baara kɛcogo ye .
RTL nafaw ladamulenw
Baara kɛli ni RTLCSS nafa cikanw ye , i bɛ se ka fɛn caman bɔli kɛ nafa wɛrɛ ye RTL la. Misali la, walasa ka girinya dɔgɔya for $font-weight-bold
throughout the codebase, i bɛ se ka baara kɛ ni /*rtl: {value}*/
syntax ye:
$font-weight-bold: 700 #{/* rtl:600 */} !default;
Min tun bɛna bɔ ka taa ninnu na an ka CSS ni RTL CSS daminɛ na:
/* bootstrap.css */
dt {
font-weight: 700 /* rtl:600 */;
}
/* bootstrap.rtl.css */
dt {
font-weight: 600;
}
Font stack wɛrɛ
In the case you’re using a custom font, be aware that not all fonts support the non-Latin alphabet. To switch from Pan-European to Arabic family, you may need to use /*rtl:insert: {value}*/
in your font stack to modify the names of font families.
For example, to switch from Helvetica Neue Webfont
for LTR to Helvetica Neue Arabic
for RTL, your Sass code look like this:
$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 and RTL at the same time
Need both LTR and RTL on the same page? Thanks to RTLCSS String Maps, this is pretty straightforward. Wrap your @import
s with a class, and set a custom rename rule 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*/
After running Sass then RTLCSS, each selector in your CSS files will be prepended by .ltr
, and .rtl
for RTL files. Now you’re able to use both files on the same page, and simply use .ltr
or .rtl
on your components wrappers to use one or the other direction.
Edge cases and known limitations
While this approach is understandable, please pay attention to the following:
- When switching
.ltr
and.rtl
, make sure you adddir
andlang
attributes accordingly. - Loading both files can be a real performance bottleneck: consider some optimization, and maybe try to load one of those files asynchronously.
- Nesting styles this way will prevent our
form-validation-state()
mixin from working as intended, thus require you tweak it a bit by yourself. See #31223.
The breadcrumb case
The breadcrumb separator is the only case requiring its own brand new variable— namely $breadcrumb-divider-flipped
—defaulting to $breadcrumb-divider
.