RTL
Mụta otu esi eme nkwado maka ederede aka nri gaa n'aka ekpe na Bootstrap n'ofe okirikiri nhọrọ ukwuu anyị, akụrụngwa na akụrụngwa anyị.
Mara nke ọma
Anyị na-akwado ibu ụzọ mara Bootstrap site n'ịgụ site na ibe mmalite mmalite anyị . Ozugbo ịmechara ya, gaa n'ihu na-agụ ebe a maka otu esi eme RTL.
Ị nwekwara ike ịchọrọ ịgụ na RTLCSS oru ngo , ebe ọ na-eme ka ụzọ anyị si aga RTL.
Njirimara nnwale
Njirimara RTL ka na- anwale ma eleghị anya ọ ga-etolite dịka nzaghachi onye ọrụ si dị. Ahụla ihe ma ọ bụ nwee mmelite ịtụ aro? Mepee mbipụta , ọ ga-amasị anyị ịnweta nghọta gị.
HTML achọrọ
Enwere ihe abụọ siri ike chọrọ iji mee ka RTL nwee ike na ibe Bootstrap kwadoro.
- Tọọ
dir="rtl"
na<html>
mmewere. - Tinye
lang
àgwà kwesịrị ekwesị, dị kalang="ar"
, na<html>
mmewere.
Site ebe ahụ, ị ga-etinyerịrị ụdị RTL nke CSS anyị. Dịka ọmụmaatụ, nke a bụ ụdị mpempe akwụkwọ maka CSS anyị achịkọtara yana obere nke ejiri RTL nwee ike:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">
template mmalite
Ị nwere ike ịhụ ihe ndị a chọrọ n'elu ka egosipụtara na ndebiri mmalite RTL a gbanwere.
<!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>
Ọmụmaatụ RTL
Malite na otu n'ime ọtụtụ ihe atụ RTL anyị .
Ụzọ
Ụzọ anyị si ewulite nkwado RTL na Bootstrap na-abịa na mkpebi abụọ dị mkpa na-emetụta otu anyị si ede na iji CSS anyị:
-
Nke mbụ, anyị kpebiri iji ọrụ RTLCSS wuo ya. Nke a na-enye anyị ụfọdụ atụmatụ dị ike maka ijikwa mgbanwe na nkwụsị mgbe esi na LTR gaa RTL. Ọ na-enyekwa anyị ohere iwulite ụdị Bootstrap abụọ site na otu codebase.
-
Nke abụọ, anyị akpọgharịrị klaasị ntụzịaka ole na ole ka ha wee nwee usoro ihe eji emepụta ezi uche. Ọtụtụ n'ime unu ejirila ihe ezi uche meekọrịta ihe n'ihi ngwa ngwa anyị na-agbanwe agbanwe-ha na-edochi njirimara ntụziaka dị ka
left
naright
ihu ọmastart
naend
. Nke ahụ na-eme ka aha klas na ụkpụrụ dabara adaba maka LTR na RTL na-enweghị isi ọ bụla.
Dịka ọmụmaatụ, kama .ml-3
maka margin-left
, jiri .ms-3
.
Ịrụ ọrụ na RTL, site na isi iyi anyị Sass ma ọ bụ CSS chịkọtara, ekwesịghị ịdị iche na LTR ndabara anyị.
Hazie site na isi mmalite
Mgbe a bịara na nhazi , ụzọ kachasị mma bụ iji uru nke mgbanwe, maapụ, na mixins. Ụzọ a na-arụ ọrụ otu ihe ahụ maka RTL, ọ bụrụgodị na a na-edozi ya site na faịlụ ndị achịkọtara, ekele maka otú RTLCSS si arụ ọrụ .
Ụkpụrụ RTL omenala
N'iji ntuziaka uru RTLCSS , ị nwere ike mee mmepụta mgbanwe ka ọ bụrụ uru dị iche maka RTL. Dịka ọmụmaatụ, iji belata ibu maka $font-weight-bold
koodu codebase niile, ịnwere ike iji /*rtl: {value}*/
syntax:
$font-weight-bold: 700 #{/* rtl:600 */} !default;
Kedu nke ga-esi na nke a pụta maka CSS anyị na RTL CSS:
/* bootstrap.css */
dt {
font-weight: 700 /* rtl:600 */;
}
/* bootstrap.rtl.css */
dt {
font-weight: 600;
}
Nchịkọta font ọzọ
Ọ bụrụ na ị na-eji mkpụrụedemede omenala, mara na ọ bụghị mkpụrụedemede niile na-akwado mkpụrụedemede Latin na-abụghị nke Latịn. Ka ịgbanwee site na Pan-European gaa na ezinụlọ Arabik, ị nwere ike ịdị mkpa iji /*rtl:insert: {value}*/
na nchịkọta font gị iji gbanwee aha ezinụlọ font.
Dịka ọmụmaatụ, ka ịgbanwee site na Helvetica Neue Webfont
LTR gaa na Helvetica Neue Arabic
RTL, koodu Sass gị dị ka nke a:
$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 n'otu oge
Achọrọ ma LTR na RTL n'otu ibe? Daalụ maapụ RTLCSS eriri , nke a mara mma kwụ ọtọ. Kechie @import
s gị na klaasị, ma tọọ ụkpụrụ aha aha maka 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*/
Ka emechara Sass wee RTLCSS, onye ọ bụla nhọpụta na faịlụ CSS gị ga-akwado ya site na .ltr
, yana .rtl
maka faịlụ RTL. Ugbu a ị nwere ike iji faịlụ abụọ ahụ n'otu ibe, wee jiri naanị .ltr
ma ọ bụ .rtl
na ihe mkpuchi akụrụngwa gị iji otu ma ọ bụ ụzọ ọzọ.
Ikpe ikpe na njedebe ama ama
Ọ bụ ezie na usoro a bụ ihe kwere nghọta, biko ṅaa ntị na ndị a:
- Mgbe ị na-atụgharị
.ltr
na.rtl
, hụ na ị gbakwunyeredir
nalang
njirimara ya. - Ịkwado faịlụ abụọ ahụ nwere ike ịbụ ezigbo nkwụsị nke arụmọrụ: tụlee ụfọdụ njikarịcha , ma eleghị anya gbalịa ịkwanye otu n'ime faịlụ ndị ahụ n'otu oge .
- Ụdị agbụ a ga-egbochi
form-validation-state()
mixin anyị ịrụ ọrụ dịka e zubere, yabụ na-achọ ka ị gbanwee ya n'onwe gị. Lee # 31223 .
Akpa bred
Ihe nkesa achịcha achịcha bụ naanị ikpe chọrọ mgbanwe ọhụrụ nke ya — ya bụ $breadcrumb-divider-flipped
— na-adabara $breadcrumb-divider
.