RTL

Leer hoe u ondersteuning voor tekst van rechts naar links in Bootstrap inschakelt voor onze lay-out, componenten en hulpprogramma's.

Op deze pagina

Wennen aan

We raden u aan eerst vertrouwd te raken met Bootstrap door onze pagina Aan de slag-introductie te lezen . Als je het eenmaal hebt doorlopen, lees je hier verder voor het inschakelen van RTL.

Misschien wil je ook meer lezen over het RTLCSS-project , omdat het onze benadering van RTL ondersteunt.

Experimentele functie

De RTL-functie is nog experimenteel en zal waarschijnlijk evolueren op basis van feedback van gebruikers. Iets gezien of een verbetering voor te stellen? Open een probleem , we horen graag uw inzichten.

Vereiste HTML

Er zijn twee strikte vereisten voor het inschakelen van RTL in Bootstrap-aangedreven pagina's.

Zet dir="rtl"op het <html>element.
Voeg een geschikt langattribuut, zoals lang="ar", toe aan het <html>element.

Van daaruit moet je een RTL-versie van onze CSS opnemen. Hier is bijvoorbeeld de stylesheet voor onze gecompileerde en verkleinde CSS met RTL ingeschakeld:

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

Startsjabloon

Bovenstaande eisen zie je terug in deze aangepaste RTL starterstemplate.

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

Ga aan de slag met een van onze verschillende RTL-voorbeelden .

Nadering

Onze benadering van het inbouwen van RTL-ondersteuning in Bootstrap gaat gepaard met twee belangrijke beslissingen die van invloed zijn op hoe we onze CSS schrijven en gebruiken:

Eerst hebben we besloten om het te bouwen met het RTLCSS- project. Dit geeft ons een aantal krachtige functies voor het beheren van wijzigingen en overschrijvingen bij het overstappen van LTR naar RTL. Het stelt ons ook in staat om twee versies van Bootstrap te bouwen vanuit één codebase.
Ten tweede hebben we een handvol directionele klassen hernoemd om een logische eigenschappenbenadering toe te passen. De meesten van jullie hebben al interactie gehad met logische eigenschappen dankzij onze flex-hulpprogramma's - ze vervangen richtingseigenschappen zoals leften rightin het voordeel starten end. Dat maakt de klassenamen en -waarden geschikt voor LTR en RTL zonder enige overhead.

Gebruik bijvoorbeeld in plaats van .ml-3voor margin-left..ms-3

Werken met RTL, via onze bron Sass of gecompileerde CSS, zou echter niet veel moeten verschillen van onze standaard LTR.

Aanpassen vanaf bron

Als het gaat om maatwerk , is de voorkeursmanier om te profiteren van variabelen, kaarten en mixins. Deze aanpak werkt hetzelfde voor RTL, zelfs als het is nabewerkt vanuit de gecompileerde bestanden, dankzij de manier waarop RTLCSS werkt .

Aangepaste RTL-waarden

Met behulp van RTLCSS-waarderichtlijnen kunt u van een variabele output een andere waarde voor RTL maken. Als u bijvoorbeeld het gewicht voor $font-weight-boldde hele codebase wilt verlagen, kunt u de /*rtl: {value}*/syntaxis gebruiken:

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

Wat zou resulteren in het volgende voor onze standaard CSS en RTL CSS:

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

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

Alternatieve lettertypestapel

Als u een aangepast lettertype gebruikt, moet u er rekening mee houden dat niet alle lettertypen het niet-Latijnse alfabet ondersteunen. Om over te schakelen van Pan-Europese naar Arabische familie, moet u mogelijk /*rtl:insert: {value}*/in uw font-stack gebruiken om de namen van font-families te wijzigen.

Als u bijvoorbeeld wilt overschakelen van Helvetica Neuelettertype voor LTR naar Helvetica Neue Arabicvoor RTL, kan uw Sass-code er als volgt uitzien:

$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 tegelijk

Zowel LTR als RTL op dezelfde pagina nodig? Dankzij RTLCSS String Maps is dit vrij eenvoudig. Wikkel je @importprogramma's in met een klasse en stel een aangepaste hernoemingsregel in voor 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*/

Nadat u Sass en vervolgens RTLCSS hebt uitgevoerd, wordt elke selector in uw CSS-bestanden voorafgegaan door .ltr, en .rtlvoor RTL-bestanden. Nu kunt u beide bestanden op dezelfde pagina gebruiken en gewoon .ltrof .rtlop uw componentenwrappers gebruiken om de ene of de andere richting te gebruiken.

Randgevallen en bekende beperkingen

Hoewel deze benadering begrijpelijk is, dient u op het volgende te letten:

Zorg er bij het overschakelen van .ltren .rtlvoor dat u diren langkenmerken dienovereenkomstig toevoegt.
Het laden van beide bestanden kan een echte prestatieknelpunt zijn: overweeg wat optimalisatie en probeer misschien een van die bestanden asynchroon te laden .
Door stijlen op deze manier te nesten, zal onze form-validation-state()mixin niet werken zoals bedoeld, dus je moet het zelf een beetje aanpassen. Zie #31223 .

Het broodkruimelscheidingsteken is het enige geval dat zijn eigen gloednieuwe variabele nodig heeft, namelijk $breadcrumb-divider-flipped-standaard ingesteld op $breadcrumb-divider.

RTL