RTL
Siit saate teada, kuidas lubada Bootstrapis paremalt vasakule kirjutatava teksti tugi meie paigutuse, komponentide ja utiliitide lõikes.
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
lang
atribuut, näitekslang="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-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" 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-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 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
left
jaright
kasuksstart
jaend
. See muudab klassinimed ja väärtused LTR-i ja RTL-i jaoks sobivaks ilma lisakuludeta.
Näiteks , .ml-3
asemel margin-left
kasutage .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-bold
kogu 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 Neue Webfont
LTR- ilt Helvetica Neue Arabic
RTL-ile lülitumiseks näeb teie Sassi kood välja 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 @import
s 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 .ltr
ja .rtl
RTL-failide jaoks. Nüüd saate kasutada mõlemat faili samal lehel ja lihtsalt kasutada .ltr
või .rtl
oma 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:
.ltr
ja vahetamisel.rtl
veenduge, et lisatedir
jalang
atribuudid 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 .
Leivapuru juhtum
Leivatee eraldaja on ainus juhtum, mis nõuab oma uhiuut muutujat, nimelt $breadcrumb-divider-flipped
vaikimisi $breadcrumb-divider
.