RTL
Wige uburyo bwo kwemerera inkunga kuburyo bwibumoso-mwandiko muri Bootstrap murwego rwimiterere, ibice, nibikorwa byingirakamaro.
Menya neza
Turasaba ko tumenyera Bootstrap ubanza gusoma ukoresheje urupapuro rwintangiriro . Umaze kubinyuramo, komeza usome hano kugirango ushoboze RTL.
Urashobora kandi gushaka gusoma kumushinga wa RTLCSS , kuko iha imbaraga inzira zacu kuri RTL.
Ikiranga ubushakashatsi
Ikiranga RTL kiracyari igeragezwa kandi birashoboka ko kizahinduka ukurikije ibitekerezo byabakoresha. Wabonye ikintu cyangwa ufite iterambere ryo gutanga ibitekerezo? Fungura ikibazo , twifuza kubona ubushishozi bwawe.
HTML isabwa
Hano haribintu bibiri bisabwa kugirango ushoboze RTL mumapaji akoreshwa na Bootstrap.
- Shyira
dir="rtl"
ku<html>
kintu. - Ongeramo
lang
ikiranga gikwiye, nkalang="ar"
, kuri<html>
element.
Kuva aho, uzakenera gushyiramo verisiyo ya RTL ya CSS yacu. Kurugero, dore urupapuro rwerekana uburyo CSS yakusanyije kandi yagabanijwe hamwe na RTL ishoboye:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">
Inyandikorugero
Urashobora kubona ibisabwa byavuzwe haruguru bigaragarira muri ubu buryo bwahinduwe bwa RTL.
<!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>
Ingero za RTL
Tangira hamwe nurugero rwacu rwa RTL .
Inzira
Uburyo bwacu bwo kubaka inkunga ya RTL muri Bootstrap buzanye ibyemezo bibiri byingenzi bigira ingaruka kuburyo twandika no gukoresha CSS yacu:
-
Ubwa mbere, twahisemo kuyubaka n'umushinga RTLCSS . Ibi biduha ibintu bikomeye byo gucunga impinduka no kurenga mugihe wimutse uva LTR ujya RTL. Iratwemerera kandi kubaka verisiyo ebyiri za Bootstrap kuva codebase imwe.
-
Icya kabiri, twahinduye amazina y'ibyiciro byerekezo kugirango twemeze ibintu byumvikana. Benshi murimwe mumaze gukorana nibintu byumvikana tubikesha ibikorwa byacu bya flex-basimbuza icyerekezo cyerekezo nka
left
kandiright
muburyo bwizastart
kandiend
. Ibyo bituma amazina yishuri nindangagaciro bikwiranye na LTR na RTL nta hejuru.
Kurugero, aho .ml-3
kugirango margin-left
, koresha .ms-3
.
Gukorana na RTL, binyuze mumasoko yacu Sass cyangwa yakusanyije CSS, ntibigomba gutandukana cyane na LTR isanzwe nubwo.
Hindura isoko
Mugihe cyo kwihindura , inzira yatoranijwe nugukoresha inyungu zimpinduka, amakarita, hamwe nuruvange. Ubu buryo bukora kimwe kuri RTL, kabone niyo byakorwa nyuma yama dosiye yakozwe, tubikesha uburyo RTLCSS ikora .
Koresha indangagaciro za RTL
Ukoresheje amabwiriza yagaciro ya RTLCSS , urashobora gukora ibintu bihinduka bisohoka bitandukanye na RTL. Kurugero, kugirango ugabanye uburemere kuri $font-weight-bold
codebase yose, urashobora gukoresha /*rtl: {value}*/
syntax:
$font-weight-bold: 700 #{/* rtl:600 */} !default;
Nibishobora gusohoka mubikurikira kuri CSS idasanzwe na RTL CSS:
/* bootstrap.css */
dt {
font-weight: 700 /* rtl:600 */;
}
/* bootstrap.rtl.css */
dt {
font-weight: 600;
}
Ubundi buryo bw'imyandikire
Mugihe ukoresha imyandikire yihariye, menya ko imyandikire yose idashyigikira inyuguti zitari ikilatini. Kugirango uhindure Pan-Europe ujye mumuryango wabarabu, urashobora gukenera gukoresha /*rtl:insert: {value}*/
mumyandikire yawe kugirango uhindure amazina yimiryango yimyandikire.
Kurugero, kugirango uhindure Helvetica Neue Webfont
kuri LTR ujya Helvetica Neue Arabic
kuri RTL, code yawe ya Sass isa nkiyi:
$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 na RTL icyarimwe
Ukeneye LTR na RTL byombi kurupapuro rumwe? Ndashimira Ikarita Ikarita ya RTLCSS , ibi biroroshye. Kuzuza @import
s yawe hamwe nishuri, hanyuma ushireho itegeko ryo guhindura izina rya 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*/
Nyuma yo gukora Sass noneho RTLCSS, buriwatoranije muri dosiye yawe ya CSS azategurwa na .ltr
, hamwe na .rtl
dosiye ya RTL. Noneho urashobora gukoresha dosiye zombi kurupapuro rumwe, hanyuma ukoreshe gusa .ltr
cyangwa .rtl
kubice bipfunyika kugirango ukoreshe kimwe cyangwa ikindi cyerekezo.
Kurangiza imanza n'imbibi zizwi
Mugihe ubu buryo bwumvikana, nyamuneka witondere ibi bikurikira:
- Mugihe uhindura
.ltr
kandi.rtl
, menya neza ko wongeyehodir
nibirangalang
ukurikije. - Gupakurura amadosiye yombi birashobora kuba imikorere yukuri: tekereza kubintu byiza , kandi wenda ugerageze gupakira imwe muriyo dosiye .
- Imyitozo yo guturamo muri ubu buryo
form-validation-state()
izarinda mixin yacu gukora nkuko yabigenewe, bityo bigusaba kubihindura gato wenyine. Reba # 31223 .
Ikariso
Gutandukanya umutsima niwo rubanza rwonyine rusaba ibintu bishya bihinduka - aribyo $breadcrumb-divider-flipped
-bisanzwe $breadcrumb-divider
.