RTL

Funda indlela yokwenza inkxaso yokubhaliweyo ukusuka ekunene ukuya ekhohlo kwiBootstrap kulo lonke uyilo lwethu, izixhobo, kunye nezinto eziluncedo.

Kweli phepha

Ziqhelanise

Sincoma ukuqhelana neBootstrap kuqala ngokufunda kwiphepha lethu lentshayelelo yokuQalisa . Nje ukuba uyigqibe, qhubeka ufunda apha malunga nendlela yokwenza i-RTL.

Ungaphinda ufune ukufunda kwiprojekthi ye-RTLCSS , njengoko inika amandla indlela yethu kwi-RTL.

Uphawu lovavanyo

Uphawu lwe-RTL lusazama kwaye mhlawumbi luya kuvela ngokwempendulo yomsebenzisi. Ubone into okanye uphucule ukucebisa? Vula umba , singathanda ukufumana ulwazi lwakho.

HTML efunekayo

Kukho iimfuno ezimbini ezingqongqo zokwenza i-RTL kumaphepha e-Bootstrap-powered.

Misela dir="rtl"into <html>.
Yongeza uphawu olufanelekileyo lang, njenge lang="ar", kwisiqalelo <html>.

Ukusuka apho, kuya kufuneka ubandakanye inguqulelo yeRTL yeCSS yethu. Umzekelo, nali icwecwe lesimbo leCSS yethu edityanisiweyo kunye nencitshisiweyo ene-RTL eyenziwe yasebenza:

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

Itemplate yokuqalisa

Uyakwazi ukubona ezi mfuno zingentla zibonakaliswe kule template ilungisiweyo ye-RTL starter.

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

Qalisa ngomnye wemizekelo yethu emininzi ye- RTL .

Indlela

Indlela yethu yokwakha inkxaso ye-RTL kwiBootstrap iza nezigqibo ezibini ezibalulekileyo ezichaphazela indlela esibhala ngayo nokusebenzisa iCSS yethu:

Okokuqala, sigqibe kwelokuba siyakhe ngeprojekthi ye- RTLCSS . Oku kusinika iimpawu ezinamandla zokulawula utshintsho kunye nokubhala ngaphezulu xa usuka kwi-LTR ukuya kwi-RTL. Ikwasivumela ukuba sakhe iinguqulelo ezimbini zeBootstrap kwikhowudi enye.
Okwesibini, siye sathiya ngokutsha iqela leeklasi zokwalathisa ukuze zamkele indlela yepropathi enengqiqo. Uninzi lwenu sele lunxibelelane neepropathi ezinengqiqo enkosi kwizinto zethu eziguquguqukayo-zithatha indawo yeempawu zesalathiso ezifana leftnokuthanda kunye . Loo nto yenza amagama eklasi kunye namaxabiso afanele i-LTR kunye ne-RTL ngaphandle kwe-overhead.rightstartend

Umzekelo, endaweni ye- .ml-3, margin-leftsebenzisa .ms-3.

Ukusebenza ne-RTL, ngomthombo wethu we-Sass okanye i-CSS ehlanganisiweyo, akufuneki kwahluke kakhulu kwi-LTR yethu engagqibekanga.

Lungiselela kwimvelaphi

Xa kuziwa ekwenzeni ngokwezifiso , indlela ekhethwayo kukuthatha ithuba lokuguquguquka, iimephu, kunye nemixube. Le ndlela isebenza ngokufanayo kwi-RTL, nokuba idluliselwe kwiifayile eziqokelelweyo, ngenxa yendlela esebenza ngayo iRTLCSS .

Amaxabiso e-RTL eSiko

Usebenzisa RTLCSS izikhokelo zexabiso , ungenza imveliso eguquguqukayo ixabiso elahlukileyo le-RTL. Umzekelo, ukunciphisa ubunzima kuyo $font-weight-boldyonke i-codebase, ungasebenzisa i- /*rtl: {value}*/syntax:

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

Yintoni eya kuvelisa koku kulandelayo kwi-CSS yethu engagqibekanga kunye ne-RTL CSS:

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

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

Isitakhi sefonti esisesinye

Kwimeko oyisebenzisayo ifonti yesiko, qaphela ukuba ayizizo zonke iifonti ezixhasa ialfabhethi engeyoyesiLatini. Ukutshintshela kwiPan-European ukuya kusapho lwesiArabhu, kunokufuneka usebenzise /*rtl:insert: {value}*/kwistakhi sakho sefonti ukuguqula amagama osapho lwefonti.

Umzekelo, ukutshintshela kwi Helvetica Neue Webfont-LTR ukuya Helvetica Neue Arabickwi-RTL, ikhowudi yakho ye-Sass ijongeka ngolu hlobo:

$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 kunye ne-RTL ngaxeshanye

Ngaba ufuna zombini i-LTR kunye ne-RTL kwiphepha elifanayo? Enkosi kwi- RTLCSS String Maps , oku kungqale ngqo. Gquba i @import-s yakho ngeklasi, kwaye usete umgaqo othiya igama ngokwesiko le-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*/

Emva kokuqhuba i-Sass emva koko i-RTLCSS, umkhethi ngamnye kwiifayile zakho ze-CSS uya kulungiselelwa kwangaphambili nge- .ltr, kunye .rtlneefayile ze-RTL. Ngoku uyakwazi ukusebenzisa zombini iifayile kwiphepha elinye, kwaye usebenzise ngokulula .ltrokanye .rtlkwizixhobo zakho zokusonga ukusebenzisa enye okanye kwelinye icala.

Iimeko ze-Edge kunye nemida eyaziwayo

Nangona le ndlela iqondakalayo, nceda uqaphele oku kulandelayo:

Xa utshintsha .ltrkwaye .rtl, qiniseka ukuba uyongeza dirkunye langneempawu ngokufanelekileyo.
Ukulayisha zombini iifayile kunokuba yingxaki yokusebenza yokwenyani: qwalasela ulungiselelo oluthile , kwaye mhlawumbi uzame ukulayisha enye yezo fayile ngokungahambelaniyo .
Izitayile zokuzalisa ngale ndlela ziyakuthintela i-mixin yethu form-validation-state()ekusebenzeni njengoko ibiceliwe, kungoko ifuna ukuba uyilungise wedwa. Bona #31223 .

Isahluli se- breadcrumb kuphela kwemeko efuna inguqu yaso entsha kraca-eyile $breadcrumb-divider-flipped-defaulting to $breadcrumb-divider.

RTL