RTL

Naučite se omogočiti podporo za besedilo od desne proti levi v Bootstrapu v naši postavitvi, komponentah in pripomočkih.

Na tej strani

Seznanite se

Priporočamo, da se najprej seznanite z Bootstrapom tako, da preberete našo uvodno stran za začetek . Ko ga pregledate, nadaljujte z branjem tukaj, kako omogočiti RTL.

Morda boste želeli prebrati tudi o projektu RTLCSS , saj poganja naš pristop k RTL.

Eksperimentalna funkcija

Funkcija RTL je še vedno poskusna in se bo verjetno razvijala glede na povratne informacije uporabnikov. Ste kaj opazili ali predlagate izboljšavo? Odprite vprašanje , radi bi dobili vaše vpoglede.

Zahtevan HTML

Obstajata dve strogi zahtevi za omogočanje RTL na straneh, ki jih poganja Bootstrap.

Nastavite dir="rtl"na <html>element.
Elementu dodajte ustrezen langatribut, lang="ar"na primer <html>.

Od tam boste morali vključiti RTL različico našega CSS. Tukaj je na primer slogovna tabela za naš preveden in zmanjšan CSS z omogočenim RTL:

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

Začetna predloga

Zgornje zahteve si lahko ogledate v tej spremenjeni začetni predlogi RTL.

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

Začnite z enim od naših več primerov RTL .

Pristop

Naš pristop k vgradnji podpore RTL v Bootstrap vključuje dve pomembni odločitvi, ki vplivata na to, kako pišemo in uporabljamo naš CSS:

Najprej smo se odločili, da ga zgradimo s projektom RTLCSS . To nam daje nekaj zmogljivih funkcij za upravljanje sprememb in preglasitev pri prehodu iz LTR v RTL. Prav tako nam omogoča, da zgradimo dve različici Bootstrapa iz ene kodne baze.
Drugič, preimenovali smo nekaj smernih razredov, da bi sprejeli pristop logičnih lastnosti. Večina vas je že sodelovala z logičnimi lastnostmi zahvaljujoč našim pripomočkom flex—nadomeščajo lastnosti smeri, kot sta leftin right, v korist startin end. Zaradi tega so imena in vrednosti razredov primerni za LTR in RTL brez dodatnih stroškov.

Na primer, namesto .ml-3za margin-leftuporabite .ms-3.

Delo z RTL prek našega izvornega Sass ali prevedenega CSS pa se ne bi smelo bistveno razlikovati od našega privzetega LTR.

Prilagodite iz vira

Ko gre za prilagajanje , je najprimernejši način, da izkoristite spremenljivke, zemljevide in mixine. Ta pristop deluje enako za RTL, tudi če je naknadno obdelan iz prevedenih datotek, zahvaljujoč delovanju RTLCSS .

Vrednosti RTL po meri

Z uporabo direktiv vrednosti RTLCSS lahko naredite izhod spremenljivke za drugačno vrednost za RTL. Če želite na primer zmanjšati težo za $font-weight-boldcelotno kodno zbirko, lahko uporabite /*rtl: {value}*/sintakso:

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

Kar bi za naš privzeti CSS in RTL CSS izpisalo naslednje:

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

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

Nadomestni sklad pisav

Če uporabljate pisavo po meri, upoštevajte, da vse pisave ne podpirajo nelatinične abecede. Če želite preklopiti iz panevropske v arabsko družino, boste morda morali uporabiti /*rtl:insert: {value}*/v svojem skladu pisav, da spremenite imena družin pisav.

Na primer, če želite preklopiti s Helvetica Neuepisave za LTR na pisavo za Helvetica Neue ArabicRTL, bi lahko vaša koda Sass izgledala takole:

$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 in RTL hkrati

Potrebujete LTR in RTL na isti strani? Zahvaljujoč RTLCSS String Maps je to precej preprosto. Ovijte svoj @imports z razredom in nastavite pravilo preimenovanja po meri za 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*/

Ko zaženete Sass in nato RTLCSS, bo pred vsakim izbirnikom v vaših datotekah CSS dodano .ltr, in .rtlza datoteke RTL. Zdaj lahko uporabite obe datoteki na isti strani in preprosto uporabite .ltrali .rtlna ovojih komponent, da uporabite eno ali drugo smer.

Robni primeri in znane omejitve

Čeprav je ta pristop razumljiv, bodite pozorni na naslednje:

Ko preklopite .ltrin .rtl, poskrbite, da boste ustrezno dodali atribute dirin .lang
Nalaganje obeh datotek je lahko resnično ozko grlo pri delovanju: razmislite o optimizaciji in morda poskusite eno od teh datotek naložiti asinhrono .
Slogi gnezdenja na ta način bodo preprečili, da bi naš form-validation-state()miksin deloval, kot je predvideno, zato ga boste morali nekoliko prilagoditi sami. Glej #31223 .

Ločilo drobtinic je edini primer, ki zahteva lastno povsem novo spremenljivko – in sicer $breadcrumb-divider-flipped– privzeto na $breadcrumb-divider.

RTL