Rach gu prìomh shusbaint Air adhart gu seòladh docs
Check
in English

RTL

Ionnsaich mar a bheir thu comas taic airson teacsa deas gu clì ann am Bootstrap thairis air ar cruth, co-phàirtean agus goireasan.

Air an duilleig seo

Faigh eòlach

Tha sinn a’ moladh eòlas fhaighinn air Bootstrap an-toiseach le bhith a’ leughadh tron ​​duilleag Ro-ràdh Toiseach tòiseachaidh againn . Aon uair ‘s gu bheil thu air ruith troimhe, lean ort a’ leughadh an seo airson mar as urrainn dhut RTL a chomasachadh.

Is dòcha gum bi thu cuideachd airson leughadh mu phròiseact RTLCSS , leis gu bheil e a’ toirt cumhachd don dòigh-obrach againn a thaobh RTL.

Feart deuchainneach

Tha am feart RTL fhathast deuchainneach agus is dòcha gun tig e air adhart a rèir fios air ais bho luchd-cleachdaidh. Am faca tu rudeigin no an robh leasachadh agad ri mholadh? Fosgail cùis , bu mhath leinn do bheachdan fhaighinn.

HTML a dhìth

Tha dà riatanas teann ann airson RTL a chomasachadh ann an duilleagan le cumhachd Bootstrap.

  1. Suidhich dir="rtl"air an <html>eileamaid.
  2. Cuir langfeart iomchaidh, mar lang="ar", ris an <html>eileamaid.

Às an sin, feumaidh tu dreach RTL den CSS againn a thoirt a-steach. Mar eisimpleir, seo an duilleag stoidhle airson an CSS a chaidh a chur ri chèile agus a mhion-sgrùdadh le RTL air a chomasachadh:

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

Teamplaid tòiseachaidh

Chì thu na riatanasan gu h-àrd air an nochdadh anns an teamplaid tòiseachaidh RTL atharraichte 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>

Eisimpleirean de RTL saor an asgaidh

Tòisich le aon de na grunn eisimpleirean RTL againn .

Dòigh-obrach

Tha an dòigh-obrach againn airson taic RTL a thogail a-steach do Bootstrap a’ tighinn le dà cho-dhùnadh cudromach a bheir buaidh air mar a bhios sinn a’ sgrìobhadh agus a’ cleachdadh ar CSS:

  1. An toiseach, chuir sinn romhainn a thogail leis a’ phròiseact RTLCSS . Bheir seo dhuinn cuid de fheartan cumhachdach airson a bhith a’ riaghladh atharrachaidhean agus a’ dol thairis air nuair a ghluaiseas sinn bho LTR gu RTL. Leigidh e leinn cuideachd dà dhreach de Bootstrap a thogail bho aon bhun-còd.

  2. San dàrna àite, tha sinn air dòrlach de chlasaichean stiùiridh ath-ainmeachadh gus gabhail ri dòigh-obrach feartan loidsigeach. Tha a’ mhòr-chuid agaibh air eadar-obrachadh le feartan loidsigeach mar-thà mar thoradh air na goireasan sùbailte againn - bidh iad a’ dol an àite thogalaichean stiùiridh mar leftagus rightfàbhar startagus end. Tha sin a’ fàgail ainmean is luachan a’ chlas iomchaidh airson LTR agus RTL gun chosgaisean sam bith eile.

Mar eisimpleir, an àite .ml-3airson margin-left, cleachd .ms-3.

Cha bu chòir a bhith ag obair le RTL, tron ​​​​stòr Sass againn no CSS air a chuir ri chèile, a bhith gu math eadar-dhealaichte bhon LTR àbhaisteach againn ge-tà.

Dèan gnàthachadh bhon stòr

Nuair a thig e gu gnàthachadh , is e an dòigh as fheàrr leat brath a ghabhail air caochladairean, mapaichean, agus measgachadh. Bidh an dòigh-obrach seo ag obair mar an ceudna airson RTL, eadhon ged a thèid a phròiseasadh às deidh na faidhlichean a chaidh a chuir ri chèile, le taing dha mar a tha RTLCSS ag obair .

Luachan gnàthaichte RTL

A ’ cleachdadh stiùiridhean luach RTLCSS , faodaidh tu toradh caochlaideach a dhèanamh na luach eadar-dhealaichte airson RTL. Mar eisimpleir, gus an cuideam a lùghdachadh air $font-weight-boldfeadh a 'chòd-chòd, faodaidh tu an co- /*rtl: {value}*/chòrdadh a chleachdadh:

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

A bheireadh a-mach gu na leanas airson ar CSS bunaiteach agus RTL CSS:

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

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

Stack cruth-clò eile

Ma tha thu a’ cleachdadh cruth-clò àbhaisteach, thoir an aire nach eil a h-uile cruth-clò a’ toirt taic don aibideil neo-Laideann. Gus gluasad bho theaghlach Pan-Eòrpach gu Arabais, is dòcha gum feum thu a chleachdadh /*rtl:insert: {value}*/anns a’ chruach chruth-clò agad gus ainmean theaghlaichean cruth-clò atharrachadh.

Mar eisimpleir, airson atharrachadh bho Helvetica Neuechruth-clò airson LTR gu Helvetica Neue Arabicairson RTL, dh’ fhaodadh do chòd Sass coimhead mar seo:

$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 aig an aon àm

A bheil feum agad air an dà chuid LTR agus RTL air an aon duilleag? Taing do RTLCSS String Maps , tha seo gu math sìmplidh. Paisg do chuid @importle clas, agus suidhich riaghailt ath-ainmeachadh àbhaisteach airson 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*/

Às deidh dha Sass an uairsin RTLCSS a ruith, bidh gach roghnaiche anns na faidhlichean CSS agad air a ro-aithris le .ltr, agus .rtlairson faidhlichean RTL. A-nis is urrainn dhut an dà fhaidhle a chleachdadh air an aon duilleag, agus dìreach cleachd .ltrno .rtlair na pasgain phàirtean agad gus aon no an taobh eile a chleachdadh.

Cùisean iomall agus crìochan aithnichte

Ged a tha an dòigh-obrach seo furasta a thuigsinn, thoir aire do na leanas:

  1. Nuair a bhios tu ag atharrachadh .ltragus .rtl, dèan cinnteach gun cuir thu ris diragus langbuadhan a rèir sin.
  2. Faodaidh luchdachadh an dà fhaidhle a bhith na fhìor bhotal dèanadais: beachdaich air cuid de optimization , agus is dòcha feuch ri aon de na faidhlichean sin a luchdachadh gun sioncronaich .
  3. Cuiridh stoidhlichean neadachaidh mar seo casg air ar form-validation-state()measgachadh bho bhith ag obair mar a bha dùil, agus mar sin feumaidh tu beagan tweak a dhèanamh leat fhèin. Faic #31223 .

Cùis an arain

Is e an dealaiche aran an aon chùis a dh’ fheumas an caochladair ùr-nodha aige fhèin - is e sin $breadcrumb-divider-flipped- bunaiteach gu $breadcrumb-divider.

Goireasan a bharrachd