RTL
Naučite kako omogućiti podršku za tekst koji se piše zdesna nalijevo u Bootstrapu kroz naš izgled, komponente i uslužne programe.
Upoznajte se
Preporučujemo da se prvo upoznate sa Bootstrapom tako što ćete pročitati našu stranicu Uvod za početak rada . Nakon što ga prođete, nastavite čitati ovdje kako omogućiti RTL.
Možda biste željeli pročitati i RTLCSS projekat , jer on pokreće naš pristup RTL-u.
Eksperimentalna karakteristika
RTL funkcija je još uvijek eksperimentalna i vjerovatno će se razvijati prema povratnim informacijama korisnika. Primetili ste nešto ili želite da predložite poboljšanje? Otvorite problem , voljeli bismo da dobijemo vaše uvide.
Potreban HTML
Postoje dva stroga zahtjeva za omogućavanje RTL-a na stranicama koje pokreće Bootstrap.
- Postavite
dir="rtl"
na<html>
element. - Dodajte odgovarajući
lang
atribut, kao štolang="ar"
je , na<html>
element.
Odatle ćete morati uključiti RTL verziju našeg CSS-a. Na primjer, evo tablice stilova za naš kompajlirani i minimizirani CSS sa omogućenim RTL-om:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" crossorigin="anonymous">
Početni šablon
Gore navedene zahtjeve možete vidjeti u ovom modificiranom RTL starter predlošku.
<!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 primjeri
Započnite s jednim od naših nekoliko RTL primjera .
Pristup
Naš pristup izgradnji RTL podrške u Bootstrap dolazi s dvije važne odluke koje utiču na to kako pišemo i koristimo naš CSS:
-
Prvo smo odlučili da ga izgradimo sa RTLCSS projektom. Ovo nam daje neke moćne karakteristike za upravljanje promjenama i zaobilaženjem pri prelasku sa LTR na RTL. Takođe nam omogućava da napravimo dve verzije Bootstrapa iz jedne baze koda.
-
Drugo, preimenovali smo nekoliko klasa usmjerenih kako bismo usvojili pristup logičkih svojstava. Većina vas je već stupila u interakciju s logičkim svojstvima zahvaljujući našim fleksibilnim uslužnim programima—oni zamjenjuju svojstva smjera poput
left
iright
u koriststart
iend
. To čini imena i vrijednosti klasa prikladnima za LTR i RTL bez ikakvih dodatnih troškova.
Na primjer, umjesto .ml-3
za margin-left
, koristite .ms-3
.
Rad sa RTL-om, preko našeg izvornog Sass-a ili kompajliranog CSS-a, ipak ne bi trebao biti mnogo drugačiji od našeg zadanog LTR-a.
Prilagodite iz izvora
Kada je u pitanju prilagođavanje , preferirani način je da se iskoristi prednosti varijabli, mapa i miksina. Ovaj pristup radi isto za RTL, čak i ako je naknadno obrađen iz kompajliranih datoteka, zahvaljujući tome kako RTLCSS radi .
Prilagođene RTL vrijednosti
Koristeći RTLCSS direktive vrijednosti , možete napraviti promjenljivu izlaz različitu vrijednost za RTL. Na primjer, da biste smanjili težinu za $font-weight-bold
cijelu kodnu bazu, možete koristiti /*rtl: {value}*/
sintaksu:
$font-weight-bold: 700 #{/* rtl:600 */} !default;
Što bi proizvelo sljedeće za naš zadani CSS i RTL CSS:
/* bootstrap.css */
dt {
font-weight: 700 /* rtl:600 */;
}
/* bootstrap.rtl.css */
dt {
font-weight: 600;
}
Alternativni skup fontova
U slučaju da koristite prilagođeni font, imajte na umu da svi fontovi ne podržavaju nelatinično pismo. Da biste prešli sa panevropske na arapsku porodicu, možda ćete morati da koristite /*rtl:insert: {value}*/
u svom skupu fontova da izmenite imena porodica fontova.
Na primjer, da biste se prebacili sa Helvetica Neue Webfont
za LTR na Helvetica Neue Arabic
za RTL, vaš Sass kod izgleda ovako:
$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 i RTL u isto vrijeme
Trebate i LTR i RTL na istoj stranici? Zahvaljujući RTLCSS String Maps , ovo je prilično jednostavno. Omotajte svoje @import
s klasom i postavite prilagođeno pravilo preimenovanja 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*/
Nakon pokretanja Sass-a, a zatim RTLCSS-a, svaki selektor u vašim CSS datotekama će biti preveden sa .ltr
, a .rtl
za RTL datoteke. Sada možete koristiti obje datoteke na istoj stranici i jednostavno koristite .ltr
ili .rtl
na omotima komponenti da biste koristili jedan ili drugi smjer.
Rubni slučajevi i poznata ograničenja
Iako je ovaj pristup razumljiv, obratite pažnju na sljedeće:
- Prilikom prebacivanja
.ltr
i.rtl
, pobrinite se da dodatedir
ilang
atribute u skladu s tim. - Učitavanje oba fajla može biti pravo usko grlo u performansama: razmislite o nekoj optimizaciji i možda pokušajte da učitate jedan od tih fajlova asinhrono .
- Stilovi ugniježđenja na ovaj način će spriječiti da naš
form-validation-state()
miksin radi kako je predviđeno, pa ćete ga morati malo sami podesiti. Pogledajte #31223 .
Slučaj sa mrvicama
Razdjelnik hljebnih mrvica je jedini slučaj koji zahtijeva vlastitu potpuno novu varijablu— naime — zadanu vrijednost .$breadcrumb-divider-flipped
$breadcrumb-divider