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.

Le axa sia dzi

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ɔ langnɔnɔme si sɔ, abe lang="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-OXTEbYDqaX2ZY/BOaZV/yFGChYHtrXH2nyXJ372n2Y8abBhrqacCEe+3qhSHtLjy" 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-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 ƒ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 leftkple esiwo rightdoa dzidzɔ na startkple end. 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-3for .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-boldle 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, be nàtrɔ tso Helvetica Neueŋɔŋlɔdzesi na LTR dzi ayi Helvetica Neue Arabicna RTL la, wò Sass kɔda ateŋu adze 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ò @imports 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 .rtlna RTL faɛlwo. Fifia ète ŋu zãa faɛl eveawo siaa le axa ɖeka dzi, eye ɖeko nàzã .ltralo .rtlle 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 .ltrkple .rtl, kpɔ egbɔ be yetsɔ kpe ɖe eŋu dirkple langnɔ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 mamamɔ̃a koe nye nya si abia be eya ŋutɔ ƒe tɔtrɔ yeye ŋutɔ— si nye $breadcrumb-divider-flipped—eɖoe be wòaɖo $breadcrumb-divider.

RTL