Yeqela kokuqukethwe okuyinhloko Yeqela ku-docs navigation
in English

I-RTL

Funda indlela yokunika amandla usekelo lombhalo osuka kwesokudla uye kwesokunxele ku-Bootstrap kuyo yonke isakhiwo sethu, izingxenye, nezinsiza.

Kuleli khasi

Zijwayeze

Sincoma ukujwayelana ne-Bootstrap kuqala ngokufunda ekhasini lethu elithi Ukuqalisa Isingeniso . Uma usuyiqedile, qhubeka ufunda lapha ukuze uthole ukuthi ungayivula kanjani i-RTL.

Ungase futhi ufune ukufunda ngephrojekthi ye-RTLCSS , njengoba inika amandla indlela yethu ye-RTL.

Isici sokuhlola

Isici se-RTL sisahlolwa futhi cishe sizoguquka ngokuya ngempendulo yomsebenzisi. Ubone okuthile noma unokuthuthuka ongakuphakamisa? Vula udaba , singathanda ukuthola imininingwane yakho.

I-HTML edingekayo

Kunezidingo ezimbili eziqinile zokunika amandla i-RTL emakhasini anikwe amandla e-Bootstrap.

  1. Setha dir="rtl"kusici <html>.
  2. langEngeza isibaluli esifanele , njenge lang="ar"- <html>elementi.

Ukusuka lapho, uzodinga ukufaka inguqulo ye-RTL ye-CSS yethu. Isibonelo, nali ishidi lesitayela le-CSS yethu ehlanganisiwe nencane ene-RTL enikwe amandla:

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

Isifanekiso sokuqala

Ungabona lezi zidingo ezingenhla ziboniswa kulesi sifanekiso se-RTL esilungisiwe.

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

Izibonelo ze-RTL

Qalisa ngesinye sezibonelo zethu ezimbalwa ze-RTL .

Indlela

Indlela yethu yokwakha ukwesekwa kwe-RTL ku-Bootstrap iza nezinqumo ezimbili ezibalulekile ezithinta indlela esibhala ngayo nesisebenzisa ngayo i-CSS yethu:

  1. Okokuqala, sinqume ukuyakha ngephrojekthi ye- RTLCSS . Lokhu kusinika izici ezinamandla zokuphatha izinguquko kanye nokukhipha lapho usuka ku-LTR uye ku-RTL. Kuphinde kusivumele ukuthi sakhe izinguqulo ezimbili ze-Bootstrap kusuka ku-codebase eyodwa.

  2. Okwesibili, siqambe kabusha idlanzana lamakilasi okuqondisa ukuze asebenzise indlela yezakhiwo enengqondo. Iningi lenu selivele lihlanganyele nezakhiwo ezinengqondo ngenxa yezinsiza zethu eziguquguqukayo—zithatha indawo yezindawo eziqondisayo ezifana leftnezivumelanayo futhi . Lokho kwenza amagama ekilasi namanani afanele i-LTR ne-RTL ngaphandle kwanoma iyiphi i-overhead.rightstartend

Isibonelo, esikhundleni .ml-3sokuthi margin-left, sebenzisa .ms-3.

Ukusebenza ne-RTL, ngomthombo wethu we-Sass noma i-CSS ehlanganisiwe, akufanele kuhluke kakhulu ku-LTR yethu ezenzakalelayo.

Enza ngendlela oyifisayo kusuka emthonjeni

Uma kuziwa ekwenzeni ngendlela oyifisayo , indlela ekhethwayo ukusebenzisa okuguquguqukayo, amamephu, nezixube. Le ndlela isebenza ngendlela efanayo ku-RTL, ngisho noma icutshungulwa ngemva kwamafayela ahlanganisiwe, ngenxa yokuthi i-RTLCSS isebenza kanjani .

Amanani e-RTL ngokwezifiso

Usebenzisa iziqondiso zenani le-RTLCSS , ungenza okukhiphayo okuguquguqukayo kube ivelu ehlukile ye-RTL. Isibonelo, ukwehlisa isisindo $font-weight-boldkuyo yonke i-codebase, ungasebenzisa i- /*rtl: {value}*/syntax:

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

Okungaphumela kokulandelayo ku-CSS yethu ezenzakalelayo ne-RTL CSS:

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

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

Esinye isitaki sefonti

Esimeni lapho usebenzisa ifonti yangokwezifiso, qaphela ukuthi akuwona wonke amafonti asekela izinhlamvu zamagama okungezona ezesiLatini. Ukuze ushintshe usuke ku-Pan-European uye emndenini wesi-Arabic, kungase kudingeke ukuthi usebenzise /*rtl:insert: {value}*/kusitaki sakho sefonti ukuze uguqule amagama emindeni yamafonti.

Isibonelo, ukushintsha usuka Helvetica Neue Webfontku-LTR uye Helvetica Neue Arabicku-RTL, ikhodi yakho ye-Sass ibukeka kanje:

$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;

I-LTR ne-RTL ngesikhathi esifanayo

Udinga kokubili i-LTR ne-RTL ekhasini elifanayo? Ngenxa ye- RTLCSS String Maps , lokhu kuqonde ngqo. Goqa okwakho @importngeklasi, bese usetha umthetho wokuqamba kabusha ngokwezifiso we-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*/

Ngemva kokusebenzisa i-Sass bese kuba yi-RTLCSS, isikhethi ngasinye kumafayela akho e-CSS sizomiswa ngaphambili ngokuthi .ltr, kanye .rtlnamafayela e-RTL. Manje usukwazi ukusebenzisa womabili amafayela ekhasini elifanayo, futhi umane usebenzise .ltrnoma .rtlkuma-wrappers wezingxenye zakho ukuze usebenzise eyodwa noma enye indlela.

Amacala we-Edge kanye nemikhawulo eyaziwayo

Yize le ndlela iqondakala, sicela unake lokhu okulandelayo:

  1. Uma ushintsha .ltrfuthi .rtl, qiniseka ukuthi uyangeza dirnezibaluli langngokufanele.
  2. Ukulayisha womabili amafayela kungase kube umgoqo ekusebenzeni kwangempela: cabangela ukulungiselelwa okuthile , futhi mhlawumbe uzame ukulayisha elinye lalawa mafayela ngendlela esynchronously .
  3. Izitayela zesidleke ngale ndlela form-validation-state()zizovimbela i-mixin yethu ukuthi isebenze njengoba ihlosiwe, ngaleyo ndlela idinga ukuthi uyilungise kancane uwedwa. Bona #31223 .

Ikesi le-breadcrumb

Isihlukanisi se- breadcrumb ukuphela kwecala elidinga ukwahluka kwaso okusha sha- okungukuthi $breadcrumb-divider-flipped-okuzenzakalelayo kuya ku- $breadcrumb-divider.

Izinsiza ezengeziwe