RTL
Tgħallem kif tippermetti l-appoġġ għal test minn-lemin għax-xellug f'Bootstrap fit-tqassim, il-komponenti u l-utilitajiet tagħna.
Kun familjari
Nirrakkomandaw li l-ewwel wieħed jiffamiljarizza ruħu ma' Bootstrap billi taqra l- paġna ta' Introduzzjoni ta' Nibdew . Ladarba inti tkun għaddejja minnha, kompli aqra hawn għal kif tista 'tippermetti RTL.
Inti tista 'wkoll trid taqra dwar il-proġett RTLCSS , peress li dan isaħħaħ l-approċċ tagħna għall-RTL.
Karatteristika sperimentali
Il-karatteristika RTL għadha sperimentali u probabbilment se tevolvi skont ir-rispons tal-utent. Insibu xi ħaġa jew għandek xi titjib x'jissuġġerixxi? Iftaħ kwistjoni , nixtiequ niksbu l-għarfien tiegħek.
HTML meħtieġ
Hemm żewġ rekwiżiti stretti għall-abilitazzjoni ta 'RTL fil-paġni li jaħdmu bl-Bootstrap.
- Issettja
dir="rtl"
fuq l-<html>
element. - Żid
lang
attribut xieraq, bħallang="ar"
, fuq l-<html>
element.
Minn hemm, ikollok bżonn tinkludi verżjoni RTL tas-CSS tagħna. Pereżempju, hawn l-stylesheet għas-CSS ikkumpilati u mminifikati tagħna b'RTL attivat:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" crossorigin="anonymous">
Mudell tal-bidu
Tista 'tara r-rekwiżiti ta' hawn fuq riflessi f'dan il-mudell tal-istartjar RTL modifikat.
<!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>
Eżempji RTL
Ibda b'wieħed mill-bosta eżempji tagħna RTL .
Approċċ
L-approċċ tagħna biex nibnu l-appoġġ RTL f'Bootstrap jiġi b'żewġ deċiżjonijiet importanti li għandhom impatt fuq kif niktbu u nużaw is-CSS tagħna:
-
L-ewwel, iddeċidejna li nibnuha bil- proġett RTLCSS . Dan jagħtina xi karatteristiċi b'saħħithom għall-ġestjoni tal-bidliet u l-overrides meta nimxu minn LTR għal RTL. Jippermettilna wkoll li nibnu żewġ verżjonijiet ta 'Bootstrap minn codebase wieħed.
-
It-tieni, semmiejna numru żgħir ta 'klassijiet direzzjonali biex jadottaw approċċ ta' proprjetajiet loġiċi. Ħafna minnkom diġà interazzjonijtu ma 'proprjetajiet loġiċi grazzi għall-utilitajiet flex tagħna—jissostitwixxu proprjetajiet ta' direzzjoni bħal
left
uright
favurstart
uend
. Dan jagħmel l-ismijiet u l-valuri tal-klassi xierqa għal LTR u RTL mingħajr ebda overhead.
Per eżempju, minflok .ml-3
għal margin-left
, uża .ms-3
.
Il-ħidma ma 'RTL, permezz tas-sors tagħna Sass jew CSS ikkumpilati, m'għandhiex tkun ferm differenti mill-LTR default tagħna għalkemm.
Ippersonalizza mis-sors
Meta niġu għall -adattament , il-mod preferut huwa li tieħu vantaġġ minn varjabbli, mapep, u mixins. Dan l-approċċ jaħdem l-istess għal RTL, anki jekk huwa pproċessat wara mill-fajls ikkumpilati, grazzi għal kif jaħdem RTLCSS .
Valuri RTL personalizzati
Bl -użu tad-direttivi tal- valur RTLCSS , tista' tagħmel output varjabbli valur differenti għal RTL. Pereżempju, biex tnaqqas il-piż għal $font-weight-bold
madwar il-codebase, tista' tuża s- /*rtl: {value}*/
sintassi:
$font-weight-bold: 700 #{/* rtl:600 */} !default;
Li joħroġ għal dan li ġej għas-CSS u RTL CSS default tagħna:
/* bootstrap.css */
dt {
font-weight: 700 /* rtl:600 */;
}
/* bootstrap.rtl.css */
dt {
font-weight: 600;
}
Munzell tat-tipa alternattiva
Fil-każ li qed tuża font apposta, kun konxju li mhux il-fonts kollha jappoġġjaw l-alfabett mhux Latin. Biex taqleb minn familja Pan-Ewropea għal familja Għarbija, jista' jkollok bżonn tuża /*rtl:insert: {value}*/
fil-munzell tat-tipa tiegħek biex timmodifika l-ismijiet tal-familji tat-tipa.
Pereżempju, biex taqleb minn Helvetica Neue Webfont
għal LTR għal Helvetica Neue Arabic
għal RTL, il-kodiċi Sass tiegħek jidher bħal dan:
$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 u RTL fl-istess ħin
Għandek bżonn kemm LTR kif ukoll RTL fuq l-istess paġna? Grazzi għal RTLCSS String Maps , dan huwa pjuttost sempliċi. Kebbeb l- @import
i tiegħek bi klassi, u waqqaf regola personalizzata b'isem ġdid għal 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*/
Wara li tħaddem Sass imbagħad RTLCSS, kull selettur fil-fajls CSS tiegħek se jkun prepended minn .ltr
, u .rtl
għall-fajls RTL. Issa int kapaċi tuża ż-żewġ fajls fuq l-istess paġna, u sempliċement tuża .ltr
jew .rtl
fuq it-tgeżwir tal-komponenti tiegħek biex tuża direzzjoni waħda jew oħra.
Każijiet tat-tarf u limitazzjonijiet magħrufa
Filwaqt li dan l-approċċ jinftiehem, jekk jogħġbok agħti attenzjoni għal dan li ġej:
- Meta taqleb
.ltr
u.rtl
, kun żgur li żżiddir
ulang
attributi kif xieraq. - It-tagħbija taż-żewġ fajls tista 'tkun ostakolu reali fil-prestazzjoni: ikkunsidra xi ottimizzazzjoni , u forsi tipprova tgħabbi wieħed minn dawk il-fajls b'mod asinkroniku .
- L-istili tat-tbejjit b'dan il-mod se jipprevjenu l-
form-validation-state()
mixin tagħna milli jaħdmu kif maħsub, u għalhekk jeħtieġu li inti tweak ftit waħdek. Ara #31223 .
Il-każ breadcrumb
Is- separatur tal-breadcrumb huwa l-uniku każ li jeħtieġ il-varjabbli ġdid fjamant tiegħu stess— jiġifieri $breadcrumb-divider-flipped
—default għal $breadcrumb-divider
.