RTL
Ianaro ny fomba ahafahan'ny fanohanana ny lahatsoratra havanana miankavia ao amin'ny Bootstrap manerana ny fandrindrana, ny singa ary ny fitaovana ampiasainay.
Fantaro
Manoro hevitra izahay mba hahalalanao ny Bootstrap aloha amin'ny famakiana ny pejy Fampidirana fanombohana anay . Rehefa vitanao ilay izy dia tohizo ny famakiana eto momba ny fomba ahafahan'ny RTL.
Azonao atao ihany koa ny mamaky momba ny tetikasa RTLCSS , satria izany dia manome hery ny fomba fiasantsika amin'ny RTL.
Endri-javatra andrana
Ny endri-javatra RTL dia mbola andrana ary mety hivoatra araka ny tamberin'ny mpampiasa. Nahita zavatra na misy fanatsarana azo aroso? Sokafy olana iray , tianay ny hahazo ny hevitrao.
HTML ilaina
Misy fepetra henjana roa ahafahana mampandeha ny RTL amin'ny pejin'ny Bootstrap.
- Hiverina
dir="rtl"
any amin'ny<html>
element. - Manampia
lang
toetra mety, toy nylang="ar"
, amin'ny<html>
singa.
Avy eo dia mila mampiditra kinova RTL amin'ny CSS-nay ianao. Ohatra, ity ny stylesheet ho an'ny CSS voaangona sy nohavaozina miaraka amin'ny RTL afaka:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">
Modely fanombohana
Azonao atao ny mahita ireo fepetra etsy ambony hita taratra amin'ity maodely fanombohana RTL novaina ity.
<!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>
Ohatra RTL
Manomboha amin'ny iray amin'ireo ohatra RTL marobe .
fomba Fiasa
Ny fomba fiasantsika amin'ny fananganana fanohanana RTL ao amin'ny Bootstrap dia misy fanapahan-kevitra manan-danja roa izay misy fiantraikany amin'ny fomba fanoratana sy fampiasana ny CSS:
-
Voalohany, nanapa-kevitra ny hanangana izany miaraka amin'ny tetikasa RTLCSS izahay. Izany dia manome antsika endri-javatra mahery vaika sasany amin'ny fitantanana ny fanovana sy ny fanoloana rehefa mifindra avy amin'ny LTR mankany RTL. Izy io koa dia mamela antsika hanangana dikan-teny roa amin'ny Bootstrap avy amin'ny codebase iray.
-
Faharoa, nosoloinay anarana vitsivitsy amin'ireo kilasy tari-dalana mba hampiasana fomba fiasa lojika. Ny ankamaroanareo dia efa nifanerasera tamin'ny fananana lojika noho ny fampiasanay flex—izy ireo dia manolo ny toetran'ny fitarihana toy ny
left
aryright
manohanastart
syend
. Izany no mahatonga ny anaran'ny kilasy sy ny soatoavina mifanaraka amin'ny LTR sy RTL tsy misy overhead.
Ohatra, fa tsy ho .ml-3
an'ny margin-left
, ampiasao .ms-3
.
Ny fiaraha-miasa amin'ny RTL, amin'ny alàlan'ny loharano Sass na CSS natambatra, dia tsy tokony ho hafa noho ny LTR mahazatra antsika.
Amboary avy amin'ny loharano
Raha mikasika ny fanasokajiana , ny fomba tiana indrindra dia ny manararaotra ireo fari-pahalalana, sarintany ary mixins. Ity fomba fiasa ity dia miasa mitovy amin'ny RTL, na dia avy amin'ny rakitra voaangona aza izy io, noho ny fomba fiasan'ny RTLCSS .
Sanda RTL manokana
Amin'ny fampiasana ny toromarika sanda RTLCSS , azonao atao ny manamboatra sanda hafa ho an'ny RTL ny vokatra miovaova. Ohatra, mba hampihenana ny lanjany $font-weight-bold
manerana ny codebase dia azonao ampiasaina ny /*rtl: {value}*/
syntax:
$font-weight-bold: 700 #{/* rtl:600 */} !default;
Izay mety hivoaka amin'ireto manaraka ireto ho an'ny CSS default sy RTL CSS:
/* bootstrap.css */
dt {
font-weight: 700 /* rtl:600 */;
}
/* bootstrap.rtl.css */
dt {
font-weight: 600;
}
Antontan-tsoratra hafa
Raha toa ka mampiasa endri-tsoratra mahazatra ianao dia tandremo fa tsy ny endritsoratra rehetra no manohana ny abidy tsy latina. Raha hifindra avy amin'ny fianakaviana Pan-European mankany Arabo ianao dia mety mila mampiasa /*rtl:insert: {value}*/
ao amin'ny antontam-endrinao ianao hanovana ny anaran'ny fianakaviamben'ny endritsoratra.
Ohatra, raha hifindra avy Helvetica Neue Webfont
amin'ny LTR mankany Helvetica Neue Arabic
amin'ny RTL dia toy izao ny kaody Sass-nao:
$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 sy RTL miaraka
Mila LTR sy RTL amin'ny pejy iray ve ianao? Misaotra an'i RTLCSS String Maps , tena tsotra izany. Fenoy kilasy ny @import
s anao, ary mametraha fitsipika fanovana anarana ho an'ny 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*/
Aorian'ny fampandehanana ny Sass avy eo ny RTLCSS, ny mpisafidy tsirairay ao amin'ny rakitra CSS-nao dia apetraka amin'ny .ltr
, ary .rtl
ho an'ny rakitra RTL. Ankehitriny ianao dia afaka mampiasa ireo rakitra roa ao amin'ny pejy iray ihany, ary mampiasa fotsiny .ltr
na .rtl
amin'ny fonon'ny singa ampiasainao mba hampiasana lalana iray na hafa.
Raharaha Edge sy ny fetra fantatra
Na dia azo takarina aza ity fomba ity, dia tandremo ireto manaraka ireto:
- Rehefa mifamadika
.ltr
sy.rtl
, ataovy azo antoka fa manampydir
sylang
toetra mifanaraka amin'izany ianao. - Ny fametrahana ireo rakitra roa ireo dia mety ho tena olana amin'ny fampandehanana azy: diniho ny fanatsarana sasany , ary mety andramo ny hampiditra ny iray amin'ireo rakitra ireo amin'ny fomba asynchronous .
- Ny fomba fanatobiana amin'ity fomba ity dia hanakana ny
form-validation-state()
mixin tsy hiasa araka ny tokony ho izy, noho izany dia mila manitsy azy irery ianao. Jereo ny #31223 .
Ny kitapo mofo
Ny fanasarahana mofo no hany tranga mitaky ny fari-piadidiany vaovao — izany hoe $breadcrumb-divider-flipped
— mivadika amin'ny $breadcrumb-divider
.