RTL

Wige uburyo washoboza gushyigikira inyandiko iburyo-ibumoso muri Bootstrap murwego rwacu, ibice, hamwe nibikorwa.

Kuriyi page

Menya neza

Turasaba ko tumenyera Bootstrap ubanza gusoma ukoresheje urupapuro rwintangiriro . Umaze kubinyuramo, komeza usome hano uburyo ushobora gukora RTL.

Urashobora kandi gushaka gusoma kumushinga wa RTLCSS , kuko iha imbaraga inzira zacu kuri RTL.

Ikiranga ubushakashatsi

Ikiranga RTL kiracyari igeragezwa kandi birashoboka ko kizahinduka ukurikije ibitekerezo byabakoresha. Wabonye ikintu cyangwa ufite iterambere ryo gutanga ibitekerezo? Fungura ikibazo , twifuza kubona ubushishozi bwawe.

HTML isabwa

Hano haribintu bibiri bisabwa kugirango ushoboze RTL mumapaji akoreshwa na Bootstrap.

Shyira dir="rtl"ku <html>kintu.
Ongeramo langikiranga gikwiye, nka lang="ar", kuri <html>element.

Kuva aho, uzakenera gushyiramo verisiyo ya RTL ya CSS yacu. Kurugero, dore urupapuro rwerekana uburyo CSS yakusanyije kandi yagabanijwe hamwe na RTL ishoboye:

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

Inyandikorugero

Urashobora kubona ibisabwa byavuzwe haruguru bigaragarira muri ubu buryo bwahinduwe bwa RTL.

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

Ingero za RTL

Tangira hamwe nimwe murugero rwacu rwa RTL .

Inzira

Uburyo bwacu bwo kubaka inkunga ya RTL muri Bootstrap buzanye ibyemezo bibiri byingenzi bigira ingaruka kuburyo twandika no gukoresha CSS yacu:

Ubwa mbere, twahisemo kuyubaka n'umushinga RTLCSS . Ibi biduha ibintu bimwe bikomeye byo gucunga impinduka no kurenga mugihe wimutse uva LTR ujya RTL. Iratwemerera kandi kubaka verisiyo ebyiri za Bootstrap kuva codebase imwe.
Icya kabiri, twahinduye amazina y'ibyiciro byerekezo kugirango twemeze ibintu byumvikana. Benshi murimwe mumaze gukorana nibintu byumvikana tubikesha ibikorwa byacu bya flex-basimbuza icyerekezo cyerekezo nka leftkandi rightmuburyo bwiza startkandi end. Ibyo bituma amazina yishuri nindangagaciro bikwiranye na LTR na RTL nta hejuru.

Kurugero, aho .ml-3kugirango margin-left, koresha .ms-3.

Gukorana na RTL, binyuze mumasoko yacu Sass cyangwa yakusanyije CSS, ntibigomba gutandukana cyane na LTR isanzwe nubwo.

Hindura isoko

Mugihe cyo kwihindura , inzira yatoranijwe nugukoresha inyungu zimpinduka, amakarita, hamwe nuruvange. Ubu buryo bukora kimwe kuri RTL, kabone niyo byakorwa nyuma yama dosiye yakozwe, tubikesha uburyo RTLCSS ikora .

Koresha indangagaciro za RTL

Ukoresheje amabwiriza yagaciro ya RTLCSS , urashobora gukora ibintu bihinduka bisohoka bitandukanye na RTL. Kurugero, kugirango ugabanye uburemere kuri $font-weight-boldcodebase yose, urashobora gukoresha /*rtl: {value}*/syntax:

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

Nibishobora gusohoka mubikurikira kuri CSS idasanzwe na RTL CSS:

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

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

Ubundi buryo bw'imyandikire

Mugihe ukoresha imyandikire yihariye, menya ko imyandikire yose idashyigikira inyuguti zitari ikilatini. Kugirango uhindure Pan-Burayi ujye mumuryango wabarabu, urashobora gukenera gukoresha /*rtl:insert: {value}*/mumyandikire yawe kugirango uhindure amazina yimiryango yimyandikire.

Kurugero, kugirango uhindure Helvetica Neueimyandikire ya LTR ujya Helvetica Neue Arabickuri RTL, code yawe ya Sass irashobora kumera gutya:

$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 icyarimwe

Ukeneye LTR na RTL byombi kurupapuro rumwe? Ndashimira Ikarita ya RTLCSS Ikarita , ibi biroroshye. Kuzuza @imports yawe hamwe nishuri, hanyuma ushireho itegeko ryo guhindura izina rya 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*/

Nyuma yo gukora Sass noneho RTLCSS, buriwatoranije muri dosiye yawe ya CSS azategurwa na .ltr, hamwe na .rtldosiye ya RTL. Noneho urashobora gukoresha dosiye zombi kurupapuro rumwe, hanyuma ukoreshe gusa .ltrcyangwa .rtlkubice bipfunyika kugirango ukoreshe kimwe cyangwa ikindi cyerekezo.

Imanza zimpande nimbibi zizwi

Mugihe ubu buryo bwumvikana, nyamuneka witondere ibi bikurikira:

Mugihe uhindura .ltrkandi .rtl, menya neza ko wongeyeho dirnibiranga langukurikije.
Gupakurura amadosiye yombi birashobora kuba imikorere yukuri: tekereza kubintu byiza , kandi wenda ugerageze gupakira imwe muriyo dosiye .
Imyitozo yo guturamo muri ubu buryo form-validation-state()izarinda mixin yacu gukora nkuko yabigenewe, bityo bigusaba kubihindura gato wenyine. Reba # 31223 .

Gutandukanya umugati niwo rubanza rwonyine rusaba ibintu bishya-bishya - aribyo $breadcrumb-divider-flipped-bisanzwe kuri $breadcrumb-divider.

RTL