RTL

Foghlaim conas tacaíocht do théacs ó dheas go clé a chumasú i Bootstrap ar fud ár leagan amach, ár gcomhpháirteanna agus ár bhfóntais.

Ar an leathanach seo

Faigh eolas

Molaimid dul i dtaithí ar Bootstrap ar dtús ach léamh trínár leathanach Réamhrá Ag Tosú . Nuair a bheidh tú tar éis dul tríd, lean ar aghaidh ag léamh anseo le haghaidh conas RTL a chumasú.

B'fhéidir gur mhaith leat léamh suas freisin ar an tionscadal RTLCSS , toisc go dtugann sé cumhacht dár gcur chuige i leith RTL.

Gné thurgnamhach

Tá an ghné RTL fós turgnamhach agus is dócha go dtiocfaidh sé chun cinn de réir aiseolas úsáideoirí. An bhfaca tú rud éigin nó an bhfuil feabhas le moladh? Oscail ceist , ba bhreá linn do chuid léargais a fháil.

HTML riachtanach

Tá dhá cheanglas dhian ann chun RTL a chumasú ar leathanaigh faoi thiomáint Bootstrap.

Socraigh dir="rtl"ar an <html>eilimint.
Cuir langtréith chuí, cosúil le lang="ar", ar an <html>eilimint.

Ón áit sin, beidh ort leagan RTL dár CSS a chur san áireamh. Mar shampla, seo an stílbhileog dár CSS tiomsaithe agus mionghearrtha le RTL cumasaithe:

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

Teimpléad tosaithe

Is féidir leat na ceanglais thuas a fheiceáil léirithe sa teimpléad tosaithe RTL modhnaithe seo.

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

Samplaí RTL

Cuir tús le ceann dár roinnt samplaí RTL .

Cur Chuige

Tagann ár gcur chuige maidir le tacaíocht RTL a thógáil isteach i Bootstrap le dhá chinneadh thábhachtacha a mbíonn tionchar acu ar an gcaoi a scríobhaimid agus a n-úsáidimid ár CSS:

Ar dtús, bheartaíomar é a thógáil leis an tionscadal RTLCSS . Tugann sé seo roinnt gnéithe cumhachtacha dúinn chun athruithe agus sáruithe a bhainistiú agus sinn ag bogadh ó LTR go RTL. Ligeann sé dúinn freisin dhá leagan de Bootstrap a thógáil ó bhunachar cód amháin.
Ar an dara dul síos, tá dornán de ranganna treorach athainmnithe againn chun cur chuige maidir le hairíonna loighciúla a ghlacadh. Tá an chuid is mó agaibh tar éis idirghníomhú cheana féin le hairíonna loighciúla a bhuíochas lenár bhfóntais flexí - cuireann siad in ionad airíonna treo cosúil le leftagus righti bhfabhar startagus end. Fágann sin go bhfuil ainmneacha agus luachanna na ranganna oiriúnach do LTR agus RTL gan aon fhorchostas.

Mar shampla , in ionad .ml-3, margin-leftúsáid .ms-3.

Níor cheart go mbeadh oibriú le RTL, trínár bhfoinse Sass nó CSS tiomsaithe, mórán difriúil ónár LTR réamhshocraithe áfach.

Saincheap ón bhfoinse

Nuair a thagann sé le saincheaptha , is é an bealach is fearr leas a bhaint as athróga, léarscáileanna agus meascáin. Oibríonn an cur chuige seo mar an gcéanna do RTL, fiú má tá sé iar-phróiseáilte ó na comhaid tiomsaithe, a bhuíochas sin do conas a oibríonn RTLCSS .

Luachanna RTL saincheaptha

Trí úsáid a bhaint as treoracha luacha RTLCSS , is féidir leat luach difriúil a chur ar aschur athróg do RTL. Mar shampla, chun an meáchan a laghdú don $font-weight-boldbhunachar cód, is féidir leat an /*rtl: {value}*/chomhréir a úsáid:

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

A dhéanfadh aschur chuig an méid seo a leanas dár CSS réamhshocraithe agus RTL CSS:

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

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

Stack cló eile

Sa chás go bhfuil cló saincheaptha in úsáid agat, bí ar an eolas nach dtacaíonn gach cló leis an aibítir neamh-Laidin. Chun aistriú ón teaghlach Pan-Eorpach go dtí an teaghlach Arabach, seans go mbeidh ort é a úsáid /*rtl:insert: {value}*/i do chairn clónna chun ainmneacha na dteaghlach cló a mhodhnú.

Mar shampla, chun aistriú ó Helvetica Neuechló do LTR go dtí Helvetica Neue ArabicRTL, d’fhéadfadh cuma mar seo a bheith ar do chód Sass:

$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 agus RTL ag an am céanna

An dteastaíonn LTR agus RTL araon ar an leathanach céanna? A bhuí le Léarscáileanna Teaghrán RTLCSS , tá sé seo simplí go leor. Wrap your @imports le rang, agus socraigh riail athainmnithe saincheaptha do 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*/

Tar éis Sass agus RTLCSS a rith, déanfar gach roghnóir i do chomhaid CSS a réamhshocrú le .ltr, agus .rtlle haghaidh comhaid RTL. Anois is féidir leat an dá chomhad a úsáid ar an leathanach céanna, agus go simplí úsáid a bhaint as .ltrnó .rtlar do chumhdaigh comhpháirteanna chun treo amháin nó an treo eile a úsáid.

Cásanna imill agus teorainneacha aitheanta

Cé go bhfuil an cur chuige seo intuigthe, tabhair aird ar na nithe seo a leanas:

Agus tú ag aistriú .ltragus .rtl, déan cinnte go gcuireann tú leis diragus langtréithe dá réir.
Is féidir le luchtú an dá chomhad a bheith ina bhac feidhmíochta fíor: smaoinigh ar roinnt leas iomlán a bhaint , agus b'fhéidir iarracht a dhéanamh ceann de na comhaid sin a luchtú go neamhshioncronach .
Cuirfidh stíleanna neadaithe ar an mbealach seo cosc ar ár form-validation-state()meascáin ó oibriú mar a bhí beartaithe, agus mar sin ní mór duit é a athrú beagán leat féin. Féach #31223 .

Is é an deighilteoir aráin an t-aon chás a éilíonn a athróg úrnua féin — eadhon — $breadcrumb-divider-flippedmainneachtain go $breadcrumb-divider.

RTL