RTL

Erfahren Sie, wie Sie die Unterstützung für von rechts nach links verlaufenden Text in Bootstrap für unsere Layouts, Komponenten und Dienstprogramme aktivieren.

Auf dieser Seite

Bekannt machen

Wir empfehlen, sich zuerst mit Bootstrap vertraut zu machen, indem Sie unsere Einführungsseite „Erste Schritte“ lesen . Wenn Sie es durchgearbeitet haben, lesen Sie hier weiter, um zu erfahren, wie Sie RTL aktivieren.

Vielleicht möchten Sie sich auch über das RTLCSS-Projekt informieren , da es unsere Herangehensweise an RTL vorantreibt.

Experimentelle Funktion

Die RTL-Funktion ist noch experimentell und wird sich wahrscheinlich entsprechend dem Feedback der Benutzer weiterentwickeln. Haben Sie etwas entdeckt oder haben Sie einen Verbesserungsvorschlag? Eröffnen Sie ein Problem , wir würden uns freuen, Ihre Erkenntnisse zu erhalten.

Erforderliches HTML

Es gibt zwei strenge Anforderungen für die Aktivierung von RTL in Bootstrap-betriebenen Seiten.

dir="rtl"Auf das <html>Element setzen .
Fügen Sie dem Element ein geeignetes langAttribut hinzu, z. B. .lang="ar"<html>

Von dort aus müssen Sie eine RTL-Version unseres CSS einbinden. Hier ist zum Beispiel das Stylesheet für unser kompiliertes und minimiertes CSS mit aktiviertem RTL:

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

Starter-Vorlage

Sie können die oben genannten Anforderungen in dieser modifizierten RTL-Startervorlage sehen.

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

RTL-Beispiele

Beginnen Sie mit einem unserer zahlreichen RTL-Beispiele .

Sich nähern

Unser Ansatz zum Einbau von RTL-Unterstützung in Bootstrap beinhaltet zwei wichtige Entscheidungen, die sich darauf auswirken, wie wir unser CSS schreiben und verwenden:

Zuerst haben wir uns entschieden, es mit dem RTLCSS- Projekt zu bauen. Dies gibt uns einige leistungsstarke Funktionen zum Verwalten von Änderungen und Überschreibungen beim Wechsel von LTR zu RTL. Es ermöglicht uns auch, zwei Versionen von Bootstrap aus einer Codebasis zu erstellen.
Zweitens haben wir eine Handvoll Richtungsklassen umbenannt, um einen Ansatz mit logischen Eigenschaften zu übernehmen. Die meisten von Ihnen haben dank unserer flexiblen Hilfsprogramme bereits mit logischen Eigenschaften interagiert – sie ersetzen Richtungseigenschaften wie leftund rightzugunsten von startund end. Dadurch sind die Klassennamen und -werte ohne Overhead für LTR und RTL geeignet.

Verwenden Sie beispielsweise anstelle von .ml-3for .margin-left.ms-3

Die Arbeit mit RTL über unseren Quell-Sass oder kompiliertes CSS sollte sich jedoch nicht wesentlich von unserer Standard-LTR unterscheiden.

Passen Sie von der Quelle an

Wenn es um die Anpassung geht, ist der bevorzugte Weg, Variablen, Karten und Mixins zu nutzen. Dieser Ansatz funktioniert dank der Funktionsweise von RTLCSS auch für RTL, selbst wenn er aus den kompilierten Dateien nachbearbeitet wird .

Benutzerdefinierte RTL-Werte

Mit RTLCSS-Wertdirektiven können Sie eine Variable veranlassen, einen anderen Wert für RTL auszugeben. Um beispielsweise die Gewichtung für $font-weight-bolddie gesamte Codebasis zu verringern, können Sie die /*rtl: {value}*/folgende Syntax verwenden:

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

Was für unser Standard-CSS und RTL-CSS Folgendes ausgeben würde:

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

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

Alternativer Schriftstapel

Falls Sie eine benutzerdefinierte Schriftart verwenden, beachten Sie, dass nicht alle Schriftarten das nicht-lateinische Alphabet unterstützen. Um von der paneuropäischen zur arabischen Familie zu wechseln, müssen Sie möglicherweise /*rtl:insert: {value}*/in Ihrem Schriftartenstapel verwenden, um die Namen der Schriftartfamilien zu ändern.

Um beispielsweise von Helvetica Neue Webfontfür LTR zu Helvetica Neue Arabicfür RTL zu wechseln, sieht Ihr Sass-Code so aus:

$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 und RTL gleichzeitig

Benötigen Sie sowohl LTR als auch RTL auf derselben Seite? Dank RTLCSS String Maps ist das ziemlich einfach. Umschließen Sie Ihre @imports mit einer Klasse und legen Sie eine benutzerdefinierte Umbenennungsregel für RTLCSS fest:

/* 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*/

Nachdem Sie Sass und dann RTLCSS ausgeführt haben, wird jedem Selektor in Ihren CSS-Dateien .ltr, und .rtlfür RTL-Dateien vorangestellt. Jetzt können Sie beide Dateien auf derselben Seite verwenden und einfach .ltroder .rtlauf Ihren Komponenten-Wrappern verwenden, um die eine oder andere Richtung zu verwenden.

Grenzfälle und bekannte Einschränkungen

Obwohl dieser Ansatz verständlich ist, beachten Sie bitte Folgendes:

Stellen Sie beim Umschalten von .ltrund sicher, dass Sie entsprechend Attribute von und .rtlhinzufügen .dirlang
Das Laden beider Dateien kann ein echter Leistungsengpass sein: Erwägen Sie eine Optimierung und versuchen Sie vielleicht, eine dieser Dateien asynchron zu laden .
Das Verschachteln von Stilen auf diese Weise verhindert, dass unser form-validation-state()Mixin wie beabsichtigt funktioniert, sodass Sie es selbst ein wenig anpassen müssen. Siehe #31223 .

Das Breadcrumb-Trennzeichen ist der einzige Fall, in dem eine eigene brandneue Variable erforderlich ist – nämlich $breadcrumb-divider-flipped– standardmäßig auf $breadcrumb-divider.

RTL