RTL
Srɔ̃ alesi nàwɔ ana kpekpeɖeŋu na nuŋɔŋlɔ tso ɖusime yi miame le Bootstrap me le míaƒe ɖoɖo, akpawo, kple dɔwɔnuwo katã me.
Minya nu tso eŋu nyuie
Míele aɖaŋu ɖom be nànya Bootstrap nyuie gbã to míaƒe Getting Started Introduction ƒe axaa xexlẽ me . Ne èƒu du to eme vɔ la, yi edzi nàxlẽ le afisia hena alesi nàwɔ RTL nawɔ dɔe.
Àte ŋu axlẽ nu tso RTLCSS dɔa hã ŋu , elabena enaa ŋusẽ míaƒe mɔnu le RTL ŋu.
Dodokpɔ ƒe akpa aɖe
RTL ƒe nɔnɔmea gakpɔtɔ nye dodokpɔ eye anɔ eme be atrɔ le ezãlawo ƒe nyaŋuɖoɖo nu. Èkpɔ nane alo ŋgɔyiyi aɖe le asiwò nàdo susu ɖaa? Open an issue , adzɔ dzi na mí ŋutɔ be míaxɔ wò gɔmesesewo.
HTML si hiã
Nudidi sesẽ eve li na RTL ƒe dɔwɔwɔ le axa siwo ŋu Bootstrap zãna me.
- Ðoe
dir="rtl"
ɖe<html>
element la dzi. - Tsɔ
lang
nɔnɔme si sɔ, abelang="ar"
, ene kpe ɖe<html>
element la ŋu.
Tso afima la, ahiã be nàde míaƒe CSS ƒe RTL ƒe tɔtrɔ aɖe eme. Le kpɔɖeŋu me, míaƒe CSS si woƒo ƒu kple esi woɖe ɖe vovo si me RTL le dɔ wɔm le ƒe atsyã gbalẽvi enye si:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" crossorigin="anonymous">
Gɔmedzedze ƒe nɔnɔmetata
Àteŋu akpɔ nudidi siwo le etame siwo dze le RTL gɔmedzedze ƒe nɔnɔmetata sia si ŋu wotrɔ asi le me.
<!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 ƒe kpɔɖeŋuwo
Dze egɔme kple míaƒe RTL ƒe kpɔɖeŋu geɖeawo dometɔ ɖeka .
Te ɖe
Míaƒe mɔnu si míezãna tsɔ tua RTL kpekpeɖeŋu ɖe Bootstrap me la va kple nyametsotso vevi eve siwo kpɔa ŋusẽ ɖe alesi míeŋlɔa míaƒe CSS eye míezãnɛ dzi:
-
Gbã la, míeɖoe be míatsɔ RTLCSS dɔa atue. Esia na míekpɔ nɔnɔme sẽŋu aɖewo hena tɔtrɔwo dzi kpɔkpɔ kple asiɖeɖe le wo ŋu ne wole ʋuʋum tso LTR yi RTL. Eɖea mɔ na mí hã be míatu Bootstrap ƒe tɔtrɔ eve tso codebase ɖeka me.
-
Evelia, míetrɔ ŋkɔ na mɔfiame ƒe klass ʋɛ aɖewo be míaxɔ nɔnɔme siwo me susu le ƒe mɔnu. Mia dometɔ akpa gãtɔ wɔ nu kple nɔnɔme siwo me susu le xoxo akpe ɖe míaƒe flex utilities ŋu—woxɔa mɔfiame ƒe nɔnɔmewo abe
left
kple esiworight
doa dzidzɔ nastart
kpleend
. Ema na be klass ƒe ŋkɔwo kple asixɔxɔwo sɔ na LTR kple RTL gazazã aɖeke manɔmee.
Le kpɔɖeŋu me, le esi teƒe be nàzã .ml-3
for .margin-left
.ms-3
Dɔwɔwɔ kple RTL, to míaƒe dzɔtsoƒe Sass alo CSS si woƒo ƒu dzi, mele be wòato vovo boo tso míaƒe LTR gbãtɔ gbɔ o ke hã.
Trɔ asi le eŋu tso dzɔtsoƒe
When it comes to customization , mɔ si wodi wue nye be woawɔ tɔtrɔwo, anyigbatatawo, kple mixins ŋudɔ. Mɔnu sia wɔa dɔ ɖekae na RTL, nenye be wowɔ dɔ le eŋu le megbe tso faɛl siwo woƒo ƒu me gɔ̃ hã, akpe na alesi RTLCSS wɔa dɔe .
RTL ƒe asixɔxɔ siwo wowɔ ɖe ɖoɖo nu
Zã RTLCSS asixɔxɔ mɔfiamewo , àteŋu ana tɔtrɔɖenu ƒe dodoɖeŋgɔ nanye asixɔxɔ bubu na RTL. Le kpɔɖeŋu me, be nàɖe kpekpeme dzi akpɔtɔ na $font-weight-bold
le codebase bliboa me la, àteŋu azã /*rtl: {value}*/
nyagɔmeɖegbalẽa:
$font-weight-bold: 700 #{/* rtl:600 */} !default;
Nusi ado tso eme na esiawo na míaƒe CSS kple RTL CSS gbãtɔ:
/* bootstrap.css */
dt {
font-weight: 700 /* rtl:600 */;
}
/* bootstrap.rtl.css */
dt {
font-weight: 600;
}
Ŋɔŋlɔdzesiwo ƒe ƒuƒoƒo bubu
Le nɔnɔme si me nèle ŋɔŋlɔdzesi tɔxɛ aɖe zãm la, nyae be menye ŋɔŋlɔdzesiwo katãe doa alɔ ŋɔŋlɔdzesi siwo menye Latingbe tɔ o. Be nàtrɔ tso Pan-European dzi ayi Arabic ƒomea me la, ɖewohĩ ahiã be nàzã /*rtl:insert: {value}*/
le wò ŋɔŋlɔdzesiwo ƒe ƒuƒoƒo me atsɔ atrɔ asi le ŋɔŋlɔdzesiwo ƒe ƒomewo ƒe ŋkɔwo ŋu.
Le kpɔɖeŋu me, ne èdi be yeatrɔ tso Helvetica Neue Webfont
na LTR dzi ayi Helvetica Neue Arabic
na RTL la, wò Sass kɔda la anɔ ale:
$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 kple RTL le ɣeyiɣi ɖeka me
Èhiã LTR kple RTL siaa le axa ɖeka dzia? Akpe na RTLCSS String Maps , esia le tẽ ŋutɔ. Kpe wò @import
s kple klass, eye nàɖo ŋkɔyɔyɔ ƒe se si wowɔ ɖe ɖoɖo nu na 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*/
Ne èwɔ Sass emegbe RTLCSS vɔ la, tiatia ɖesiaɖe le wò CSS faɛlwo me anye do ŋgɔ na .ltr
, eye .rtl
na RTL faɛlwo. Fifia ète ŋu zãa faɛl eveawo siaa le axa ɖeka dzi, eye ɖeko nàzã .ltr
alo .rtl
le wò akpawo ƒe agbalẽ xatsaxatsawo dzi atsɔ azã mɔfiame ɖeka alo evelia.
Edge cases kple seɖoƒe siwo wonya
Togbɔ be gɔmesese le mɔnu sia ŋu hã la, taflatse lé ŋku ɖe nusiwo gbɔna ŋu:
- Ne èle tɔtrɔm
.ltr
kple.rtl
, kpɔ egbɔ be yetsɔ kpe ɖe eŋudir
kplelang
nɔnɔmewo ɖe wo nu. - Fail eveawo siaa tsɔtsɔ de eme ate ŋu anye dɔwɔwɔ ƒe kuxi ŋutɔŋutɔ: bu dɔwɔwɔ nyuie aɖewo ŋu , eye ɖewohĩ dze agbagba nàda faɛl mawo dometɔ ɖeka le ɣeyiɣi ɖeka me .
- Nesting atsyãwo mɔ sia axe mɔ na míaƒe
form-validation-state()
mixin be wòagawɔ dɔ abe alesi woɖoe ene o, eyata abia be nàtrɔ asi le eŋu vie le ɖokuiwò si. Kpɔ #31223 .
Abolomegba ƒe nugoe la
Abolomegba ƒe mamamɔ̃a koe nye nya si hiã eya ŋutɔ ƒe tɔtrɔ yeye ŋutɔ— si nye $breadcrumb-divider-flipped
—defaulting to $breadcrumb-divider
.