Twe kɔ emu nsɛm atitiriw no so Twe kɔ docs navigation so
Check
in English

RTL

Sua sɛnea wobɛma mmoa a wɔde ma nsɛm a efi nifa so kɔ benkum so no ayɛ adwuma wɔ Bootstrap mu wɔ yɛn nhyehyɛe, nneɛma a ɛwom, ne mfaso horow no nyinaa mu.

Wɔ kratafa yi so

Hu ade yiye

Yɛhyɛ nyansa sɛ di kan hu Bootstrap yiye denam yɛn Getting Started Introduction krataafa no a wobɛkenkan no so . Sɛ wo tu mmirika fa mu wie a, kɔ so kenkan wɔ ha ma sɛnea wobɛma RTL ayɛ adwuma.

Ebia wobɛpɛ nso sɛ wokenkan kɔ soro wɔ RTLCSS adwuma no ho , efisɛ ɛma yɛn kwan a yɛfa so yɛ RTL no tumi.

Nneɛma a wɔde sɔ hwɛ

RTL afã no da so ara yɛ sɔhwɛ na ebia ɛbɛdannan sɛnea wɔn a wɔde di dwuma no nsɛm te. Woahu biribi anaasɛ wowɔ nkɔso bi a wobɛkyerɛ? Open an issue , yɛn ani begye ho sɛ yebenya wo nhumu.

HTML a wɔhwehwɛ

Ahwehwɛdeɛ mmienu a ɛyɛ katee wɔ hɔ a ɛbɛma RTL ayɛ adwuma wɔ nkratafa a Bootstrap-powered no mu.

  1. Fa dir="rtl"si <html>element no so.
  2. Fa langsu a ɛfata, te sɛ lang="ar", ka <html>element no so.

Efi hɔ no, ɛho behia sɛ wode yɛn CSS no RTL nkyerɛase bi ka ho. Sɛ nhwɛso no, yɛn CSS a wɔaboaboa ano na wɔayɛ no ketewaa a RTL ayɛ adwuma no ho stylesheet ni:

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

Starter nsusuwso

Wubetumi ahu atifi hɔ ahwehwɛde ahorow a ɛda adi wɔ RTL mfiase nsusuwso a wɔayɛ no foforo yi mu.

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

RTL nhwɛso ahorow

Fa yɛn RTL nhwɛso ahorow pii no mu biako fi ase .

Kwan

Yɛn kwan a yɛfa so kyekye RTL mmoa kɔ Bootstrap mu no de gyinaesi ahorow abien a ɛho hia a ɛka sɛnea yɛkyerɛw na yɛde yɛn CSS di dwuma no ba:

  1. Nea edi kan no, yesii gyinae sɛ yɛde RTLCSS adwuma no besi. Wei ma yɛn nneɛma bi a tumi wom a yɛde hwɛ nsakraeɛ ne overrides so berɛ a yɛrefiri LTR akɔ RTL. Ɛsan nso ma yɛtumi yɛ Bootstrap nkyerɛaseɛ mmienu firi codebase baako mu.

  2. Nea ɛto so abien, yɛasesa akwankyerɛ adesua ahorow nsa kakraa bi din de afa logical properties kwan so. Mo mu dodow no ara ne logical properties adi nkitaho dedaw esiane yɛn flex utilities nti —wɔsesa direction properties te sɛ leftne rightin favor startne end. Ɛno ma adesuakuw din ne botae ahorow no fata ma LTR ne RTL a enni overhead biara.

Sɛ nhwɛso no, sɛ́ anka wode .ml-3for bedi dwuma no margin-left, fa .ms-3.

Adwuma a ɛne RTL, nam yɛn fibea Sass anaa CSS a wɔaboaboa ano no, ɛnsɛ sɛ ɛyɛ soronko kɛse wɔ yɛn default LTR no ho de, nanso.

Yɛ wo ho sɛnea wopɛ fi fibea

Sɛ ɛba customization , ɔkwan a wɔpɛ ne sɛ wode variables, maps, ne mixins bedi dwuma. Saa kwan yi yɛ adwuma saa ara ma RTL, sɛ mpo ɛyɛ post-processed fi fael ahorow a wɔaboaboa ano no mu a, ɛnam sɛnea RTLCSS yɛ adwuma nti .

RTL gyinapɛn ahorow a wɔahyɛ da ayɛ

Sɛ wode RTLCSS botae akwankyerɛ di dwuma a , wubetumi ama nsakrae a ɛba no ayɛ botae soronko ama RTL. Sɛ nhwɛso no, sɛ wopɛ sɛ wotew emu duru so ma $font-weight-boldwɔ codebase no nyinaa mu a, wubetumi de /*rtl: {value}*/syntax no adi dwuma:

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

Nea ɛbɛba no akɔ nea edidi so yi so ama yɛn default CSS ne RTL CSS:

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

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

Font stack foforo a wɔde di dwuma

Sɛ ɛba sɛ wode nkyerɛwde a wɔahyɛ da ayɛ redi dwuma a, hu sɛ ɛnyɛ nkyerɛwde nyinaa na ɛboa nkyerɛwde a ɛnyɛ Latin de no. Sɛ wopɛ sɛ wodan fi Pan-European kɔ Arabic abusua mu a, ebia ɛho behia sɛ wode di dwuma /*rtl:insert: {value}*/wɔ wo font stack no mu de sesa font mmusua din.

Sɛ nhwɛso no, sɛ wopɛ sɛ wodan fi Helvetica Neuefont ma LTR kɔ Helvetica Neue ArabicRTL a, wo Sass koodu no betumi ayɛ sɛ eyi:

$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 ne RTL bere koro mu

Wo hia LTR ne RTL nyinaa wɔ kratafa koro no ara so? Aseda nka RTLCSS String Maps , eyi yɛ fɛ tẽẽ. Fa @importadesua bi kyekyere wo s no, na fa amanne din foforo mmara ma 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ɛ wotu Sass afei RTLCSS wie a, paw biara a ɛwɔ wo CSS fael ahorow no mu no bedi kan de .ltr, ne .rtlama RTL fael ahorow no. Seesei woatumi de fael abien no nyinaa adi dwuma wɔ kratafa koro no ara so, na wode .ltranaa .rtlwo components wrappers no di dwuma ara kwa de akwankyerɛ biako anaa foforo no adi dwuma.

Edge nsɛm ne anohyeto ahorow a wonim

Bere a ntease wɔ ɔkwan yi so no, yɛsrɛ sɛ hwɛ nea edidi so yi yiye:

  1. Sɛ woresakra .ltrne .rtl, hwɛ hu sɛ wode bɛka ho dirne langsu ahorow sɛnea ɛfata.
  2. Fael abien no nyinaa a wode bɛhyɛ mu no betumi ayɛ adwumayɛ mu ɔhaw ankasa: susuw optimization bi ho , na ebia bɔ mmɔden sɛ wode saa fael no mu biako bɛhyɛ mu asynchronously .
  3. Nesting styles saa kwan yi so no besiw yɛn form-validation-state()mixin no kwan sɛ ɛrenyɛ adwuma sɛnea wɔahyɛ da ayɛ no, enti ɛhwehwɛ sɛ wo tweak no kakra wɔ w’ankasa wo ho. Hwɛ #31223 .

Abodoo a wɔayam no aduru no

Breadcrumb separator no nkutoo ne asɛm a ɛhwehwɛ sɛ n’ankasa nsakrae foforo koraa— a ɛne $breadcrumb-divider-flipped—defaulting to $breadcrumb-divider.

Nneɛma foforo a wɔde boa