Wiesselt op den Haaptinhalt Wiesselt op d'Docs Navigatioun
Check
in English

RTL.lu

Léiert wéi Dir Ënnerstëtzung fir riets-zu-lénks Text am Bootstrap iwwer eise Layout, Komponenten an Utilities aktivéiert.

Op dëser Säit

Bekannt

Mir recommandéieren Iech fir d'éischt mat Bootstrap vertraut ze maachen andeems Dir eis Getting Started Aféierung Säit liest . Wann Dir et duerchgefouert hutt, liest weider hei fir wéi Dir RTL aktivéiert.

Dir wëllt och iwwer den RTLCSS-Projet noliesen , well et eis Approche fir RTL mécht.

Experimentell Fonktioun

D'RTL-Feature ass nach ëmmer experimentell a wäert sech no Benotzer Feedback wuel entwéckelen. Hutt Dir eppes gesinn oder hutt Dir eng Verbesserung ze proposéieren? Maacht en Thema op, mir géife gären Är Abléck kréien.

Néideg HTML

Et ginn zwou strikt Ufuerderunge fir RTL op Bootstrap-powered Säiten z'aktivéieren.

  1. Setzt dir="rtl"op d' <html>Element.
  2. Füügt e passende langAttribut, wéi lang="ar", op d' <html>Element.

Vun do aus, musst Dir eng RTL Versioun vun eiser CSS enthalen. Zum Beispill, hei ass de Stylesheet fir eis kompiléiert a minifizéiert CSS mat RTL aktivéiert:

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

Dir kënnt déi uewe genannten Ufuerderunge gesinn an dëser modifizéierter RTL Starter Schabloun.

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

Start mat engem vun eisen verschiddenen RTL Beispiller .

Approche

Eis Approche fir RTL Ënnerstëtzung an Bootstrap opzebauen kënnt mat zwou wichtegen Entscheedungen déi beaflossen wéi mir eis CSS schreiwen an benotzen:

  1. Als éischt hu mir beschloss et mam RTLCSS- Projet ze bauen. Dëst gëtt eis e puer mächteg Fonctiounen fir d'Gestioun vun Ännerungen an iwwerdribblen wann aus LTR zu RTL Plënneren. Et erlaabt eis och zwou Versioune vu Bootstrap aus enger Codebase ze bauen.

  2. Zweetens, mir hunn eng Handvoll Direktional Klassen ëmbenannt fir eng logesch Eegeschafte Approche unzehuelen. Déi meescht vun iech hu scho mat logesche Properties interagéiert dank eise Flex Utilities - si ersetzen Richtungseigenschaften wéi lefta rightfir startan end. Dat mécht d'Klassennimm a Wäerter passend fir LTR an RTL ouni Overhead.

Zum Beispill, amplaz .ml-3fir margin-left, benotzt .ms-3.

Mat RTL ze schaffen, duerch eis Quell Sass oder kompiléiert CSS, sollt awer net vill anescht sinn wéi eisem Standard LTR.

Personnaliséiert vun der Quell

Wann et ëm Personnalisatioun kënnt , ass de bevorzugte Wee fir Variabelen, Kaarten a Mixins ze profitéieren. Dës Approche funktionnéiert d'selwecht fir RTL, och wann se aus de kompiléierten Dateien no veraarbecht gëtt, dank wéi RTLCSS funktionnéiert .

Benotzerdefinéiert RTL Wäerter

Mat RTLCSS Wäert Direktiven , kënnt Dir eng Variabel Output en anere Wäert fir RTL maachen. Zum Beispill, fir d'Gewiicht fir $font-weight-boldd'ganz Codebase ze reduzéieren, kënnt Dir d' /*rtl: {value}*/Syntax benotzen:

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

Wat géif op déi folgend fir eis Standard CSS an RTL CSS erausginn:

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

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

Alternativ Schrëft Stack

Am Fall wou Dir eng personaliséiert Schrëft benotzt, bewosst datt net all Schrëften dat net-laténgescht Alphabet ënnerstëtzen. Fir vu Pan-europäesch an arabesch Famill ze wiesselen, musst Dir vläicht /*rtl:insert: {value}*/an Ärem Schrëftstapel benotzen fir d'Nimm vun de Schrëftfamilljen z'änneren.

Zum Beispill, fir vun der Helvetica NeueSchrëft fir LTR op Helvetica Neue Arabicfir RTL ze wiesselen, kéint Äre Sass Code esou ausgesinn:

$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 an RTL gläichzäiteg

Braucht souwuel LTR wéi RTL op der selwechter Säit? Dank RTLCSS String Maps ass dëst zimlech einfach. Wrap Är @imports mat enger Klass, a set eng personaliséiert Rename Regel fir 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*/

Nodeems Dir Sass dann RTLCSS leeft, gëtt all Selector an Ären CSS-Dateien duerch .ltr, a .rtlfir RTL-Dateien virgestallt. Elo kënnt Dir béid Dateien op der selwechter Säit benotzen, an einfach benotzen .ltroder .rtlop Äre Komponenten Wrapper fir eng oder déi aner Richtung ze benotzen.

Rand Fäll a bekannt Aschränkungen

Och wann dës Approche verständlech ass, kuckt w.e.g. op déi folgend:

  1. Wann Dir wiesselt .ltran .rtl, gitt sécher datt Dir entspriechend Attributer addéiert dir.lang
  2. Béid Dateien lueden kann e richtege Performance-Flaschenhals sinn: betruecht e puer Optimisatioun , a probéiert vläicht eng vun dësen Dateien asynchron ze lueden .
  3. Nesting Stiler sou verhënnert datt eise form-validation-state()Mixin funktionnéiert wéi virgesinn, also erfuerdert Dir et e bëssen selwer ze tweaken. Kuckt #31223 .

De Broutkummer Fall

De Breadcrumb Separator ass deen eenzege Fall deen seng eege fuschneie Variabel erfuerdert - nämlech $breadcrumb-divider-flipped- Default op $breadcrumb-divider.

Zousätzlech Ressourcen