RTL

Leer hoe om ondersteuning vir regs-na-links-teks in Bootstrap oor ons uitleg, komponente en nutsprogramme te aktiveer.

Op hierdie bladsy

Raak vertroud

Ons beveel aan om eers vertroud te raak met Bootstrap deur ons Aan die begin-inleidingbladsy te lees . Sodra jy dit deurgeloop het, gaan voort om hier te lees vir hoe om RTL te aktiveer.

Jy sal dalk ook wil lees oor die RTLCSS-projek , aangesien dit ons benadering tot RTL aandryf.

Eksperimentele kenmerk

Die RTL-funksie is steeds eksperimenteel en sal waarskynlik ontwikkel volgens gebruikersterugvoer. Het jy iets opgemerk of het jy 'n verbetering om voor te stel? Maak 'n kwessie oop , ons sal graag jou insigte wil kry.

Vereiste HTML

Daar is twee streng vereistes vir die aktivering van RTL in Bootstrap-aangedrewe bladsye.

Stel dir="rtl"op die <html>element.
Voeg 'n toepaslike langeienskap, soos lang="ar", by die <html>element.

Van daar af sal jy 'n RTL-weergawe van ons CSS moet insluit. Hier is byvoorbeeld die stylblad vir ons saamgestelde en verkleinde CSS met RTL geaktiveer:

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

Beginner sjabloon

U kan die bogenoemde vereistes in hierdie gewysigde RTL-beginnersjabloon weerspieël sien.

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

Begin met een van ons verskeie RTL-voorbeelde .

Benadering

Ons benadering om RTL-ondersteuning in Bootstrap in te bou kom met twee belangrike besluite wat 'n impak het hoe ons ons CSS skryf en gebruik:

Eerstens het ons besluit om dit met die RTLCSS- projek te bou. Dit gee ons 'n paar kragtige kenmerke vir die bestuur van veranderinge en ignorering wanneer ons van LTR na RTL beweeg. Dit stel ons ook in staat om twee weergawes van Bootstrap vanaf een kodebasis te bou.
Tweedens het ons 'n handjievol rigtinggewende klasse hernoem om 'n logiese eienskappebenadering aan te neem. Die meeste van julle het reeds interaksie gehad met logiese eienskappe danksy ons buigsame hulpprogramme—dit vervang rigtingeienskappe soos leften rightten gunste starten end. Dit maak die klasname en -waardes geskik vir LTR en RTL sonder enige oorhoofse koste.

Gebruik byvoorbeeld in plaas van .ml-3vir margin-left..ms-3

Werk met RTL, deur ons bron Sass of saamgestelde CSS, behoort egter nie veel te verskil van ons verstek LTR nie.

Pasmaak vanaf bron

Wanneer dit by aanpassing kom , is die voorkeur-manier om voordeel te trek uit veranderlikes, kaarte en mengsels. Hierdie benadering werk dieselfde vir RTL, selfs al is dit na-verwerk vanaf die saamgestelde lêers, danksy hoe RTLCSS werk .

Pasgemaakte RTL-waardes

Deur RTLCSS-waarde-aanwysings te gebruik , kan jy 'n veranderlike uitvoer 'n ander waarde vir RTL maak. Byvoorbeeld, om die gewig vir $font-weight-bolddie hele kodebasis te verminder, kan jy die /*rtl: {value}*/sintaksis gebruik:

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

Wat sal uitstuur na die volgende vir ons verstek CSS en RTL CSS:

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

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

Alternatiewe lettertipe stapel

In die geval dat jy 'n pasgemaakte lettertipe gebruik, wees bewus daarvan dat nie alle lettertipes die nie-Latynse alfabet ondersteun nie. Om van Pan-Europese na Arabiese familie oor te skakel, moet jy dalk /*rtl:insert: {value}*/in jou lettertipestapel gebruik om die name van lettertipefamilies te verander.

Byvoorbeeld, om van Helvetica Neue Webfontvir LTR na Helvetica Neue Arabicvir RTL oor te skakel, lyk jou Sass-kode soos volg:

$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 op dieselfde tyd

Benodig beide LTR en RTL op dieselfde bladsy? Danksy RTLCSS String Maps is dit redelik eenvoudig. Draai jou @imports toe met 'n klas, en stel 'n pasgemaakte hernoemreël vir 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*/

After running Sass then RTLCSS, each selector in your CSS files will be prepended by .ltr, and .rtl for RTL files. Now you’re able to use both files on the same page, and simply use .ltr or .rtl on your components wrappers to use one or the other direction.

Edge cases and known limitations

While this approach is understandable, please pay attention to the following:

When switching .ltr and .rtl, make sure you add dir and lang attributes accordingly.
Loading both files can be a real performance bottleneck: consider some optimization, and maybe try to load one of those files asynchronously.
Nesting styles this way will prevent our form-validation-state() mixin from working as intended, thus require you tweak it a bit by yourself. See #31223.

The breadcrumb separator is the only case requiring its own brand new variable— namely $breadcrumb-divider-flipped —defaulting to $breadcrumb-divider.

RTL