I-RTL
Funda indlela yokunika amandla usekelo lombhalo osuka kwesokudla uye kwesokunxele ku-Bootstrap kuyo yonke isakhiwo sethu, izingxenye, nezinsiza.
Zijwayeze
Sincoma ukujwayelana ne-Bootstrap kuqala ngokufunda ekhasini lethu elithi Ukuqalisa Isingeniso . Uma usuyiqedile, qhubeka ufunda lapha ukuze uthole ukuthi ungayivula kanjani i-RTL.
Ungase futhi ufune ukufunda ngephrojekthi ye-RTLCSS , njengoba inika amandla indlela yethu ye-RTL.
Isici sokuhlola
Isici se-RTL sisahlolwa futhi cishe sizoguquka ngokuya ngempendulo yomsebenzisi. Ubone okuthile noma unokuthuthuka ongakuphakamisa? Vula udaba , singathanda ukuthola imininingwane yakho.
I-HTML edingekayo
Kunezidingo ezimbili eziqinile zokunika amandla i-RTL emakhasini anikwe amandla e-Bootstrap.
- Setha
dir="rtl"
kusici<html>
. lang
Engeza isibaluli esifanele , njengelang="ar"
-<html>
elementi.
Ukusuka lapho, uzodinga ukufaka inguqulo ye-RTL ye-CSS yethu. Isibonelo, nali ishidi lesitayela le-CSS yethu ehlanganisiwe nencane ene-RTL enikwe amandla:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" crossorigin="anonymous">
Isifanekiso sokuqala
Ungabona lezi zidingo ezingenhla ziboniswa kulesi sifanekiso se-RTL esilungisiwe.
<!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>
Izibonelo ze-RTL
Qalisa ngesinye sezibonelo zethu ezimbalwa ze-RTL .
Indlela
Indlela yethu yokwakha ukwesekwa kwe-RTL ku-Bootstrap iza nezinqumo ezimbili ezibalulekile ezithinta indlela esibhala ngayo nesisebenzisa ngayo i-CSS yethu:
-
Okokuqala, sinqume ukuyakha ngephrojekthi ye- RTLCSS . Lokhu kusinika izici ezinamandla zokuphatha izinguquko kanye nokukhipha lapho usuka ku-LTR uye ku-RTL. Kuphinde kusivumele ukuthi sakhe izinguqulo ezimbili ze-Bootstrap kusuka ku-codebase eyodwa.
-
Okwesibili, siqambe kabusha idlanzana lamakilasi okuqondisa ukuze asebenzise indlela yezakhiwo enengqondo. Iningi lenu selivele lihlanganyele nezakhiwo ezinengqondo ngenxa yezinsiza zethu eziguquguqukayo—zithatha indawo yezindawo eziqondisayo ezifana
left
nezivumelanayo futhi . Lokho kwenza amagama ekilasi namanani afanele i-LTR ne-RTL ngaphandle kwanoma iyiphi i-overhead.right
start
end
Isibonelo, esikhundleni .ml-3
sokuthi margin-left
, sebenzisa .ms-3
.
Ukusebenza ne-RTL, ngomthombo wethu we-Sass noma i-CSS ehlanganisiwe, akufanele kuhluke kakhulu ku-LTR yethu ezenzakalelayo.
Enza ngendlela oyifisayo kusuka emthonjeni
Uma kuziwa ekwenzeni ngendlela oyifisayo , indlela ekhethwayo ukusebenzisa okuguquguqukayo, amamephu, nezixube. Le ndlela isebenza ngendlela efanayo ku-RTL, ngisho noma icutshungulwa ngemva kwamafayela ahlanganisiwe, ngenxa yokuthi i-RTLCSS isebenza kanjani .
Amanani e-RTL ngokwezifiso
Usebenzisa iziqondiso zenani le-RTLCSS , ungenza okukhiphayo okuguquguqukayo kube ivelu ehlukile ye-RTL. Isibonelo, ukwehlisa isisindo $font-weight-bold
kuyo yonke i-codebase, ungasebenzisa i- /*rtl: {value}*/
syntax:
$font-weight-bold: 700 #{/* rtl:600 */} !default;
Okungaphumela kokulandelayo ku-CSS yethu ezenzakalelayo ne-RTL CSS:
/* bootstrap.css */
dt {
font-weight: 700 /* rtl:600 */;
}
/* bootstrap.rtl.css */
dt {
font-weight: 600;
}
Esinye isitaki sefonti
Esimeni lapho usebenzisa ifonti yangokwezifiso, qaphela ukuthi akuwona wonke amafonti asekela izinhlamvu zamagama okungezona ezesiLatini. Ukuze ushintshe usuke ku-Pan-European uye emndenini wesi-Arabic, kungase kudingeke ukuthi usebenzise /*rtl:insert: {value}*/
kusitaki sakho sefonti ukuze uguqule amagama emindeni yamafonti.
Isibonelo, ukushintsha usuka Helvetica Neue Webfont
ku-LTR uye Helvetica Neue Arabic
ku-RTL, ikhodi yakho ye-Sass ibukeka kanje:
$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 ne-RTL ngesikhathi esifanayo
Udinga kokubili i-LTR ne-RTL ekhasini elifanayo? Ngenxa ye- RTLCSS String Maps , lokhu kuqonde ngqo. Goqa okwakho @import
ngeklasi, bese usetha umthetho wokuqamba kabusha ngokwezifiso we-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*/
Ngemva kokusebenzisa i-Sass bese kuba yi-RTLCSS, isikhethi ngasinye kumafayela akho e-CSS sizomiswa ngaphambili ngokuthi .ltr
, kanye .rtl
namafayela e-RTL. Manje usukwazi ukusebenzisa womabili amafayela ekhasini elifanayo, futhi umane usebenzise .ltr
noma .rtl
kuma-wrappers wezingxenye zakho ukuze usebenzise eyodwa noma enye indlela.
Amacala we-Edge kanye nemikhawulo eyaziwayo
Yize le ndlela iqondakala, sicela unake lokhu okulandelayo:
- Uma ushintsha
.ltr
futhi.rtl
, qiniseka ukuthi uyangezadir
nezibalulilang
ngokufanele. - Ukulayisha womabili amafayela kungase kube umgoqo ekusebenzeni kwangempela: cabangela ukulungiselelwa okuthile , futhi mhlawumbe uzame ukulayisha elinye lalawa mafayela ngendlela esynchronously .
- Izitayela zesidleke ngale ndlela
form-validation-state()
zizovimbela i-mixin yethu ukuthi isebenze njengoba ihlosiwe, ngaleyo ndlela idinga ukuthi uyilungise kancane uwedwa. Bona #31223 .
Ikesi le-breadcrumb
Isihlukanisi se- breadcrumb ukuphela kwecala elidinga ukwahluka kwaso okusha sha- okungukuthi $breadcrumb-divider-flipped
-okuzenzakalelayo kuya ku- $breadcrumb-divider
.