RTL
Sužinokite, kaip įgalinti teksto iš dešinės į kairę palaikymą sistemoje „Bootstrap“ mūsų išdėstyme, komponentuose ir paslaugų programose.
Susipažink
Rekomenduojame pirmiausia susipažinti su „Bootstrap“ perskaitę mūsų pradžios įvado puslapį . Peržiūrėję toliau skaitykite čia, kaip įjungti RTL.
Taip pat galbūt norėsite perskaityti apie RTLCSS projektą , nes jis skatina mūsų požiūrį į RTL.
Eksperimentinė funkcija
RTL funkcija vis dar yra eksperimentinė ir tikriausiai bus tobulinama atsižvelgiant į vartotojų atsiliepimus. Pastebėjote ką nors arba turite ką nors patobulinti? Pradėkite problemą , norėtume gauti jūsų įžvalgų.
Reikalingas HTML
Yra du griežti reikalavimai įgalinti RTL „Bootstrap“ maitinamuose puslapiuose.
- Nustatykite
dir="rtl"
ant<html>
elemento. - Prie elemento pridėkite atitinkamą
lang
atributą, pvz ., .lang="ar"
<html>
Iš ten turėsite įtraukti mūsų CSS RTL versiją. Pavyzdžiui, čia yra mūsų sudaryto ir sumažinto CSS su įjungtu RTL stiliaus lapas:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">
Starterio šablonas
Šiame pakeistame RTL pradžios šablone galite matyti aukščiau nurodytus reikalavimus.
<!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 pavyzdžiai
Pradėkite nuo vieno iš kelių mūsų RTL pavyzdžių .
metodas
Mūsų požiūris į RTL palaikymą „Bootstrap“ apima du svarbius sprendimus, turinčius įtakos tam, kaip rašome ir naudojame CSS:
-
Pirmiausia nusprendėme jį sukurti naudodami RTLCSS projektą. Tai suteikia mums keletą galingų funkcijų, leidžiančių valdyti pakeitimus ir nepaisymą pereinant iš LTR į RTL. Tai taip pat leidžia mums sukurti dvi „Bootstrap“ versijas iš vienos kodų bazės.
-
Antra, pervardijome kelias krypties klases, kad pritaikytume loginių savybių metodą. Daugelis iš jūsų jau bendravo su loginėmis savybėmis dėl mūsų lanksčių paslaugų – jos pakeičia krypties ypatybes, pvz .,
left
irright
naudaistart
irend
. Dėl to klasių pavadinimai ir reikšmės tinka LTR ir RTL be jokių papildomų išlaidų.
Pavyzdžiui, .ml-3
vietoj margin-left
naudokite .ms-3
.
Tačiau darbas su RTL, naudojant mūsų šaltinį Sass arba kompiliuotą CSS, neturėtų labai skirtis nuo numatytojo LTR.
Tinkinti iš šaltinio
Kalbant apie tinkinimą , tinkamiausias būdas yra pasinaudoti kintamųjų, žemėlapių ir mišinių teikiamais pranašumais. Šis metodas taip pat veikia ir RTL, net jei jis vėliau apdorojamas iš sukompiliuotų failų, nes veikia RTLCSS .
Tinkintos RTL reikšmės
Naudodami RTLCSS vertės direktyvas , galite nustatyti kintamojo išvesties skirtingą RTL reikšmę. Pavyzdžiui, norėdami sumažinti svorį $font-weight-bold
visoje kodų bazėje, galite naudoti /*rtl: {value}*/
sintaksę:
$font-weight-bold: 700 #{/* rtl:600 */} !default;
Kuris būtų išvestas į šiuos numatytuosius CSS ir RTL CSS:
/* bootstrap.css */
dt {
font-weight: 700 /* rtl:600 */;
}
/* bootstrap.rtl.css */
dt {
font-weight: 600;
}
Alternatyvi šriftų krūva
Jei naudojate pasirinktinį šriftą, atminkite, kad ne visi šriftai palaiko ne lotynišką abėcėlę. Jei norite pereiti iš visos Europos į arabų šeimą, šriftų grupe gali reikėti naudoti /*rtl:insert: {value}*/
šriftų šeimų pavadinimus.
Pavyzdžiui, norint perjungti iš Helvetica Neue Webfont
LTR į Helvetica Neue Arabic
RTL, jūsų Sass kodas atrodo taip:
$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 ir RTL vienu metu
Reikia ir LTR, ir RTL tame pačiame puslapyje? RTLCSS String Maps dėka tai gana paprasta. Apvyniokite savo @import
s klase ir nustatykite tinkintą RTLCSS pervadinimo taisyklę:
/* 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*/
Paleidus Sass, tada RTLCSS, kiekvienas jūsų CSS failų parinkiklis bus pridėtas .ltr
prie .rtl
RTL failų ir . Dabar galite naudoti abu failus tame pačiame puslapyje ir tiesiog naudoti .ltr
arba .rtl
ant savo komponentų įvynioklius naudoti vieną ar kitą kryptį.
Kraštiniai atvejai ir žinomi apribojimai
Nors šis metodas yra suprantamas, atkreipkite dėmesį į šiuos dalykus:
- Perjungdami
.ltr
ir.rtl
įsitikinkite, kad atitinkamai pridedatedir
irlang
atributus. - Abiejų failų įkėlimas gali būti tikras našumo kliūtis: apsvarstykite galimybę optimizuoti ir galbūt pabandykite įkelti vieną iš tų failų asinchroniškai .
- Tokiu būdu sudėti stiliai neleis mūsų
form-validation-state()
mišiniui veikti taip, kaip numatyta, todėl turėsite patys jį šiek tiek pakoreguoti. Žr. #31223 .
Duonos trupinių byla
Nurodyto kelio skyriklis yra vienintelis atvejis, kai reikalingas visiškai naujas kintamasis, būtent $breadcrumb-divider-flipped
, pagal nutylėjimą $breadcrumb-divider
.