in English

RTL

Ithute mokhoa oa ho thusa ho tšehetsa mongolo ho tloha ho le letona ho ea ho le letšehali ho Bootstrap ho pholletsa le sebopeho sa rona, likarolo le lisebelisoa.

Leqepheng lena

Itloaetse

Re khothaletsa ho tloaelana le Bootstrap pele ka ho bala leqephe la rona la Ho Qala Selelekela . Ha u se u qetile ho e bala, tsoela pele ho bala mona bakeng sa mokhoa oa ho nolofalletsa RTL.

U kanna ua batla ho bala ka projeke ea RTLCSS , kaha e matlafatsa mokhoa oa rona ho RTL.

Sebopeho sa liteko

Karolo ea RTL e ntse e lekoa 'me mohlomong e tla fetoha ho latela maikutlo a basebelisi. Na u bone ntho e itseng kapa u na le ntlafatso eo u ka e khothalletsang? Bula bothata , re ka thabela ho fumana lintlha tsa hau.

HTML e hlokahalang

Ho na le litlhokahalo tse peli tse tiileng tsa ho nolofalletsa RTL ho maqephe a matla a Bootstrap.

Beha dir="rtl"holim'a <html>element.
Kenya langtšobotsi e nepahetseng, joalo lang="ar"ka, ho <html>element.

Ho tloha moo, o tla hloka ho kenyelletsa mofuta oa RTL oa CSS ea rona. Mohlala, mona ke leqephe la setaele bakeng sa CSS ea rona e hlophisitsoeng le e ntlafalitsoeng e nang le RTL e lumelletsoeng:

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

template ea ho qala

U ka bona litlhoko tse ka holimo tse hlahang templateng ena e fetotsoeng ea RTL.

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

Qala ka e 'ngoe ea mehlala ea rona e mengata ea RTL .

Atamela

Mokhoa oa rona oa ho aha tšehetso ea RTL ho Bootstrap e tla le liqeto tse peli tsa bohlokoa tse amang tsela eo re ngolang le ho sebelisa CSS ea rona ka eona:

Taba ea pele, re ile ra etsa qeto ea ho e haha ka morero oa RTLCSS . Sena se re fa likarolo tse matla tsa ho laola liphetoho le ho feta ha re tloha LTR ho ea ho RTL. E boetse e re lumella ho theha mefuta e 'meli ea Bootstrap ho tsoa ho codebase e le' ngoe.
Taba ea bobeli, re rehile lihlopha tse 'maloa tsa tataiso ho sebelisa mokhoa o hlakileng oa thepa. Bongata ba lona le se le ntse le sebelisana le thepa e utloahalang ka lebaka la lisebelisoa tsa rona tsa flex-li nka sebaka sa thepa ea tataiso e kang leftle rightmolemong startle end. Seo se etsa hore mabitso le litekanyetso tsa sehlopha li tšoanele LTR le RTL ntle le ho feta.

Ka mohlala, sebakeng sa .ml-3bakeng sa margin-left, sebelisa .ms-3.

Ho sebetsa le RTL, ka mohloli oa rona oa Sass kapa CSS e hlophisitsoeng, ha ea lokela ho fapana haholo le LTR ea rona ea kamehla.

Iketsetse ho tsoa mohloling

Ha ho tluoa tabeng ea ho iketsetsa , mokhoa o ratoang ke ho nka monyetla ka mefuta-futa, limmapa le li-mixins. Mokhoa ona o sebetsa ka mokhoa o ts'oanang ho RTL, leha e ka sebetsoa ka morao ho tsoa ho lifaele tse hlophisitsoeng, ka lebaka la hore na RTLCSS e sebetsa joang .

Maemo a tloaelehileng a RTL

U sebelisa litaelo tsa boleng ba RTLCSS , u ka etsa tlhahiso e fapaneng boleng bo fapaneng bakeng sa RTL. Mohlala, ho theola boima ba 'mele ho $font-weight-boldpholletsa le codebase, o ka sebelisa /*rtl: {value}*/syntax:

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

E ka hlahisang tse latelang bakeng sa CSS ea rona ea kamehla le RTL CSS:

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

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

Mofuta o mong oa melumo

Haeba u sebelisa fonte e tloaelehileng, hlokomela hore ha se lifonte tsohle tse tšehetsang alfabeta eo e seng ea Selatine. Ho tloha ho Pan-European ho ea lelapeng la Searabia, ho ka 'na ha hlokahala hore u sebelise /*rtl:insert: {value}*/ka har'a stack ea hau ea litlhaku ho fetola mabitso a malapa a litlhaku.

Mohlala, ho tloha Helvetica Neuefonteng ea LTR ho Helvetica Neue Arabicea ho RTL, khoutu ea hau ea Sass e ka shebahala tjena:

$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 'ngoe

U hloka LTR le RTL ka bobeli leqepheng le le leng? Ka lebaka la RTLCSS String Maps , sena se hlakile haholo. Qetella @imports ka sehlopha, 'me u behe molao oa ho reha lebitso 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*/

After running Sass then RTLCSS, each selector in your CSS files will be prepended by .ltr, and .rtl for RTL files. Now you’re able to use both files on the same page, and simply use .ltr or .rtl on your components wrappers to use one or the other direction.

Edge cases and known limitations

While this approach is understandable, please pay attention to the following:

When switching .ltr and .rtl, make sure you add dir and lang attributes accordingly.
Loading both files can be a real performance bottleneck: consider some optimization, and maybe try to load one of those files asynchronously.
Nesting styles this way will prevent our form-validation-state() mixin from working as intended, thus require you tweak it a bit by yourself. See #31223.

The breadcrumb separator is the only case requiring its own brand-new variable— namely $breadcrumb-divider-flipped —defaulting to $breadcrumb-divider.

RTL