RTL
Funda indlela yokwenza inkxaso yokubhaliweyo ukusuka ekunene ukuya ekhohlo kwiBootstrap kulo lonke uyilo lwethu, izixhobo, kunye nezinto eziluncedo.
Ziqhelanise
Sincoma ukuqhelana neBootstrap kuqala ngokufunda kwiphepha lethu lentshayelelo yokuQalisa . Nje ukuba uyigqibe, qhubeka ufunda apha malunga nendlela yokwenza i-RTL.
Ungaphinda ufune ukufunda kwiprojekthi ye-RTLCSS , njengoko inika amandla indlela yethu kwi-RTL.
Uphawu lovavanyo
Uphawu lwe-RTL lusazama kwaye mhlawumbi luya kuvela ngokwempendulo yomsebenzisi. Ubone into okanye uphucule ukucebisa? Vula umba , singathanda ukufumana ulwazi lwakho.
HTML efunekayo
Kukho iimfuno ezimbini ezingqongqo zokwenza i-RTL kumaphepha e-Bootstrap-powered.
- Misela
dir="rtl"
into<html>
. - Yongeza uphawu olufanelekileyo
lang
, njengelang="ar"
, kwisiqalelo<html>
.
Ukusuka apho, kuya kufuneka ubandakanye inguqulelo yeRTL yeCSS yethu. Umzekelo, nali icwecwe lesimbo leCSS yethu edityanisiweyo kunye nencitshisiweyo ene-RTL eyenziwe yasebenza:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">
Itemplate yokuqalisa
Uyakwazi ukubona ezi mfuno zingentla zibonakaliswe kule template ilungisiweyo ye-RTL starter.
<!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 imizekelo
Qalisa ngomnye wemizekelo yethu emininzi ye- RTL .
Indlela
Indlela yethu yokwakha inkxaso ye-RTL kwiBootstrap iza nezigqibo ezibini ezibalulekileyo ezichaphazela indlela esibhala ngayo nokusebenzisa iCSS yethu:
-
Okokuqala, sigqibe kwelokuba siyakhe ngeprojekthi ye- RTLCSS . Oku kusinika iimpawu ezinamandla zokulawula utshintsho kunye nokubhala ngaphezulu xa usuka kwi-LTR ukuya kwi-RTL. Ikwasivumela ukuba sakhe iinguqulelo ezimbini zeBootstrap kwikhowudi enye.
-
Okwesibini, siye sathiya ngokutsha iqela leeklasi zokwalathisa ukuze zamkele indlela yepropathi enengqiqo. Uninzi lwenu sele lunxibelelane neepropathi ezinengqiqo enkosi kwizinto zethu eziguquguqukayo-zithatha indawo yeempawu zesalathiso ezifana
left
nokuthanda kunye . Loo nto yenza amagama eklasi kunye namaxabiso afanele i-LTR kunye ne-RTL ngaphandle kwe-overhead.right
start
end
Umzekelo, endaweni ye- .ml-3
, margin-left
sebenzisa .ms-3
.
Ukusebenza ne-RTL, ngomthombo wethu we-Sass okanye i-CSS ehlanganisiweyo, akufuneki kwahluke kakhulu kwi-LTR yethu engagqibekanga.
Lungiselela kwimvelaphi
Xa kuziwa ekwenzeni ngokwezifiso , indlela ekhethwayo kukuthatha ithuba lokuguquguquka, iimephu, kunye nemixube. Le ndlela isebenza ngokufanayo kwi-RTL, nokuba idluliselwe kwiifayile eziqokelelweyo, ngenxa yendlela esebenza ngayo iRTLCSS .
Amaxabiso e-RTL eSiko
Usebenzisa RTLCSS izikhokelo zexabiso , ungenza imveliso eguquguqukayo ixabiso elahlukileyo le-RTL. Umzekelo, ukunciphisa ubunzima kuyo $font-weight-bold
yonke i-codebase, ungasebenzisa i- /*rtl: {value}*/
syntax:
$font-weight-bold: 700 #{/* rtl:600 */} !default;
Yintoni eya kuvelisa koku kulandelayo kwi-CSS yethu engagqibekanga kunye ne-RTL CSS:
/* bootstrap.css */
dt {
font-weight: 700 /* rtl:600 */;
}
/* bootstrap.rtl.css */
dt {
font-weight: 600;
}
Isitakhi sefonti esisesinye
Kwimeko oyisebenzisayo ifonti yesiko, qaphela ukuba ayizizo zonke iifonti ezixhasa ialfabhethi engeyoyesiLatini. Ukutshintshela kwiPan-European ukuya kusapho lwesiArabhu, kunokufuneka usebenzise /*rtl:insert: {value}*/
kwistakhi sakho sefonti ukuguqula amagama osapho lwefonti.
Umzekelo, ukutshintshela kwi Helvetica Neue Webfont
-LTR ukuya Helvetica Neue Arabic
kwi-RTL, ikhowudi yakho ye-Sass ijongeka ngolu hlobo:
$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;
I-LTR kunye ne-RTL ngaxeshanye
Ngaba ufuna zombini i-LTR kunye ne-RTL kwiphepha elifanayo? Enkosi kwi- RTLCSS String Maps , oku kungqale ngqo. Gquba i @import
-s yakho ngeklasi, kwaye usete umgaqo othiya igama ngokwesiko le-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*/
Emva kokuqhuba i-Sass emva koko i-RTLCSS, umkhethi ngamnye kwiifayile zakho ze-CSS uya kulungiselelwa kwangaphambili nge- .ltr
, kunye .rtl
neefayile ze-RTL. Ngoku uyakwazi ukusebenzisa zombini iifayile kwiphepha elinye, kwaye usebenzise ngokulula .ltr
okanye .rtl
kwizixhobo zakho zokusonga ukusebenzisa enye okanye kwelinye icala.
Iimeko ze-Edge kunye nemida eyaziwayo
Nangona le ndlela iqondakalayo, nceda uqaphele oku kulandelayo:
- Xa utshintsha
.ltr
kwaye.rtl
, qiniseka ukuba uyongezadir
kunyelang
neempawu ngokufanelekileyo. - Ukulayisha zombini iifayile kunokuba yingxaki yokusebenza yokwenyani: qwalasela ulungiselelo oluthile , kwaye mhlawumbi uzame ukulayisha enye yezo fayile ngokungahambelaniyo .
- Izitayile zokuzalisa ngale ndlela ziyakuthintela i-mixin yethu
form-validation-state()
ekusebenzeni njengoko ibiceliwe, kungoko ifuna ukuba uyilungise wedwa. Bona #31223 .
Ityala lesonka
Isahluli se- breadcrumb kuphela kwemeko efuna inguqu yaso entsha kraca-eyile $breadcrumb-divider-flipped
-defaulting to $breadcrumb-divider
.