RTL

Mụta otu esi eme nkwado maka ederede aka nri gaa n'aka ekpe na Bootstrap n'ofe okirikiri nhọrọ ukwuu anyị, akụrụngwa na akụrụngwa anyị.

Na ibe a

Mara nke ọma

Anyị na-akwado ibu ụzọ mara Bootstrap site n'ịgụ site na ibe mmalite mmalite anyị . Ozugbo ịmechara ya, gaa n'ihu na-agụ ebe a maka otu esi eme RTL.

Ị nwekwara ike ịchọrọ ịgụ na RTLCSS oru ngo , ebe ọ na-eme ka ụzọ anyị si aga RTL.

Njirimara nnwale

Njirimara RTL ka na- anwale ma eleghị anya ọ ga-etolite dịka nzaghachi onye ọrụ si dị. Ahụla ihe ma ọ bụ nwee mmelite ịtụ aro? Mepee mbipụta , ọ ga-amasị anyị ịnweta nghọta gị.

HTML achọrọ

Enwere ihe abụọ siri ike chọrọ iji mee ka RTL nwee ike na ibe Bootstrap kwadoro.

Tọọ dir="rtl"na <html>mmewere.
Tinye langàgwà kwesịrị ekwesị, dị ka lang="ar", na <html>mmewere.

Site ebe ahụ, ị ga-etinyerịrị ụdị RTL nke CSS anyị. Dịka ọmụmaatụ, nke a bụ ụdị mpempe akwụkwọ maka CSS anyị achịkọtara yana obere nke ejiri RTL nwee ike:

<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">

template mmalite

Ị nwere ike ịhụ ihe ndị a chọrọ n'elu ka egosipụtara na ndebiri mmalite RTL a gbanwere.

<!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>

Ọmụmaatụ RTL

Malite na otu n'ime ọtụtụ ihe atụ RTL anyị .

Ụzọ

Ụzọ anyị si ewulite nkwado RTL na Bootstrap na-abịa na mkpebi abụọ dị mkpa na-emetụta otu anyị si ede na iji CSS anyị:

Nke mbụ, anyị kpebiri iji ọrụ RTLCSS wuo ya. Nke a na-enye anyị ụfọdụ atụmatụ dị ike maka ijikwa mgbanwe na nkwụsị mgbe esi na LTR gaa RTL. Ọ na-enyekwa anyị ohere iwulite ụdị Bootstrap abụọ site na otu codebase.
Nke abụọ, anyị akpọgharịrị klaasị ntụzịaka ole na ole ka ha wee nwee usoro ihe eji emepụta ezi uche. Ọtụtụ n'ime unu ejirila ihe ezi uche meekọrịta ihe n'ihi ngwa ngwa anyị na-agbanwe agbanwe-ha na-edochi njirimara ntụziaka dị ka leftna rightihu ọma startna end. Nke ahụ na-eme ka aha klas na ụkpụrụ dabara adaba maka LTR na RTL na-enweghị isi ọ bụla.

Dịka ọmụmaatụ, kama .ml-3maka margin-left, jiri .ms-3.

Ịrụ ọrụ na RTL, site na isi iyi anyị Sass ma ọ bụ CSS chịkọtara, ekwesịghị ịdị iche na LTR ndabara anyị.

Hazie site na isi mmalite

Mgbe a bịara na nhazi , ụzọ kachasị mma bụ iji uru nke mgbanwe, maapụ, na mixins. Ụzọ a na-arụ ọrụ otu ihe ahụ maka RTL, ọ bụrụgodị na a na-edozi ya site na faịlụ ndị achịkọtara, ekele maka otú RTLCSS si arụ ọrụ .

Ụkpụrụ RTL omenala

N'iji ntuziaka uru RTLCSS , ị nwere ike mee mmepụta mgbanwe ka ọ bụrụ uru dị iche maka RTL. Dịka ọmụmaatụ, iji belata ibu maka $font-weight-boldkoodu codebase niile, ịnwere ike iji /*rtl: {value}*/syntax:

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

Kedu nke ga-esi na nke a pụta maka CSS anyị na RTL CSS:

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

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

Nchịkọta font ọzọ

Ọ bụrụ na ị na-eji mkpụrụedemede omenala, mara na ọ bụghị mkpụrụedemede niile na-akwado mkpụrụedemede Latin na-abụghị nke Latịn. Ka ịgbanwee site na Pan-European gaa na ezinụlọ Arabik, ị nwere ike ịdị mkpa iji /*rtl:insert: {value}*/na nchịkọta font gị iji gbanwee aha ezinụlọ font.

Dịka ọmụmaatụ, ka ịgbanwee si Helvetica Neuefont maka LTR gaa Helvetica Neue Arabicmaka RTL, koodu Sass gị nwere ike ịdị ka nke a:

$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 na RTL n'otu oge

Achọrọ ma LTR na RTL n'otu ibe? Daalụ maapụ RTLCSS eriri , nke a mara mma kwụ ọtọ. Kechie @imports gị na klaasị, ma tọọ ụkpụrụ aha aha maka 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*/

Ka emechara Sass wee RTLCSS, onye ọ bụla nhọpụta na faịlụ CSS gị ga-akwado ya site na .ltr, yana .rtlmaka faịlụ RTL. Ugbu a ị nwere ike iji faịlụ abụọ ahụ n'otu ibe, wee jiri naanị .ltrma ọ bụ .rtlna ihe mkpuchi akụrụngwa gị iji otu ma ọ bụ ụzọ ọzọ.

Ikpe ikpe na njedebe ama ama

Ọ bụ ezie na usoro a bụ ihe kwere nghọta, biko ṅaa ntị na ndị a:

Mgbe ị na-atụgharị .ltrna .rtl, hụ na ị gbakwunyere dirna langnjirimara ya.
Ịkwado faịlụ abụọ ahụ nwere ike ịbụ ezigbo nkwụsị nke arụmọrụ: tụlee ụfọdụ njikarịcha , ma eleghị anya gbalịa ịkwanye otu n'ime faịlụ ndị ahụ n'otu oge .
Ụdị agbụ a ga-egbochi form-validation-state()mixin anyị ịrụ ọrụ dịka e zubere, yabụ na-achọ ka ị gbanwee ya n'onwe gị. Lee # 31223 .

Ihe nkesa achịcha achịcha bụ naanị ikpe chọrọ mgbanwe ọhụrụ nke ya — ya bụ — na- $breadcrumb-divider-flippedadabara $breadcrumb-divider.

RTL