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.
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
lang
Attribut 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-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" 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-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" 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-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" 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-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" 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
left
undright
zugunsten vonstart
undend
. Dadurch sind die Klassennamen und -werte ohne Overhead für LTR und RTL geeignet.
Verwenden Sie beispielsweise anstelle von .ml-3
for .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-bold
die 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 Webfont
für LTR zu Helvetica Neue Arabic
fü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 @import
s 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 .rtl
für RTL-Dateien vorangestellt. Jetzt können Sie beide Dateien auf derselben Seite verwenden und einfach .ltr
oder .rtl
auf 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
.ltr
und sicher, dass Sie entsprechend Attribute von und.rtl
hinzufügen .dir
lang
- 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 .
Der Breadcrumb-Fall
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
.