RTL

Dyondza ndlela yo endla leswaku nseketelo wa tsalwa ra xinene ku ya eka ximatsi eka Bootstrap ku tsemakanya layout ya hina, swiphemu, na switirhisiwa.

Eka tluka leri

Tolovelana

Hi ringanyeta ku tolovelana na Bootstrap ku sungula hi ku hlaya eka tluka ra hina ra Xingheniso xo Sungula . Loko se u tsutsumile eka yona, yana emahlweni u hlaya laha ku kuma ndlela yo endla leswaku RTL yi tirha.

U nga ha tlhela u lava ku hlaya ku ya fika eka phurojeke ya RTLCSS , tanihileswi yi nyikaka matimba eka ndlela ya hina ya RTL.

Xivumbeko xa ku ringeta

Xivumbeko xa RTL xa ha ri xa ku ringeta naswona kumbexana xi ta hluvuka ku ya hi vuyelo bya vatirhisi. Xana u vonile swo karhi kumbe u ri na ku antswisiwa loku u nga ku ringanyetaka? Open an issue , hi nga tsakela ku kuma vutivi bya wena.

HTML leyi lavekaka

Ku na swilaveko swimbirhi swo tika swo endla leswaku RTL yi tirha eka matluka lama fambiwaka hi Bootstrap.

Seta dir="rtl"eka <html>elemente.
Engetela langxihlawulekisi lexi faneleke, ku fana na lang="ar", eka <html>xiaki.

Ku suka kwalaho, u ta lava ku katsa vuhundzuluxeri bya RTL bya CSS ya hina. Xikombiso, hi lexi xitayili xa CSS ya hina leyi hlengeletiweke ni leyi hungutiweke leyi nga ni RTL leyi tirhisiweke:

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

Xifaniso xo sungula

U nga vona swilaveko leswi nga laha henhla leswi kombisiweke eka xivumbeko lexi xa xisunguri xa RTL lexi cinciweke.

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

Swikombiso swa RTL

Sungula hi xin'wana xa swikombiso swa hina swo hlayanyana swa RTL .

Manghenelo

Endlelo ra hina ro aka nseketelo wa RTL eka Bootstrap ri ta na swiboho swimbirhi swa nkoka leswi khumbhaka ndlela leyi hi tsalaka na ku tirhisa CSS ya hina:

Xo sungula, hi endle xiboho xo yi aka hi phurojeke ya RTLCSS . Leswi swi hi nyika swihlawulekisi swin’wana swa matimba swo lawula ku cinca na ku tlula loko hi suka eka LTR ku ya eka RTL. Swi tlhela swi hi pfumelela ku aka tivhidiyo timbirhi ta Bootstrap ku suka eka codebase yin’we.
Xa vumbirhi, hi thye mavito ya titlilasi ti nga ri tingani ta nkongomiso ku amukela endlelo ra swihlawulekisi leswi twisisekaka. Vunyingi bya n’wina se mi tirhisanile ni swivumbeko leswi twisisekaka hikwalaho ka switirhisiwa swa hina swa flex—swi siva swivumbeko swa nkongomiso swo tanihi leftni rightleswi seketelaka startni end. Sweswo swi endla leswaku mavito ya tlilasi na mimpimo swi faneleka eka LTR na RTL handle ka overhead.

Hi xikombiso, ematshan’weni ya .ml-3for margin-left, tirhisa .ms-3.

Ku tirha na RTL, hi ku tirhisa xihlovo xa hina xa Sass kumbe CSS leyi hlengeletiweke, a swi fanelanga swi hambana ngopfu na LTR ya hina ya ntolovelo hambiswiritano.

Endla hi ku landza swilaveko swa wena ku suka eka xihlovo

When it comes to customization , ndlela leyi tsakeriwaka i ku tirhisa swilo leswi cinca-cincaka, mimepe ni mixin. Endlelo leri ri tirha hi ndlela leyi fanaka eka RTL, hambiloko ri endliwile endzhaku ku suka eka tifayela leti hlengeletiweke, hikwalaho ka ndlela leyi RTLCSS yi tirhaka ha yona .

Mimpimo ya RTL ya ntolovelo

Hi ku tirhisa swiletelo swa nkoka swa RTLCSS , u nga endla vuhumelerisi bya xihlawulekisi byi va ntikelo wo hambana wa RTL. Xikombiso, ku hunguta ntiko wa $font-weight-boldeka codebase hinkwayo, u nga tirhisa /*rtl: {value}*/xivumbeko xa marito:

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

Lexi a xi ta humesa eka leswi landzelaka eka CSS ya hina ya ntolovelo na RTL CSS:

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

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

Xithaki xa fonto yin’wana

Eka xiyimo lexi u tirhisaka fonto ya ntolovelo, tiva leswaku a hi tifonto hinkwato leti seketelaka maletere lama nga riki ya Xilatini. Ku cinca ku suka eka ndyangu wa Pan-European ku ya eka Xiarabu, u nga ha lava ku tirhisa /*rtl:insert: {value}*/eka xithaki xa wena xa tifonto ku cinca mavito ya mindyangu ya tifonto.

Xikombiso, ku cinca ku suka eka Helvetica Neuefonto ya LTR ku Helvetica Neue Arabicya eka ya RTL, khodi ya wena ya Sass yi nga languteka hi ndlela leyi:

$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 na RTL hi nkarhi wun’we

U lava LTR na RTL hi vumbirhi bya swona eka pheji yin’we? Thanks to RTLCSS String Maps , leswi swi kongomile swinene. Pfuxeta @imports ya wena hi tlilasi, kutani u veka nawu wo thya vito ra ntolovelo wa 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*/

Endzhaku ko tirhisa Sass kutani RTLCSS, xihlawulekisi xin’wana na xin’wana eka tifayela ta wena ta CSS xi ta prepended hi .ltr, na le .rtlka tifayela ta RTL. Sweswi u kota ku tirhisa tifayela leti hatimbirhi eka tluka rin’we, naswona u tirhisa ntsena .ltrkumbe .rtleka swifunengeto swa wena swa swiphemu ku tirhisa tlhelo rin’we kumbe rin’wana.

Edge cases na swipimelo leswi tivekaka

Hambileswi endlelo leri ri twisisekaka, hi kombela u nyikela nyingiso eka leswi landzelaka:

Loko u cinca .ltrna .rtl, tiyisisa leswaku u engetela dirna langswihlawulekisi hi ku ya hi swona.
Ku layicha tifayela leti hatimbirhi swi nga va xiphiqo xa xiviri xa matirhelo: anakanya hi ku antswisa ko karhi , naswona kumbexana ringeta ku layicha yin’wana ya tifayela teto hi ndlela leyi nga fambisaniki .
Switayele swa nesting hi ndlela leyi swita sivela form-validation-state()mixin ya hina kuva yi tirha tani hileswi ayi kunguhatiwile, xisweswo swilava leswaku u yi tweak nyana hi wexe. Vona #31223 .

Xihambanisi xa breadcrumb hi xona ntsena lexi lavaka ku cinca-cinca ka xona lokuntshwa— ku nga $breadcrumb-divider-flipped—ku tihlawulela eka $breadcrumb-divider.

RTL