RTL

Aprann kijan pou pèmèt sipò pou tèks adwat-a-gòch nan Bootstrap atravè layout, konpozan ak sèvis piblik nou yo.

Nan paj sa a

Jwenn abitye

Nou rekòmande pou w abitye ak Bootstrap anvan lè w li paj Entwodiksyon pou Kòmanse . Yon fwa ou te kouri atravè li, kontinye li isit la pou kòman yo pèmèt RTL.

Ou ka vle tou li sou pwojè RTLCSS la , kòm li pouvwa apwòch nou an nan RTL.

Karakteristik eksperimantal

Karakteristik RTL la toujou eksperimantal epi li pral pwobableman evolye dapre fidbak itilizatè yo. Ou ta wè yon bagay oswa ou gen yon amelyorasyon sijere? Louvri yon pwoblèm , nou ta renmen jwenn lide ou.

HTML obligatwa

Gen de kondisyon strik pou pèmèt RTL nan paj Bootstrap ki mache ak pisans.

Mete dir="rtl"sou <html>eleman an.
langAjoute yon atribi apwopriye , tankou lang="ar", sou <html>eleman an.

Soti nan la, ou pral bezwen mete yon vèsyon RTL nan CSS nou an. Pou egzanp, isit la nan stylesheet pou CSS konpile ak minified nou an ak RTL pèmèt:

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

Starter modèl

Ou ka wè kondisyon ki anwo yo reflete nan modèl RTL pou kòmanse modifye sa a.

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

Egzanp RTL

Kòmanse ak youn nan plizyè egzanp RTL nou yo .

Apwòch

Apwòch nou pou konstwi sipò RTL nan Bootstrap vini ak de desizyon enpòtan ki gen enpak sou fason nou ekri ak itilize CSS nou an:

Premyèman, nou te deside bati li ak pwojè RTLCSS la. Sa a ban nou kèk karakteristik pwisan pou jere chanjman ak overrides lè w ap deplase soti nan LTR nan RTL. Li pèmèt nou tou bati de vèsyon Bootstrap soti nan yon baz kod.
Dezyèmman, nou te chanje non yon ti ponyen nan klas direksyon yo adopte yon apwòch pwopriyete lojik. Pifò nan nou te deja kominike ak pwopriyete lojik gras a sèvis piblik flex nou yo-yo ranplase pwopriyete direksyon tankou leftak rightan favè startak end. Sa fè non klas yo ak valè yo apwopriye pou LTR ak RTL san okenn anlè.

Pa egzanp, olye pou yo .ml-3pou margin-left, sèvi ak .ms-3.

Travay ak RTL, atravè sous Sass nou an oswa konpile CSS, pa ta dwe anpil diferan de LTR default nou an.

Customize soti nan sous

Lè li rive personnalisation , fason pi pito a se pran avantaj de varyab, kat, ak mixin. Apwòch sa a ap travay menm jan an pou RTL, menm si li nan post-trete nan dosye yo konpile, gras a ki jan RTLCSS travay .

Custom RTL valè

Sèvi ak direktiv valè RTLCSS , ou ka fè yon pwodiksyon varyab yon valè diferan pou RTL. Pou egzanp, pou diminye pwa $font-weight-boldnan tout kodbaz la, ou ka itilize /*rtl: {value}*/sentaks la:

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

Ki ta bay sa ki annapre yo pou CSS default ak RTL CSS nou an:

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

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

Pile font altènatif

Nan ka w ap itilize yon polis koutim, ou dwe konnen ke se pa tout polis ki sipòte alfabè ki pa Latin nan. Pou chanje soti nan fanmi Pan-Ewopeyen an Arab, ou ka bezwen itilize /*rtl:insert: {value}*/nan pil font ou a modifye non yo nan fanmi polis yo.

Pou egzanp, pou chanje soti nan Helvetica Neuefont pou LTR Helvetica Neue Arabicpou RTL, kòd Sass ou a ta ka sanble sa a:

$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 ak RTL an menm tan

Bezwen tou de LTR ak RTL sou menm paj la? Mèsi a RTLCSS String Maps , sa a se trè senp. Anvlope @imports ou yo ak yon klas, epi mete yon règ chanje non koutim pou 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*/

Apre w fin kouri Sass ak RTLCSS, chak seleksyon nan fichye CSS ou yo pral ajoute .ltr, epi .rtlpou fichye RTL yo. Koulye a, ou kapab sèvi ak tou de dosye sou menm paj la, epi tou senpleman itilize .ltroswa .rtlsou anbalaj konpozan ou yo pou itilize youn oswa lòt direksyon.

Ka Edge ak limit li te ye

Pandan ke apwòch sa a se konprann, tanpri peye atansyon sou bagay sa yo:

Lè chanje .ltrak .rtl, asire w ke ou ajoute dirak langatribi kòmsadwa.
Chaje tou de fichye yo kapab yon vrè pwoblèm pèfòmans: konsidere kèk optimize , e petèt eseye chaje youn nan fichye sa yo asynchrone .
Styles nidifikasyon fason sa a ap anpeche form-validation-state()mixin nou an soti nan travay jan sa vle di, kidonk mande pou ou ajiste li yon ti jan pou kont ou. Gade #31223 .

Separatè pen an se sèl ka ki mande pwòp nouvo varyab li yo, sètadi $breadcrumb-divider-flipped, default nan $breadcrumb-divider.

RTL