RTL

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

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-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" 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-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" 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-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 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-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" 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 orukọ awọn idile fonti pada.

Fun apẹẹrẹ, lati yipada lati Helvetica Neue Webfontfun LTR si Helvetica Neue Arabicfun RTL, koodu Sass rẹ 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ọ tuntun tirẹ — eyun $breadcrumb-divider-flipped— aiyipada si $breadcrumb-divider.

RTL