RTL

Tgħallem kif tippermetti l-appoġġ għal test minn-lemin għax-xellug f'Bootstrap fit-tqassim, il-komponenti u l-utilitajiet tagħna.

Fuq din il-paġna

Kun familjari

Nirrakkomandaw li l-ewwel wieħed jiffamiljarizza ruħu ma' Bootstrap billi taqra l- paġna ta' Introduzzjoni ta' Nibdew . Ladarba inti tkun għaddejja minnha, kompli aqra hawn għal kif tista 'tippermetti RTL.

Inti tista 'wkoll trid taqra dwar il-proġett RTLCSS , peress li dan isaħħaħ l-approċċ tagħna għall-RTL.

Karatteristika sperimentali

Il-karatteristika RTL għadha sperimentali u probabbilment se tevolvi skont ir-rispons tal-utent. Insibu xi ħaġa jew għandek xi titjib x'jissuġġerixxi? Iftaħ kwistjoni , nixtiequ niksbu l-għarfien tiegħek.

HTML meħtieġ

Hemm żewġ rekwiżiti stretti għall-abilitazzjoni ta 'RTL fil-paġni li jaħdmu bl-Bootstrap.

Issettja dir="rtl"fuq l- <html>element.
Żid langattribut xieraq, bħal lang="ar", fuq l- <html>element.

Minn hemm, ikollok bżonn tinkludi verżjoni RTL tas-CSS tagħna. Pereżempju, hawn l-stylesheet għas-CSS ikkumpilati u mminifikati tagħna b'RTL attivat:

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

Mudell tal-bidu

Tista 'tara r-rekwiżiti ta' hawn fuq riflessi f'dan il-mudell tal-istartjar RTL modifikat.

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

Eżempji RTL

Ibda b'wieħed mill-bosta eżempji tagħna RTL .

Approċċ

L-approċċ tagħna biex nibnu l-appoġġ RTL f'Bootstrap jiġi b'żewġ deċiżjonijiet importanti li għandhom impatt fuq kif niktbu u nużaw is-CSS tagħna:

L-ewwel, iddeċidejna li nibnuha bil- proġett RTLCSS . Dan jagħtina xi karatteristiċi b'saħħithom għall-ġestjoni tal-bidliet u l-overrides meta nimxu minn LTR għal RTL. Jippermettilna wkoll li nibnu żewġ verżjonijiet ta 'Bootstrap minn codebase wieħed.
It-tieni, semmiejna numru żgħir ta 'klassijiet direzzjonali biex jadottaw approċċ ta' proprjetajiet loġiċi. Ħafna minnkom diġà interazzjonijtu ma 'proprjetajiet loġiċi grazzi għall-utilitajiet flex tagħna—jissostitwixxu proprjetajiet ta' direzzjoni bħal leftu rightfavur startu end. Dan jagħmel l-ismijiet u l-valuri tal-klassi xierqa għal LTR u RTL mingħajr ebda overhead.

Per eżempju, minflok .ml-3għal margin-left, uża .ms-3.

Il-ħidma ma 'RTL, permezz tas-sors tagħna Sass jew CSS ikkumpilati, m'għandhiex tkun ferm differenti mill-LTR default tagħna għalkemm.

Ippersonalizza mis-sors

Meta niġu għall -adattament , il-mod preferut huwa li tieħu vantaġġ minn varjabbli, mapep, u mixins. Dan l-approċċ jaħdem l-istess għal RTL, anki jekk huwa pproċessat wara mill-fajls ikkumpilati, grazzi għal kif jaħdem RTLCSS .

Valuri RTL personalizzati

Bl -użu tad-direttivi tal- valur RTLCSS , tista' tagħmel output varjabbli valur differenti għal RTL. Pereżempju, biex tnaqqas il-piż għal $font-weight-boldmadwar il-codebase, tista' tuża s- /*rtl: {value}*/sintassi:

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

Li joħroġ għal dan li ġej għas-CSS u RTL CSS default tagħna:

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

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

Munzell tat-tipa alternattiva

Fil-każ li qed tuża font apposta, kun konxju li mhux il-fonts kollha jappoġġjaw l-alfabett mhux Latin. Biex taqleb minn familja Pan-Ewropea għal familja Għarbija, jista' jkollok bżonn tuża /*rtl:insert: {value}*/fil-munzell tat-tipa tiegħek biex timmodifika l-ismijiet tal-familji tat-tipa.

Pereżempju, biex taqleb minn Helvetica Neuefont għal LTR għal Helvetica Neue Arabicgħal RTL, il-kodiċi Sass tiegħek jista' jidher bħal dan:

$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 u RTL fl-istess ħin

Għandek bżonn kemm LTR kif ukoll RTL fuq l-istess paġna? Grazzi għal RTLCSS String Maps , dan huwa pjuttost sempliċi. Kebbeb l- @importi tiegħek bi klassi, u waqqaf regola personalizzata b'isem ġdid għal 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*/

Wara li tħaddem Sass imbagħad RTLCSS, kull selettur fil-fajls CSS tiegħek se jkun prepended minn .ltr, u .rtlgħall-fajls RTL. Issa int kapaċi tuża ż-żewġ fajls fuq l-istess paġna, u sempliċement tuża .ltrjew .rtlfuq it-tgeżwir tal-komponenti tiegħek biex tuża direzzjoni waħda jew oħra.

Każijiet tat-tarf u limitazzjonijiet magħrufa

Filwaqt li dan l-approċċ jinftiehem, jekk jogħġbok agħti attenzjoni għal dan li ġej:

Meta taqleb .ltru .rtl, kun żgur li żżid diru langattributi kif xieraq.
It-tagħbija taż-żewġ fajls tista 'tkun ostakolu reali fil-prestazzjoni: ikkunsidra xi ottimizzazzjoni , u forsi tipprova tgħabbi wieħed minn dawk il-fajls b'mod asinkroniku .
L-istili tat-tbejjit b'dan il-mod se jipprevjenu l- form-validation-state()mixin tagħna milli jaħdmu kif maħsub, u għalhekk jeħtieġu li inti tweak ftit waħdek. Ara #31223 .

Is- separatur tal-breadcrumb huwa l-uniku każ li jirrikjedi l-varjabbli ġdid fjamant tiegħu stess— jiġifieri $breadcrumb-divider-flipped—default għal $breadcrumb-divider.

RTL