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-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" 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-+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 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*/

Nadat jy Sass en dan RTLCSS laat loop het, sal elke keurder in jou CSS-lêers voorgesit word deur .ltr, en .rtlvir RTL-lêers. Nou kan jy albei lêers op dieselfde bladsy gebruik, en eenvoudig .ltrof .rtlop jou komponent-omhulsels gebruik om die een of die ander rigting te gebruik.

Randgevalle en bekende beperkings

Alhoewel hierdie benadering verstaanbaar is, let asseblief op die volgende:

.ltrWanneer jy en oorskakel .rtl, maak seker dat jy diren langeienskappe dienooreenkomstig byvoeg.
Die laai van beide lêers kan 'n werklike prestasie-bottelnek wees: oorweeg 'n bietjie optimalisering , en probeer dalk om een van daardie lêers asynchronies te laai .
Om style op hierdie manier te nes, sal verhoed dat ons form-validation-state()mengin werk soos bedoel, dus vereis dat jy dit self 'n bietjie aanpas. Sien #31223 .

Die broodkrummelskeier is die enigste geval wat sy eie splinternuwe veranderlike vereis— naamlik $breadcrumb-divider-flipped—verstek na $breadcrumb-divider.

RTL