RTL
Ionnsaich mar a bheir thu comas taic airson teacsa deas gu clì ann am Bootstrap thairis air ar cruth, co-phàirtean agus goireasan.
Faigh eòlach
Tha sinn a’ moladh eòlas fhaighinn air Bootstrap an-toiseach le bhith a’ leughadh tron duilleag Ro-ràdh Toiseach tòiseachaidh againn . Aon uair ‘s gu bheil thu air ruith troimhe, lean ort a’ leughadh an seo airson mar as urrainn dhut RTL a chomasachadh.
Is dòcha gum bi thu cuideachd airson leughadh mu phròiseact RTLCSS , leis gu bheil e a’ toirt cumhachd don dòigh-obrach againn a thaobh RTL.
Feart deuchainneach
Tha am feart RTL fhathast deuchainneach agus is dòcha gun tig e air adhart a rèir fios air ais bho luchd-cleachdaidh. Am faca tu rudeigin no an robh leasachadh agad ri mholadh? Fosgail cùis , bu mhath leinn do bheachdan fhaighinn.
HTML a dhìth
Tha dà riatanas teann ann airson RTL a chomasachadh ann an duilleagan le cumhachd Bootstrap.
- Suidhich
dir="rtl"
air an<html>
eileamaid. - Cuir
lang
feart iomchaidh, marlang="ar"
, ris an<html>
eileamaid.
Às an sin, feumaidh tu dreach RTL den CSS againn a thoirt a-steach. Mar eisimpleir, seo an duilleag stoidhle airson an CSS a chaidh a chur ri chèile agus a mhion-sgrùdadh le RTL air a chomasachadh:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" crossorigin="anonymous">
Teamplaid tòiseachaidh
Chì thu na riatanasan gu h-àrd air an nochdadh anns an teamplaid tòiseachaidh RTL atharraichte seo.
<!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>
Eisimpleirean de RTL saor an asgaidh
Tòisich le aon de na grunn eisimpleirean RTL againn .
Dòigh-obrach
Tha an dòigh-obrach againn airson taic RTL a thogail a-steach do Bootstrap a’ tighinn le dà cho-dhùnadh cudromach a bheir buaidh air mar a bhios sinn a’ sgrìobhadh agus a’ cleachdadh ar CSS:
-
An toiseach, chuir sinn romhainn a thogail leis a’ phròiseact RTLCSS . Bheir seo dhuinn cuid de fheartan cumhachdach airson a bhith a’ riaghladh atharrachaidhean agus a’ dol thairis air nuair a ghluaiseas sinn bho LTR gu RTL. Leigidh e leinn cuideachd dà dhreach de Bootstrap a thogail bho aon bhun-còd.
-
San dàrna àite, tha sinn air dòrlach de chlasaichean stiùiridh ath-ainmeachadh gus gabhail ri dòigh-obrach feartan loidsigeach. Tha a’ mhòr-chuid agaibh air eadar-obrachadh le feartan loidsigeach mar-thà mar thoradh air na goireasan sùbailte againn - bidh iad a’ dol an àite thogalaichean stiùiridh mar
left
agusright
fàbharstart
agusend
. Tha sin a’ fàgail ainmean is luachan a’ chlas iomchaidh airson LTR agus RTL gun chosgaisean sam bith eile.
Mar eisimpleir, an àite .ml-3
airson margin-left
, cleachd .ms-3
.
Cha bu chòir a bhith ag obair le RTL, tron stòr Sass againn no CSS air a chuir ri chèile, a bhith gu math eadar-dhealaichte bhon LTR àbhaisteach againn ge-tà.
Dèan gnàthachadh bhon stòr
Nuair a thig e gu gnàthachadh , is e an dòigh as fheàrr leat brath a ghabhail air caochladairean, mapaichean, agus measgachadh. Bidh an dòigh-obrach seo ag obair mar an ceudna airson RTL, eadhon ged a thèid a phròiseasadh às deidh na faidhlichean a chaidh a chuir ri chèile, le taing dha mar a tha RTLCSS ag obair .
Luachan gnàthaichte RTL
A ’ cleachdadh stiùiridhean luach RTLCSS , faodaidh tu toradh caochlaideach a dhèanamh na luach eadar-dhealaichte airson RTL. Mar eisimpleir, gus an cuideam a lùghdachadh air $font-weight-bold
feadh a 'chòd-chòd, faodaidh tu an co- /*rtl: {value}*/
chòrdadh a chleachdadh:
$font-weight-bold: 700 #{/* rtl:600 */} !default;
A bheireadh a-mach gu na leanas airson ar CSS bunaiteach agus RTL CSS:
/* bootstrap.css */
dt {
font-weight: 700 /* rtl:600 */;
}
/* bootstrap.rtl.css */
dt {
font-weight: 600;
}
Stack cruth-clò eile
Ma tha thu a’ cleachdadh cruth-clò àbhaisteach, thoir an aire nach eil a h-uile cruth-clò a’ toirt taic don aibideil neo-Laideann. Gus gluasad bho theaghlach Pan-Eòrpach gu Arabais, is dòcha gum feum thu a chleachdadh /*rtl:insert: {value}*/
anns a’ chruach chruth-clò agad gus ainmean theaghlaichean cruth-clò atharrachadh.
Mar eisimpleir, airson atharrachadh bho Helvetica Neue Webfont
airson LTR gu Helvetica Neue Arabic
RTL, tha do chòd Sass a’ coimhead mar seo:
$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 agus RTL aig an aon àm
A bheil feum agad air an dà chuid LTR agus RTL air an aon duilleag? Taing do RTLCSS String Maps , tha seo gu math sìmplidh. Paisg do chuid @import
le clas, agus suidhich riaghailt ath-ainmeachadh àbhaisteach airson 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*/
Às deidh dha Sass an uairsin RTLCSS a ruith, bidh gach roghnaiche anns na faidhlichean CSS agad air a ro-aithris le .ltr
, agus .rtl
airson faidhlichean RTL. A-nis is urrainn dhut an dà fhaidhle a chleachdadh air an aon duilleag, agus dìreach cleachd .ltr
no .rtl
air na pasgain phàirtean agad gus aon no an taobh eile a chleachdadh.
Cùisean iomall agus crìochan aithnichte
Ged a tha an dòigh-obrach seo furasta a thuigsinn, thoir aire do na leanas:
- Nuair a bhios tu ag atharrachadh
.ltr
agus.rtl
, dèan cinnteach gun cuir thu risdir
aguslang
buadhan a rèir sin. - Faodaidh luchdachadh an dà fhaidhle a bhith na fhìor bhotal dèanadais: beachdaich air cuid de optimization , agus is dòcha feuch ri aon de na faidhlichean sin a luchdachadh gun sioncronaich .
- Cuiridh stoidhlichean neadachaidh mar seo casg air ar
form-validation-state()
measgachadh bho bhith ag obair mar a bha dùil, agus mar sin feumaidh tu beagan tweak a dhèanamh leat fhèin. Faic #31223 .
Cùis an arain
Is e an dealaiche aran an aon chùis a dh’ fheumas an caochladair ùr aige fhèin - is e sin $breadcrumb-divider-flipped
- bunaiteach gu $breadcrumb-divider
.