in English

RTL

Fêr bibe ka meriv çawa di Bootstrap-ê de li ser sêwiran, pêkhate û karûbarên me piştgirî ji bo nivîsa rast-çep-çep çalak bike.

Li ser vê rûpelê

Nas bibin

Em pêşniyar dikin ku hûn pêşî bi Bootstrap-ê nas bikin bi xwendina rûpela meya Destpêka Destpêkê . Gava ku we ew rêve kir, xwendina li vir berdewam bikin ka meriv çawa RTL çalak bike.

Her weha dibe ku hûn bixwazin li ser projeya RTLCSS bixwînin , ji ber ku ew nêzîkatiya me ya RTL hêz dike.

Taybetmendiya ezmûnî

Taybetmendiya RTL hîn jî ceribandî ye û dibe ku li gorî nerînên bikarhêner pêşve bibe. Tiştek dît an çêtirbûnek heye ku hûn pêşniyar bikin? Pirsgirêk vekin , em hez dikin ku têgihîştina we bistînin.

Pêdivî ye HTML

Ji bo çalakkirina RTL di rûpelên bi Bootstrap-ê de du daxwazên hişk hene.

Set dir="rtl"li ser <html>hêmanê.
Taybetmendiyek guncan lang, mîna lang="ar", li ser <html>hêmanê zêde bikin.

Ji wir, hûn ê hewce ne ku guhertoyek RTL ya CSS-ya me vekin. Mînakî, li vir şêwaza CSS-ya me ya berhevkirî û piçûkkirî ya bi RTL-ya çalakkirî ye:

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

Şablonê destpêk

Hûn dikarin hewcedariyên jorîn ên ku di vê şablona destpêk a RTL-ya guhertî de têne xuyang kirin bibînin.

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

Mînakên RTL

Bi yek ji çend mînakên me yên RTL re dest pê bikin .

Nêzîkbûhatinî

Nêzîkatiya me ya avakirina piştgiriya RTL-ê di Bootstrap de bi du biryarên girîng re tê ku bandorê li çawaniya nivîsandin û karanîna CSS-a me dike:

Pêşîn, me biryar da ku em bi projeya RTLCSS re ava bikin . Ev ji me re hin taybetmendiyên hêzdar dide ji bo birêvebirina guheztin û guheztinan dema ku ji LTR berbi RTL-ê ve diçin. Di heman demê de ew dihêle ku em du guhertoyên Bootstrap-ê ji yek bingehek kodê ava bikin.
Ya duyemîn, me navê çend çînên rêwerzan bi nav kiriye da ku nêzîkatiyek taybetmendiyên mantiqî bipejirîne. Piraniya we bi saya karûbarên me yên nerm berê bi taybetmendiyên mentiqî re têkilî daniye - ew taybetmendiyên rêwerzê yên mîna leftû rightdi berjewendiyê startû end. Ew nav û nirxan ji bo LTR û RTL-ê bêyî sernavê guncan dike.

Mînakî, li şûna ji .ml-3bo margin-left, bikar bînin .ms-3.

Karkirina bi RTL re, bi riya çavkaniya me Sass an CSS-ya berhevkirî, divê ji LTR-ya meya xwerû pir cûda nebe.

Ji çavkaniyê xweş bikin

Dema ku dor tê ser xwerûkirin , awayê bijartî ev e ku meriv ji guhêrbar, nexşe, û mixînan sûd werbigire. Ev nêzîkatî ji bo RTL-ê bi heman rengî dixebite, her çend ew ji pelên berhevkirî paş-pêvajoyî be jî, bi saya RTLCSS çawa dixebite .

nirxên RTL Custom

Bi karanîna rêwerzên nirxa RTLCSS , hûn dikarin hilberek guhêrbar ji bo RTL nirxek cûda çêbikin. Mînakî, ji bo kêmkirina giraniya li $font-weight-boldseranserê bingeha kodê, hûn dikarin /*rtl: {value}*/hevoksaziyê bikar bînin:

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

Ya ku dê ji bo CSS û RTL CSS-ya meya xwerû ya jêrîn derxe:

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

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

Pişka tîpên Alternatîf

Di doza ku hûn tîpek xwerû bikar tînin, hay ji xwe hebin ku hemî tîpan piştgirî nadin alfabeya ne-latînî. Ji bo guheztina ji malbata Pan-Ewropî bo Erebî, dibe ku hûn hewce bikin ku hûn /*rtl:insert: {value}*/di stûna tîpên xwe de bikar bînin da ku navên malbatên tîpan biguhezînin.

Mînakî, ji Helvetica Neue Webfontbo veguheztina ji LTR ji Helvetica Neue Arabicbo RTL, koda weya Sass wiha xuya dike:

$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 û RTL di heman demê de

Hem LTR û hem jî RTL li ser heman rûpelê hewce ne? Spas ji RTLCSS String Maps , ev pir hêsan e. Sên xwe @importbi polê ve bipêçin, û ji bo RTLCSS qaîdeyek nûvekirina xwerû saz bikin:

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

Piştî xebitandina Sass paşê RTLCSS, her hilbijêrek di pelên CSS-ê de dê ji hêla .ltr, û .rtlji bo pelên RTL-ê ve were pêşandan. Naha hûn dikarin her du pelan li ser heman rûpelê bikar bînin, û bi tenê .ltran .rtlli ser pêçanên pêkhateyên xwe bikar bînin da ku yek an rêyek din bikar bînin.

Dozên qiraxa û tixûbên naskirî

Digel ku ev nêzîkatî tê fêm kirin, ji kerema xwe bala xwe bidin van jêrîn:

Dema ku veguheztin .ltrû .rtl, pê ewle bine ku hûn li gorî xwe lê zêde bikin dirû langtaybetmendiyê bikin.
Barkirina her du pelan dikare bibe astengiyek performansê ya rastîn: hin xweşbîniyê binirxînin , û dibe ku hewl bidin ku yek ji wan pelan bi asynkronî bar bikin .
Bi vî rengî şêwazên hêlînê dê rê li ber ku tevliheviya me form-validation-state()wekî ku tê xwestin bixebite, bi vî rengî hewce dike ku hûn wê bi xwe hinekî bişoxilînin. Binêre #31223 .

Veqetandina nanê yekane doz e ku pêdivî bi guhêrbara xweya nû ya nû heye - ango $breadcrumb-divider-flipped- ji bo $breadcrumb-divider.

RTL