RTL
Akohia me pehea e taea ai te tautoko mo te kuputuhi matau-ki-maui ki Bootstrap puta noa i to maatau tahora, waahanga, me nga taputapu.
Kia taunga
Ka tūtohu kia mohio koe ki a Bootstrap i te tuatahi ma te panui i ta maatau wharangi Whakataki Whakataki . Ina oti ana koe, haere tonu te panui ki konei me pehea e taea ai te RTL.
Ka hiahia pea koe ki te panui mo te kaupapa RTLCSS , na te mea e kaha ana to maatau huarahi ki te RTL.
Te waahanga whakamatautau
Ko te waahanga RTL kei te whakamatautau tonu , ka tipu pea i runga i nga urupare a nga kaiwhakamahi. I kitea tetahi mea, he whakapai ake ranei hei whakaaro? Whakatuwheratia he take , ka hiahia matou ki te tiki i o maaramatanga.
HTML e hiahiatia ana
E rua nga tino whakaritenga mo te whakaahei i te RTL ki nga wharangi whai mana a Bootstrap.
- Tautuhi
dir="rtl"
ki te<html>
huānga. - Tāpirihia he
lang
huanga e tika ana, peneilang="ar"
i te , ki te<html>
huānga.
Mai i reira, me whakauru e koe he putanga RTL o to tatou CSS. Hei tauira, anei te pepa ahua mo ta matou CSS whakahiato me te whakaiti me te RTL kua whakahohea:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" crossorigin="anonymous">
tauira timata
Ka taea e koe te kite i nga whakaritenga o runga ake nei e kitea ana i roto i tenei tauira whakaoho RTL kua whakarereketia.
<!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>
RTL tauira
Me timata ki tetahi o a maatau tauira RTL maha .
Te huarahi
Ko ta matou huarahi ki te hanga tautoko RTL ki Bootstrap ka tae mai me nga whakatau nui e rua e pa ana ki te tuhi me te whakamahi i o maatau CSS:
-
Tuatahi, i whakatau matou ki te hanga me te kaupapa RTLCSS . Ma tenei ka homai etahi ahuatanga kaha mo te whakahaere i nga huringa me te whakakore i te wa e neke ana mai i te LTR ki te RTL. Ka taea hoki e matou te hanga i nga putanga e rua o Bootstrap mai i tetahi turanga waehere.
-
Tuarua, kua whakaingoatia e matou etahi karaehe aronga ki te tango i te huarahi huanga arorau. Ko te nuinga o koutou kua pahekoheko ki nga taonga arorau na o maatau taputapu ngawari—ka whakakapihia e raatau nga ahuatanga ahunga penei
left
meright
te paistart
me teend
. Ma reira ka tika nga ingoa o te akomanga me nga uara mo te LTR me te RTL kaore he utu.
Hei tauira, hei utu .ml-3
mo te margin-left
, whakamahia .ms-3
.
Ko te mahi tahi me te RTL, na roto i ta maatau puna Sass, CSS whakahiato ranei, kaua e rereke mai i ta maatau LTR taunoa.
Whakaritea mai i te puna
Ina tae mai ki te whakaritenga , ko te huarahi pai ake ko te whakamahi i nga taurangi, mapi, me nga whakauru. He rite tonu te mahi o tenei huarahi mo te RTL, ahakoa he tukatuka i muri mai i nga konae kua whakahiato, he mihi ki te mahi a RTLCSS .
Nga uara RTL ritenga
Ma te whakamahi i nga tohutohu uara RTLCSS , ka taea e koe te whakaputa i tetahi putanga rereke hei uara rereke mo RTL. Hei tauira, hei whakaiti i te taumaha mo $font-weight-bold
te puta noa i te turanga waehere, ka taea e koe te whakamahi i te /*rtl: {value}*/
wetereo:
$font-weight-bold: 700 #{/* rtl:600 */} !default;
Ko tehea ka puta ki nga mea e whai ake nei mo taatau CSS taunoa me RTL CSS:
/* bootstrap.css */
dt {
font-weight: 700 /* rtl:600 */;
}
/* bootstrap.rtl.css */
dt {
font-weight: 600;
}
Tāpae momotuhi kē
Mena kei te whakamahi koe i te momotuhi ritenga, kia mohio kaore nga momotuhi katoa e tautoko ana i te reta reta-Latin. Hei huri mai i te whanau Pan-European ki te whanau Arapi, ka hiahia pea koe ki te whakamahi /*rtl:insert: {value}*/
i roto i to taapu momotuhi hei whakarereke i nga ingoa o nga whanau momotuhi.
Hei tauira, ki te huri mai i Helvetica Neue Webfont
te LTR ki Helvetica Neue Arabic
te RTL, penei te ahua o to waehere Sass:
$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 me RTL i te wa ano
Kei te hiahia te LTR me te RTL ki te wharangi kotahi? He mihi ki te RTLCSS String Maps , he tino maamaa tenei. Takaia o @import
s ki te karaehe, ka whakatakoto ture whakaingoa ritenga mo 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*/
Whai muri i te whakahaere i te Sass ka RTLCSS, ka tohua ia kaiwhiriwhiri i o konae CSS ma te .ltr
, me .rtl
nga konae RTL. Inaianei ka taea e koe te whakamahi i nga konae e rua i runga i te wharangi kotahi, ka whakamahi noa , ki runga .ltr
ranei .rtl
i o takai waahanga hei whakamahi i tetahi, i tetahi atu huarahi ranei.
Ko nga keehi taha me nga here e mohiotia ana
Ahakoa e marama ana tenei huarahi, me aro ki nga mea e whai ake nei:
- I te wa e huri ana
.ltr
me te.rtl
, me whakarite e koe te taapiridir
melang
nga huanga. - Ko te utaina o nga konae e rua ka taea te mahi tino kaha: whakaarohia etahi arotautanga , ka ngana pea ki te uta i tetahi o aua konae i te tukutahi .
- Ko nga momo kohanga ma tenei huarahi ka aukati i a maatau
form-validation-state()
ranunga kia kore e mahi i runga i te whakaaro, na reira ka hiahia koe ki te whakatika i a koe ake. Tirohia te #31223 .
Ko te putea parāoa
Ko te whakawehe parāoa anake te take e kii ana i tana ake taurangi hou— ara $breadcrumb-divider-flipped
—taunoa ki $breadcrumb-divider
.