RTL

Kọ ẹkọ bii o ṣe le mu atilẹyin ṣiṣẹ fun ọrọ ọtun-si-osi ni Bootstrap kọja ifilelẹ, awọn paati, ati awọn ohun elo wa.

Lori iwe yi

Gba faramọ

A ṣeduro nini faramọ pẹlu Bootstrap ni akọkọ nipa kika nipasẹ oju-iwe Ifaara Bibẹrẹ wa . Ni kete ti o ba ti ṣiṣẹ nipasẹ rẹ, tẹsiwaju kika nibi fun bii o ṣe le mu RTL ṣiṣẹ.

O le tun fẹ lati ka soke lori RTLCSS ise agbese , bi o ti ṣe agbara ọna wa si RTL.

Esiperimenta ẹya-ara

Ẹya RTL tun jẹ esiperimenta ati pe yoo ṣee ṣe ni ibamu si awọn esi olumulo. Ti ri nkankan tabi ni ilọsiwaju lati daba? Ṣii ọrọ kan , a yoo nifẹ lati gba awọn oye rẹ.

HTML ti a beere

Awọn ibeere ti o muna meji wa fun ṣiṣe RTL ni awọn oju-iwe ti o ni agbara Bootstrap.

Ṣeto dir="rtl"lori <html>eroja.
Ṣafikun ẹya ti o yẹ lang, bii lang="ar", lori <html>eroja.

Lati ibẹ, iwọ yoo nilo lati ni ẹya RTL ti CSS wa. Fun apẹẹrẹ, eyi ni iwe-ara fun akopọ wa ati CSS ti o dinku pẹlu RTL ṣiṣẹ:

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

Awoṣe ibẹrẹ

O le wo awọn ibeere ti o wa loke ti o farahan ninu awoṣe ibẹrẹ RTL ti a ṣe atunṣe.

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

Awọn apẹẹrẹ RTL

Bẹrẹ pẹlu ọkan ninu ọpọlọpọ awọn apẹẹrẹ RTL wa .

Ona

Ọna wa lati kọ atilẹyin RTL sinu Bootstrap wa pẹlu awọn ipinnu pataki meji ti o ni ipa bi a ṣe kọ ati lo CSS wa:

Ni akọkọ, a pinnu lati kọ pẹlu iṣẹ akanṣe RTLCSS . Eyi fun wa ni diẹ ninu awọn ẹya ti o lagbara fun ṣiṣakoso awọn ayipada ati awọn ipadasẹhin nigba gbigbe lati LTR si RTL. O tun gba wa laaye lati kọ awọn ẹya meji ti Bootstrap lati koodu koodu kan.
Ẹlẹẹkeji, a ti fun lorukọ mii awọn kilasi itọnisọna lati gba ọna awọn ohun-ini ọgbọn kan. Pupọ ninu yin ti ni ibaraenisepo pẹlu awọn ohun-ini ọgbọn ọpẹ si awọn ohun elo flex wa — wọn rọpo awọn ohun-ini itọsọna bii leftati rightni ojurere startati end. Iyẹn jẹ ki awọn orukọ kilasi ati awọn iye yẹ fun LTR ati RTL laisi ori eyikeyi.

Fun apẹẹrẹ, dipo .ml-3fun margin-left, lo .ms-3.

Nṣiṣẹ pẹlu RTL, nipasẹ orisun Sass wa tabi CSS ti a ṣajọ, ko yẹ ki o yatọ pupọ si LTR aiyipada wa botilẹjẹpe.

Ṣe akanṣe lati orisun

Nigbati o ba de si isọdi -ara , ọna ti o fẹ julọ ni lati lo anfani ti awọn oniyipada, maapu, ati awọn apopọ. Ọna yii n ṣiṣẹ kanna fun RTL, paapaa ti o ba jẹ ilana-ifiweranṣẹ lati awọn faili ti a ṣajọpọ, ọpẹ si bi RTLCSS ṣe n ṣiṣẹ .

Awọn iye RTL aṣa

Lilo awọn itọsọna iye RTLCSS , o le ṣe iṣelọpọ oniyipada ni iye ti o yatọ fun RTL. Fun apẹẹrẹ, lati dinku iwuwo fun $font-weight-boldjakejado codebase, o le lo /*rtl: {value}*/sintasi naa:

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

Ewo ni yoo jade si atẹle naa fun CSS aiyipada wa ati RTL CSS:

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

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

Yiyan font akopọ

Ninu ọran ti o nlo fonti aṣa, ṣe akiyesi pe kii ṣe gbogbo awọn nkọwe ṣe atilẹyin alfabeti ti kii ṣe Latin. Lati yipada lati Pan-European si idile Larubawa, o le nilo lati lo /*rtl:insert: {value}*/ninu akopọ fonti rẹ lati yi awọn orukọ ti awọn idile fonti pada.

Fun apẹẹrẹ, lati yipada lati Helvetica Neuefonti fun LTR si Helvetica Neue Arabicfun RTL, koodu Sass rẹ le dabi eyi:

$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 ati RTL ni akoko kanna

Ṣe o nilo mejeeji LTR ati RTL ni oju-iwe kanna? Ṣeun si Awọn maapu okun RTLCSS , eyi jẹ taara taara. Pa @imports rẹ pẹlu kilasi kan, ki o ṣeto ofin fun atunrukọ aṣa fun 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*/

Lẹhin ṣiṣe Sass lẹhinna RTLCSS, oluyan kọọkan ninu awọn faili CSS rẹ yoo jẹ ti tẹlẹ nipasẹ .ltr, ati .rtlfun awọn faili RTL. Bayi o ni anfani lati lo awọn faili mejeeji ni oju-iwe kanna, ati nirọrun lo .ltrtabi .rtllori awọn ohun elo ohun elo rẹ lati lo ọkan tabi itọsọna miiran.

Awọn ọran eti ati awọn idiwọn ti a mọ

Lakoko ti ọna yii jẹ oye, jọwọ fiyesi si atẹle naa:

Nigbati o ba yipada .ltrati .rtl, rii daju pe o ṣafikun dirati langawọn abuda ni ibamu.
Ikojọpọ awọn faili mejeeji le jẹ igo iṣẹ ṣiṣe gidi: ro diẹ ninu iṣapeye , ati boya gbiyanju lati kojọpọ ọkan ninu awọn faili yẹn ni asynchronously .
Awọn ara itẹ-ẹiyẹ ni ọna yii yoo ṣe idiwọ form-validation-state()idapọ wa lati ṣiṣẹ bi a ti pinnu, nitorinaa nilo ki o tweak diẹ nipasẹ ararẹ. Wo # 31223 .

Iyapa akara akara jẹ ọran nikan ti o nilo oniyipada iyasọtọ-titun tirẹ — eyun — $breadcrumb-divider-flippedaiyipada si $breadcrumb-divider.

RTL