RTL

Learje hoe't jo stipe kinne ynskeakelje foar tekst fan rjochts nei lofts yn Bootstrap oer ús yndieling, komponinten en nutsbedriuwen.

Op dizze side

Wês bekend

Wy riede oan om earst fertroud te wurden mei Bootstrap troch te lêzen fia ús Getting Started Introduction page . Sadree't jo hawwe rûn troch it, fierder lêzen hjir foar hoe't jo RTL ynskeakelje.

Jo kinne ek lêze oer it RTLCSS-projekt , om't it ús oanpak foar RTL macht.

Eksperimintele funksje

De RTL-funksje is noch altyd eksperiminteel en sil wierskynlik evoluearje neffens feedback fan brûkers. Iets gespot of hawwe in ferbettering foar te stellen? Iepenje in probleem , wy wolle graach jo ynsjoch krije.

Fereaske HTML

D'r binne twa strange easken foar it ynskeakeljen fan RTL yn Bootstrap-oandreaune siden.

Set dir="rtl"op it <html>elemint.
Foegje in passend langattribút ta, lykas lang="ar", op it <html>elemint.

Fan dêrút moatte jo in RTL-ferzje fan ús CSS opnimme. Hjir is bygelyks it stylblêd foar ús kompilearre en minifisearre CSS mei RTL ynskeakele:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">

Starter sjabloan

Jo kinne sjen de boppesteande easken wjerspegele yn dizze wizige RTL starter sjabloan.

<!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-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" 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-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 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-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Foarbylden fan RTL

Begjin mei ien fan ús ferskate RTL-foarbylden .

Oanpak

Us oanpak foar it bouwen fan RTL-stipe yn Bootstrap komt mei twa wichtige besluten dy't ynfloed hawwe op hoe't wy ús CSS skriuwe en brûke:

Earst hawwe wy besletten om it te bouwen mei it RTLCSS- projekt. Dit jout ús wat krêftige funksjes foar it behearen fan feroarings en oerskriuwingen by it ferpleatsen fan LTR nei RTL. It lit ús ek twa ferzjes fan Bootstrap bouwe fan ien codebase.
Twadder hawwe wy in hantsjefol rjochtingsklassen omneamd om in oanpak fan logyske eigenskippen oan te nimmen. De measten fan jo hawwe al ynteraksje mei logyske eigenskippen tanksij ús flex-hulpprogramma's - se ferfange rjochtingseigenskippen lykas leften rightfoar starten end. Dat makket de klasse nammen en wearden passend foar LTR en RTL sûnder overhead.

Bygelyks, ynstee fan .ml-3foar margin-left, brûke .ms-3.

Wurkje mei RTL, fia ús boarne Sass of kompilearre CSS, soe lykwols net folle oars moatte wêze fan ús standert LTR.

Oanpasse fan boarne

As it giet om oanpassing , is de foarkommende manier om te profitearjen fan fariabelen, kaarten en mixins. Dizze oanpak wurket itselde foar RTL, sels as it nei ferwurke is fan 'e kompilearre bestannen, tank oan hoe't RTLCSS wurket .

Oanpaste RTL wearden

Mei help fan RTLCSS wearde rjochtlinen , kinne jo meitsje in fariabele útfier in oare wearde foar RTL. Om bygelyks it gewicht foar $font-weight-boldde hiele koadebase te ferminderjen, kinne jo de /*rtl: {value}*/syntaksis brûke:

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

Wat soe útfiere nei it folgjende foar ús standert CSS en RTL CSS:

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

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

Alternative lettertype stack

Yn it gefal dat jo in oanpast lettertype brûke, wês dan bewust dat net alle lettertypen it net-Latynske alfabet stypje. Om te wikseljen fan Pan-Jeropeeske nei Arabyske famylje, moatte jo miskien brûke /*rtl:insert: {value}*/yn jo lettertypestapel om de nammen fan lettertypefamyljes te feroarjen.

Om bygelyks te wikseljen fan Helvetica Neue Webfontfoar LTR nei Helvetica Neue Arabicfoar RTL, sjocht jo Sass-koade der sa út:

$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 en RTL tagelyk

Need sawol LTR as RTL op deselde side? Mei tank oan RTLCSS String Maps , dit is frij ienfâldich. Wrap jo @imports mei in klasse, en set in oanpaste omneamingsregel foar 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*/

Nei it útfieren fan Sass dan RTLCSS, sil elke selector yn jo CSS-bestannen foarôfgeand wurde troch .ltr, en .rtlfoar RTL-bestannen. No kinne jo beide bestannen op deselde side brûke, en gewoan .ltrof .rtlop jo komponinten wrappers brûke om ien of oare rjochting te brûken.

Edge gefallen en bekende beheinings

Wylst dizze oanpak begryplik is, jouwe asjebleaft omtinken oan it folgjende:

As jo wikselje .ltren .rtl, soargje derfoar dat jo tafoegje diren langattributen neffens.
It laden fan beide bestannen kin in echte knelpunt wêze foar prestaasjes: beskôgje wat optimalisaasje , en besykje miskien ien fan dy bestannen asynchronysk te laden .
Neststilen op dizze manier sille foarkomme dat ús form-validation-state()mixin wurket lykas bedoeld, dus fereaskje dat jo it sels in bytsje oanpasse. Sjoch #31223 .

De breadcrumb separator is it ienige gefal dat syn eigen gloednije fariabele fereasket - nammentlik $breadcrumb-divider-flipped- standert op $breadcrumb-divider.

RTL