Laktawan ti kangrunaan a linaon Laktawan ti docs navigation
in English

RTL nga

Ammuem no kasano nga ipalubos ti suporta para iti kannawan-agingga-kannigid a teksto iti Bootstrap iti ballasiw ti layout, paset, ken utilidadmi.

Iti daytoy a panid

Pamiliarkayo

Irekomendarmi a pamiliar nga umuna iti Bootstrap babaen ti panangbasa babaen ti panidmi iti Panangrugi nga Introduksion . Apaman a nakatarayka iti dayta, itultuloymo ti agbasa ditoy no kasano nga ipalubos ti RTL.

Mabalinmo pay a kayat ti basaen nga agpangato iti proyekto ti RTLCSS , ta daytoy ket mangpabileg ti wagasmi iti RTL.

Eksperimental a tampok

Ti tampok ti RTL ket eksperimental pay laeng ken nalabit nga agbaliwto segun ti feedback ti agar-aramat. Adda nakitam wenno adda isingasingmo a panagrang-ay? Open an issue , kayatmi a maala dagiti pannakaawatmo.

Masapul nga HTML

Adda dua a nainget a kasapulan para iti panangipalubos ti RTL kadagiti panid a paandaren ti Bootstrap.

  1. Itakderan dir="rtl"ti <html>elemento.
  2. Manginayon ti maitutop nga langattribute, kas ti lang="ar", iti <html>elemento.

Manipud sadiay, kasapulam nga iraman ti RTL a bersion ti CSS-tayo. Kas pagarigan, ditoy ti stylesheet para iti naurnong ken napabassit a CSStayo nga addaan iti RTL a napalubosan:

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

Plantilia ti pangrugian

Mabalinmo a kitaen dagiti kasapulan iti ngato a naiparangarang iti daytoy a nabaliwan a plantilia ti pangrugian ti RTL.

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

Dagiti pagarigan ti RTL

Mangrugi iti maysa kadagiti sumagmamano a pagarigantayo iti RTL .

Sungaden

Ti wagasmi a mangbangon ti suporta ti RTL iti Bootstrap ket umay nga addaan iti dua a napateg a pangngeddeng a mangapektar no kasano ti panagsurat ken panagusarmi iti CSS-mi:

  1. Umuna, inkeddengmi a bangonen dayta babaen ti proyekto nga RTLCSS . Daytoy ket mangted kadatayo kadagiti sumagmamano a nabileg a tampok para iti panagituray kadagiti panagbalbaliw ken dagiti panangibabawi no umakar manipud iti LTR aginggana iti RTL. Daytoy ket mangipalubos pay kadatayo a mangbangon ti dua a bersion ti Bootstrap manipud iti maysa a codebase.

  2. Maikadua, binaliwanmi ti nagan ti sumagmamano a klase ti direksion tapno mangadaptar iti lohikal a pamay-an dagiti tagikua. Kaaduan kadakayo ket nakilangen kadagiti lohikal a tagikua gapu kadagiti flex utilities-mi—suktanda dagiti tagikua ti direksion a kas leftken rightpabor startken end. Dayta ket mangaramid kadagiti nagan ti klase ken dagiti pateg a maitutop para iti LTR ken RTL nga awan ti ania man nga overhead.

Kas pagarigan, imbes a .ml-3para iti margin-left, usaren ti .ms-3.

Ti panagtrabaho iti RTL, babaen ti taudantayo a Sass wenno naurnong a CSS, ket saan koma a naiduma unay manipud iti default nga LTRtayo nupay kasta.

Ipasayaat manipud iti gubuayan

No maipapan iti panagpasayaat , ti kaykayat a wagas ket ti pananggundaway kadagiti variable, mapa, ken mixin. Daytoy nga asitgan ket agtrabaho a kapada para iti RTL, urayno daytoy ket post-proseso manipud kadagiti naurnong a papeles, gapu ti no kasano ti panagtrabaho ti RTLCSS .

Dagiti kostumbre a pateg ti RTL

Babaen ti panagusar kadagiti direktiba ti pateg ti RTLCSS , mabalinmo nga aramiden ti maysa a variable a rimmuar a naiduma a pateg para iti RTL. Kas pagarigan, tapno mapabassit ti dagsen para iti $font-weight-boldintero a codebase, mabalinmo nga usaren ti /*rtl: {value}*/sintaksis:

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

A mangiruar koma kadagiti sumaganad para iti default a CSS ken RTL CSStayo:

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

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

Alternatibo nga stack ti letra

Iti kaso nga agus-usarkayo iti kostumbre a letra, ammom a saan nga amin a letra ket mangsuporta iti saan a Latin nga alpabeto. Tapno agsubli manipud iti Pan-Europeano aginggana iti Arabiko a pamilia, mabalin a kasapulam nga usaren /*rtl:insert: {value}*/iti stack ti letramo tapno baliwam dagiti nagan dagiti pamilia ti letra.

Kas pagarigan, tapno agsubli manipud Helvetica Neue Webfontpara iti LTR aginggana Helvetica Neue Arabiciti para iti RTL, ti kodigom ti Sass ket kastoy ti langa:

$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 ken RTL nga aggigiddan

Kasapulan kadi ti agpada nga LTR ken RTL iti isu met laeng a panid? Thanks to RTLCSS String Maps , daytoy ket medyo diretso. Balkoten ti @imports mo iti maysa a klase, ken mangikeddeng ti kostumbre a pagannurotan ti panagbalbaliw ti nagan para iti 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*/

Kalpasan ti panagtaray ti Sass kalpasanna ti RTLCSS, tunggal maysa a mangpili kadagiti CSS a papelesmo ket maisaksakbay babaen ti .ltr, ken .rtlpara kadagiti RTL a papeles. Ita mabalinmon nga usaren ti agpada a file iti isu met laeng a panid, ken usarem laeng .ltrwenno .rtlkadagiti components wrappers-mo tapno usarem ti maysa wenno ti sabali a direksion.

Edge cases ken ammo a limitasion

Nupay maawatan daytoy a pamay-an, pangngaasiyo ta asikasuenyo dagiti sumaganad:

  1. No agsublika .ltrken .rtl, siguraduem nga inayon dirken langdagiti attribute a maitunos iti dayta.
  2. Ti panangikarga kadagiti agpada a papeles ket mabalin a maysa a pudno a bottleneck ti panagaramid: ibilang ti sumagmamano a panagoptimisar , ken mabalin a padasen nga ikarga ti maysa kadagita a papeles nga asynchronous .
  3. Dagiti estilo ti panagumok iti daytoy a wagas ket manglapped ti form-validation-state()mixinmi nga agtrabaho a kas nairanta, isu a kasapulan nga i-tweak-mo bassit daytoy a bukodmo. Kitaen ti #31223 .

Ti kaso ti breadcrumb

Ti breadcrumb separator ket isu laeng ti kaso a kasapulan ti bukodna a brand new a variable— nga isu ti $breadcrumb-divider-flipped—defaulting iti $breadcrumb-divider.

Dagiti kanayonan a rekurso