RTL
Naučite se omogočiti podporo za besedilo od desne proti levi v Bootstrapu v naši postavitvi, komponentah in pripomočkih.
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
lang
atribut,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-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" 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-+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 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
left
inright
, v koriststart
inend
. Zaradi tega so imena in vrednosti razredov primerni za LTR in RTL brez dodatnih stroškov.
Na primer, namesto .ml-3
za margin-left
uporabite .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-bold
celotno 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 iz Helvetica Neue Webfont
za LTR na Helvetica Neue Arabic
za RTL, je vaša koda Sass videti 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 @import
s 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 .rtl
za datoteke RTL. Zdaj lahko uporabite obe datoteki na isti strani in preprosto uporabite .ltr
ali .rtl
na ovojih komponent, da uporabite eno ali drugo smer.
Robni primeri in znane omejitve
Čeprav je ta pristop razumljiv, bodite pozorni na naslednje:
- Ko preklopite
.ltr
in.rtl
, poskrbite, da boste ustrezno dodali atributedir
in .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 .
Primer krušnih drobtin
Ločilo drobtinic je edini primer, ki zahteva lastno popolnoma novo spremenljivko – in sicer $breadcrumb-divider-flipped
– privzeto na $breadcrumb-divider
.