in English

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ɔ.

Nin ɲɛ in kan

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-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" 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-+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 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 sirako-kalanso damadɔ tɔgɔ caman Tà walasa ka logical properties (nafolo-falen-falen) 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ɔ leftani rightin favour startani end. 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-3for 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 sɛgɛsɛgɛli la, kartiw, ani mixins. Nin fɛɛrɛ in bɛ baara kɛ kelen ye 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-boldthroughout 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ɛ

Ni i bɛ baara kɛ ni sɛbɛnnibolo ye min bɛ kɛ ka kɛɲɛ ni i yɛrɛ sago ye, i k’a dɔn ko sɛbɛnnibolo bɛɛ tɛ sɛbɛnnibolo min tɛ latigɛkan ye, o dɛmɛ. Walasa ka bɔ Pan-Erɔpukan na ka taa Arabukan denbaya la, i bɛ se ka baara kɛ ni /*rtl:insert: {value}*/i ka sɛbɛnnibolow kulu ye walasa ka sɛbɛnnibolo denbayaw tɔgɔw sɛmɛntiya.

Misali la, walasa ka wuli ka bɔ Helvetica Neue Webfontfor LTR la ka taa Helvetica Neue Arabicfor RTL la, i ka Sass code bɛ i n’a fɔ nin cogo in na:

$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 ni RTL bɛ waati kelen na

Aw mago bɛ LTR ni RTL fila bɛɛ la ɲɛ kelen kan wa? Barika la RTLCSS String Maps , nin ye ko tilennen ye kosɛbɛ. Aw ye aw ka @imports siri ni kalasi ye, ka tɔgɔdacogo sariya sigi RTLCSS kama:

/* 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*/

Sass baara kɔfɛ o kɔfɛ RTLCSS, sugandili kelen-kelen bɛɛ min bɛ i ka CSS filew kɔnɔ, o bɛna kɔn .ltr, ani .rtlRTL filew kama. Sisan i bɛ Se ka baara Kɛ ni dosiye fla bɛɛ ye ɲɛ kelen kan, ani ka baara Kɛ dɔrɔn .ltrwalima .rtli ka components wrappers kan walasa ka baara Kɛ ni sira kelen walima sira wɛrɛ ye.

Edge cases ani dantigɛli dɔntaw

Hali ni o kɛcogo bɛ faamuya, aw ye aw janto nin ko ninnu na:

Ni aw bɛ sɛgɛsɛgɛli .ltrkɛ ani .rtl, aw ye aw jija ka fara a kan dirani ka fɛn dɔw fara a kan langka kɛɲɛ n’o ye.
O dosiye fila bɛɛ doni bɛ se ka kɛ baarakɛcogo gɛlɛya lakika ye: aw ye jateminɛ kɛ ɲɛnabɔli dɔw la , ani laala aw k’a ɲini k’o dosiyew dɔ doni cogo la min tɛ kelen ye .
Nesting styles nin cogo in bɛna an ka form-validation-state()mixin bali ka baara Kɛ i n'a fɔ a laɲininen dòn cogo min na, o cogo la a bɛ ɲini i fɛ i ka tweak dɔɔnin i yɛrɛ fɛ. Aw ye #31223 lajɛ .

Buru faranfasibaga ye ko kelen ye min bɛ a yɛrɛ ka fɛn kura caman de wajibiya— n’o ye $breadcrumb-divider-flipped—ka defaulting to $breadcrumb-divider.