RTL e le

Ithute ka moo o ka kgontšhago thekgo ya sengwalwa sa go tloga go le letona go ya go le letshadi go Bootstrap go ralala le peakanyo ya rena, dikarolo, le didirišwa.

Letlakaleng le

Tlwaelana

Re kgothaletša go tlwaelana le Bootstrap pele ka go bala letlakaleng la rena la Matseno a go Thoma . Ge o šetše o kitimile go yona, tšwela pele go bala mo bakeng sa kamoo o ka kgontšhago RTL.

You may also want to read up on the RTLCSS project , ka ge e matlafatša mokgwa wa rena wa go diriša RTL.

Sebopego sa teko

Sebopego sa RTL se sa le sa go dira diteko gomme mohlomongwe se tla tšwelela go ya ka ditshwayotshwayo tša mosediriši. O bone selo se itšego goba o na le kaonafatšo yeo o ka e šišinyago? Open an issue , re ka thabela go hwetša ditemogo tša gago.

HTML ye e nyakegago

Go na le dinyakwa tše pedi tše di tiilego tša go kgontšha RTL ka matlakaleng ao a šomišwago ke Bootstrap.

Beha dir="rtl"ka <html>elements.
Oketša langseka sa maleba, go swana le lang="ar", godimo ga <html>elemente.

Go tloga moo, o tla swanelwa ke go akaretša phetolelo ya RTL ya CSS ya rena. Mohlala, mo ke letlakala la setaele la CSS ya rena ye e kgobokeditšwego le ye e fokoditšwego yeo e nago le RTL yeo e kgontšhitšwego:

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

Thempleite ya go thoma

O ka bona dinyakwa tše di lego ka mo godimo di bonagala ka go thempleite ye ya go thoma ya RTL ye e fetotšwego.

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

Mehlala ya RTL

Thoma ka e nngwe ya mehlala ya rena e mmalwa ya RTL .

Batamela

Mokgwa wa rena wa go aga thekgo ya RTL go Bootstrap o tla le diphetho tše pedi tše bohlokwa tšeo di amago ka fao re ngwalago le go šomiša CSS ya rena:

Sa mathomo, re ile ra tšea sephetho sa go e aga ka projeke ya RTLCSS . Se se re fa dikarolo tše dingwe tše maatla tša go laola diphetogo le go fediša ge o tloga go LTR go ya go RTL. E bile e re dumelela go aga diphetolelo tše pedi tša Bootstrap go tšwa go codebase e tee.
Sa bobedi, re reile leina lefsa la diklase tše mmalwa tša tlhahlo go amogela mokgwa wa dithoto tše di kwagalago. Bontši bja lena le šetše le dirišana le dithoto tše di kwagalago ka baka la didirišwa tša rena tša go kobega—di tšeela dithoto tša tlhahlo legato tša go swana leftle le righttšeo di thekgago startle end. Seo se dira gore maina a klase le dikelo di be maleba go LTR le RTL ntle le tšhelete ya godimo.

Ka mohlala, go e na le .ml-3bakeng sa margin-left, diriša .ms-3.

Go šoma le RTL, ka mohlodi wa rena Sass goba CSS ye e kgobokeditšwego, ga se gwa swanela go fapana kudu le LTR ya rena ya go se fetoge le ge go le bjalo.

Tlwaetša go tšwa mothopong

When it comes to customization , tsela e kgethilwego ke go diriša mohola wa diphetogo, mebapa le mixins. Mokgwa wo o šoma ka go swana go RTL, le ge e le gore o šomišitšwe ka morago go tšwa go difaele tše di kgobokeditšwego, ka lebaka la ka fao RTLCSS e šomago ka gona .

Ditekanyetšo tša RTL tša tlwaelo

Ka go šomiša ditaelo tša boleng bja RTLCSS , o ka dira gore setšweletšwa sa phetogo e be boleng bjo bo fapanego bja RTL. Go fa mohlala, go fokotša boima bja go $font-weight-boldralala le codebase, o ka šomiša /*rtl: {value}*/polelo ya go hlama:

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

Eo e bego e tla tšweletša go tše di latelago bakeng sa CSS ya rena ya go se fetoge le CSS ya RTL:

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

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

Mokgobo wa fonte e nngwe

Tabeng yeo o dirišago fonte ya tlwaelo, ela hloko gore ga se difonte ka moka tšeo di thekgago alfabete yeo e sego ya Selatine. Go fetola go tšwa go Pan-European go ya go lapa la Searabia, o ka swanelwa ke go šomiša /*rtl:insert: {value}*/ka gare ga mokgobo wa gago wa difonte go fetoša maina a malapa a difonte.

Go fa mohlala, go fetola go tšwa go Helvetica Neuefonte ya LTR go ya go Helvetica Neue Arabicya RTL, khoutu ya gago ya Sass e ka lebelega ka tsela ye:

$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 le RTL ka nako e le nngwe

O hloka bobedi LTR le RTL letlakaleng le tee? Thanks to RTLCSS String Maps , se se ntle se tobileng. Phuthelela @imports ya gago ka sehlopha, gomme o beakantše molao wa go reela leina lefsa la tlwaelo bakeng sa 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*/

Ka morago ga go sepetša Sass ke moka RTLCSS, mokgethi yo mongwe le yo mongwe ka difaeleng tša gago tša CSS o tla prepended ke .ltr, le .rtlbakeng sa difaele tša RTL. Bjale o kgona go šomiša difaele ka bobedi letlakaleng le tee, gomme o no šomiša .ltrgoba .rtlgodimo ga diphuthelwana tša gago tša dikarolo go šomiša tlhahlo ye nngwe goba ye nngwe.

Bohale melato le meeli tsejoang

Le ge mokgwa wo o kwešišega, hle ela hloko tše di latelago:

Ge o fetoša .ltrle .rtl, kgonthiša gore o tlaleletša dirle langdika ka go swanela.
Loading difaele ka bobeli e ka ba sebele tshebetso bottleneck: nahana ka ba bang ba optimization , 'me mohlomong leka ho laela e mong oa difaele tseo asynchronously .
Mekgwa ya go bea dihlaga ka tsela ye e tla thibela form-validation-state()mixin ya rena go šoma bjalo ka ge e reretšwe, ka go realo e nyaka gore o e tweak go se nene ka bowena. Bona # 31223 .

Searoganyi sa breadcrumb ke yona feela taba yeo e nyakago phetogo ya yona e $breadcrumb-divider-flippedmpsha— e lego —go se fetoge go $breadcrumb-divider.