RTL

Dzidza maitiro ekugonesa rutsigiro rwemavara-kuruboshwe-kuruboshwe muBootstrap pane yedu dhizaini, zvikamu, uye zvekushandisa.

Pa peji ino

Ziva

Isu tinokurudzira kujairana neBootstrap kutanga nekuverenga kuburikidza yedu Getting Started Sumo peji . Kana wapedza mazviri, ramba uchiverenga pano kuti ugone kugonesa RTL.

Iwe unogona zvakare kuda kuverenga pamusoro peiyo RTLCSS chirongwa , sezvo ichipa simba maitiro edu kuRTL.

Experimental feature

Iyo RTL ficha ichiri kuyedza uye inogona kushanduka zvichienderana nemhinduro yemushandisi. Wakaona chimwe chinhu kana kuva nekuvandudzwa kwekukurudzira? Vhura imwe nyaya , tinoda kuwana ruzivo rwako.

Inodiwa HTML

Pane zviviri zvakaomesesa zvinodiwa pakugonesa RTL muBootstrap-powered mapeji.

Gadzirisa dir="rtl"pane <html>chinhu.
Wedzera langhunhu hwakakodzera, senge lang="ar", pane <html>chinhu.

Kubva ipapo, iwe uchafanirwa kusanganisira RTL vhezheni yeCSS yedu. Semuyenzaniso, heino shizha remaitiro edu akaunganidzwa uye akacheneswa CSS ine RTL inogoneswa:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" crossorigin="anonymous">

Starter template

Iwe unogona kuona izvo zviri pamusoro zvinodiwa zvinoratidzwa mune ino yakagadziridzwa RTL yekutanga template.

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

Tanga neimwe yemienzaniso yedu yakati wandei yeRTL .

Approach

Maitiro edu ekuvaka RTL rutsigiro muBootstrap inouya nesarudzo mbiri dzakakosha dzinobata manyorero atinoita nekushandisa CSS yedu:

Kutanga, takasarudza kuivaka nechirongwa cheRTLCSS . Izvi zvinotipa mamwe maficha ane simba ekugadzirisa shanduko uye anodarika kana uchifamba kubva kuLTR kuenda kuRTL. Izvo zvinotibvumirawo kuvaka maviri mavhezheni eBootstrap kubva kune imwe codebase.
Chechipiri, takapa zita remakirasi mashoma ekutungamira kuti atore inonzwisisika zvivakwa maitiro. Vazhinji vako vakatodyidzana neane musoro zvivakwa nekuda kwekushandisa kwedu kuchinjika-vanotsiva mafambiro ezvivakwa senge leftuye rightmukufarira startuye end. Izvo zvinoita kuti mazita ekirasi uye kukosha kwakakodzera LTR neRTL pasina chero pamusoro.

Somuenzaniso, panzvimbo ye .ml-3, margin-leftshandisa .ms-3.

Kushanda neRTL, kuburikidza neyedu sosi Sass kana yakaunganidzwa CSS, haifanire kunge yakasiyana zvakanyanya neyedu default LTR zvakadaro.

Gadzirisa kubva kunobva

Kana zvasvika pakugadzirisa , nzira inosarudzwa ndeye kutora mukana wezvinosiyana, mepu, uye musanganiswa. Iyi nzira inoshanda zvakafanana kuRTL, kunyangwe ikagadziriswa kubva kumafaira akaunganidzwa, nekuda kwemashandiro anoita RTLCSS .

Tsika RTL tsika

Uchishandisa RTLCSS kukosha dhairekitori , unogona kuita inoshanduka inoburitsa kukosha kwakasiyana kweRTL. Semuenzaniso, kuderedza huremu $font-weight-boldhwese codebase, unogona kushandisa /*rtl: {value}*/syntax:

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

Izvo zvaizoburitsa kune zvinotevera kune yedu default CSS uye RTL CSS:

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

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

Alternative font stack

Kana uri kushandisa font yetsika, ziva kuti haasi ese mafonti anotsigira asiri echiLatin alphabet. Kuti uchinje kubva kuPan-European kuenda kumhuri yechiArab, ungangoda kushandisa /*rtl:insert: {value}*/mune yako font stack kugadzirisa mazita emhando dzemhuri.

Semuenzaniso, kuchinja kubva Helvetica Neue WebfontkuLTR kuenda Helvetica Neue ArabickuRTL, yako Sass kodhi inotaridzika seizvi:

$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 uye RTL panguva imwe chete

Unoda zvese LTR neRTL pane imwechete peji? Kutenda kuRTLCSS String Mepu , izvi zvakatwasuka. Peta yako @importnekirasi, uye isa tsika yekutumidza zita reRTLCSS:

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

Mushure mekushandisa Sass ipapo RTLCSS, sarudzo yega yega mumafaira ako eCSS ichafanorongwa ne .ltr, uye .rtlnemafaira eRTL. Iye zvino wave kukwanisa kushandisa mafaera ese ari maviri pane imwechete peji, uye ingo shandisa .ltrkana .rtlpane ako ezvikamu wrappers kushandisa imwe kana imwe nzira.

Edge kesi uye zvinozivikanwa zvisingakwanisi

Kunyange nzira iyi ichinzwisisika, ndapota teerera kune zvinotevera:

Paunenge uchichinja .ltruye .rtl, ita shuwa kuti unowedzera diruye langhunhu zvinoenderana.
Kurodha mafaera ese ari maviri anogona kunge ari chaiwo ekuita bhodhoro: funga kumwe optimization , uye pamwe edza kurodha imwe yeaya mafaera asynchronously .
Nesting masitayipi neiyi nzira inodzivirira musanganiswa wedu form-validation-state()kubva kushanda sezvawakarongerwa, nekudaro zvinoda kuti uzvigadzirise zvishoma uri wega. Ona #31223 .

Iyo breadcrumb separator ndiyo chete nyaya inoda yayo nyowani nyowani-inoti $breadcrumb-divider-flipped-defaulting to $breadcrumb-divider.

RTL