RTL
Naučite kako omogućiti podršku za tekst zdesna nalijevo u Bootstrapu u našem izgledu, komponentama i uslužnim programima.
Upoznaj se
Preporučujemo da se najprije upoznate s Bootstrapom tako što ćete pročitati našu uvodnu stranicu za početak . Nakon što ga prođete, nastavite čitati ovdje kako omogućiti RTL.
Možda biste također željeli pročitati više o projektu RTLCSS , budući da daje snagu našem pristupu RTL-u.
Eksperimentalna značajka
Značajka RTL još uvijek je eksperimentalna i vjerojatno će se razvijati u skladu s povratnim informacijama korisnika. Uočili ste nešto ili želite predložiti poboljšanje? Otvorite problem , voljeli bismo dobiti 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, poputlang="ar"
,<html>
elementu.
Odatle ćete morati uključiti RTL verziju našeg CSS-a. Na primjer, ovdje je stilska tablica za naš kompilirani i umanjeni CSS s omogućenim RTL-om:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.rtl.min.css" integrity="sha384-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" crossorigin="anonymous">
Početni predložak
Gore navedene zahtjeve možete vidjeti prikazane u ovom modificiranom početnom predlošku RTL-a.
<!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/bootstrap@5.1.3/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/bootstrap@5.1.3/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/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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 Bootstrapu dolazi s dvije važne odluke koje utječu na to kako pišemo i koristimo naš CSS:
-
Prvo smo ga odlučili izgraditi s projektom RTLCSS . To nam daje neke moćne značajke za upravljanje promjenama i nadjačanjima pri prelasku s LTR na RTL. Također nam omogućuje da izgradimo dvije verzije Bootstrapa iz jedne baze koda.
-
Drugo, preimenovali smo nekoliko usmjerenih klasa kako bismo usvojili pristup logičkih svojstava. Većina vas je već bila u interakciji s logičkim svojstvima zahvaljujući našim flex uslužnim programima—oni zamjenjuju svojstva smjera kao što su
left
iright
u koriststart
iend
. To čini imena klasa i vrijednosti prikladnima za LTR i RTL bez ikakvih dodatnih troškova.
Na primjer, umjesto .ml-3
za margin-left
, koristite .ms-3
.
Rad s RTL-om, putem našeg izvornog Sass-a ili kompajliranog CSS-a, ipak se ne bi trebao puno razlikovati od našeg zadanog LTR-a.
Prilagodite iz izvora
Kada je riječ o prilagodbi , preferirani način je iskoristiti prednosti varijabli, mapa i mixina. Ovaj pristup radi isto za RTL, čak i ako je naknadno obrađen iz kompajliranih datoteka, zahvaljujući tome kako radi RTLCSS .
Prilagođene RTL vrijednosti
Koristeći RTLCSS vrijednosne direktive , možete napraviti izlaz varijable drugačije vrijednosti za RTL. Na primjer, da smanjite težinu za $font-weight-bold
cijelu bazu koda, možete koristiti /*rtl: {value}*/
sintaksu:
$font-weight-bold: 700 #{/* rtl:600 */} !default;
Što bi rezultiralo sljedećim za naš zadani CSS i RTL CSS:
/* bootstrap.css */
dt {
font-weight: 700 /* rtl:600 */;
}
/* bootstrap.rtl.css */
dt {
font-weight: 600;
}
Alternativni hrp fontova
U slučaju da koristite prilagođeni font, imajte na umu da svi fontovi ne podržavaju nelatinično pismo. Da biste se prebacili s paneuropske na arapsku obitelj, možda ćete morati upotrijebiti /*rtl:insert: {value}*/
u svom nizu fontova za izmjenu imena obitelji fontova.
Na primjer, za prebacivanje s 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 kartama nizova , ovo je prilično jednostavno. Zamotajte svoj @import
s 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, ispred svakog selektora u vašim CSS datotekama bit će .ltr
, i .rtl
za RTL datoteke. Sada možete koristiti obje datoteke na istoj stranici i jednostavno koristiti .ltr
ili .rtl
na omotima svojih komponenti da koristite jedan ili drugi smjer.
Rubni slučajevi i poznata ograničenja
Iako je ovaj pristup razumljiv, obratite pozornost na sljedeće:
- Kada mijenjate
.ltr
i.rtl
, svakako dodajte atributedir
i u skladu s tim.lang
- Učitavanje obiju datoteka može biti stvarno usko grlo performansi: razmislite o optimizaciji i možda pokušajte učitati jednu od tih datoteka asinkrono .
- Stilovi ugniježđivanja na ovaj način spriječit će naš
form-validation-state()
miksin da radi kako je predviđeno, stoga ćete ga morati malo sami prilagoditi. Vidi #31223 .
Slučaj mrvica kruha
Razdjelnik putanje jedini je slučaj koji zahtijeva vlastitu potpuno novu varijablu— naime — $breadcrumb-divider-flipped
zadanu vrijednost $breadcrumb-divider
.