RTL

Siit saate teada, kuidas lubada Bootstrapis paremalt vasakule kirjutatava teksti tugi meie paigutuse, komponentide ja utiliitide lõikes.

Sellel lehel

Saage tuttavaks

Soovitame esmalt Bootstrapiga tutvuda, lugedes läbi meie alustamise tutvustuse leht . Kui olete selle läbinud, jätkake RTL-i lubamise kohta siit lugemist.

Samuti võiksite lugeda RTLCSS-projekti kohta , kuna see annab meile volitused meie lähenemisele RTL-ile.

Eksperimentaalne funktsioon

RTL-i funktsioon on veel eksperimentaalne ja tõenäoliselt areneb see vastavalt kasutajate tagasisidele. Kas märkasite midagi või soovite midagi parandada? Avage probleem , me sooviksime teie teadmisi saada.

Nõutav HTML

RTL-i lubamiseks Bootstrapi toega lehtedel on kaks ranget nõuet.

Seadke dir="rtl"elemendile <html>.
Lisage elemendile sobiv langatribuut, näiteks lang="ar".<html>

Sealt edasi peate lisama meie CSS-i RTL-versiooni. Näiteks siin on meie koostatud ja minimeeritud CSS-i stiilitabel, kus RTL on lubatud:

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

Stardi mall

Näete ülaltoodud nõudeid, mis kajastuvad selles muudetud RTL-i käivitusmallis.

<!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 näited

Alustage ühega meie mitmest RTL-i näitest .

Lähenemine

Meie lähenemine RTL-i toe loomisele Bootstrapis hõlmab kahte olulist otsust, mis mõjutavad CSS-i kirjutamist ja kasutamist.

Esiteks otsustasime selle ehitada RTLCSS projektiga. See annab meile võimsaid funktsioone LTR-ilt RTL-ile üleminekul muudatuste ja alistamise haldamiseks. Samuti võimaldab see luua ühest koodibaasist kaks Bootstrapi versiooni.
Teiseks nimetasime käputäie suunaklasse ümber, et võtta kasutusele loogiliste omaduste lähenemisviis. Enamik teist on tänu meie paindlikele utiliitidele loogiliste omadustega juba suhelnud – need asendavad suunaomadusi nagu leftja rightkasuks startja end. See muudab klassinimed ja väärtused LTR-i ja RTL-i jaoks sobivaks ilma lisakuludeta.

Näiteks , .ml-3asemel margin-leftkasutage .ms-3.

RTL-iga töötamine meie allika Sassi või kompileeritud CSS-i kaudu ei tohiks siiski meie vaike-LTR-ist palju erineda.

Kohandage allikast

Kohandamise puhul on eelistatud viis ära kasutada muutujaid, kaarte ja segusid. See lähenemisviis töötab RTL-i puhul samamoodi, isegi kui see on kompileeritud failidest järeltöödeldud, tänu sellele, kuidas RTLCSS töötab .

Kohandatud RTL väärtused

RTLCSS -i väärtusdirektiivide abil saate muuta muutuja väljundiks RTL-i jaoks teistsuguse väärtuse. Näiteks $font-weight-boldkogu koodibaasi kaalu vähendamiseks võite kasutada /*rtl: {value}*/süntaksit:

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

Mis väljastaks meie vaike-CSS-i ja RTL-CSS-i jaoks järgmise:

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

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

Alternatiivne fondivirn

Kui kasutate kohandatud fonti, pidage meeles, et mitte kõik fondid ei toeta mitteladina tähestikku. Üleeuroopaliselt araabia perekonnale üleminekuks peate võib-olla kasutama /*rtl:insert: {value}*/oma fondivirnas fondiperekondade nimede muutmiseks.

Näiteks Helvetica NeueLTR- Helvetica Neue Arabici fondi asemel RTL-i jaoks vahetamiseks võib teie Sassi kood välja näha järgmine:

$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 ja RTL korraga

Kas vajate nii LTR-i kui ka RTL-i samal lehel? Tänu RTLCSS String Mapsile on see üsna lihtne. Pakkige oma @imports klassiga kokku ja määrake RTLCSS-i jaoks kohandatud ümbernimetamise reegel:

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

Pärast Sassi ja seejärel RTLCSS-i käivitamist lisatakse teie CSS-failide iga valija ette .ltrja .rtlRTL-failide jaoks. Nüüd saate kasutada mõlemat faili samal lehel ja lihtsalt kasutada .ltrvõi .rtloma komponentide ümbristel, et kasutada ühte või teist suunda.

Äärejuhtumid ja teadaolevad piirangud

Kuigi see lähenemisviis on arusaadav, pöörake tähelepanu järgmisele:

.ltrja vahetamisel .rtlveenduge, et lisate dirja langatribuudid vastavalt.
Mõlema faili laadimine võib osutuda tõeliseks jõudluse kitsaskohaks: kaaluge optimeerimist ja proovige võib-olla mõnda neist failidest asünkroonselt laadida .
Niimoodi pesastavad stiilid takistavad meie form-validation-state()miksil ettenähtud viisil töötamast, mistõttu peate seda ise pisut kohandama. Vt #31223 .

Leivatee eraldaja on ainus juhtum, mis nõuab oma uhiuut muutujat, nimelt $breadcrumb-divider-flippedvaikimisi $breadcrumb-divider.

RTL