RTL
Foghlaim conas tacaíocht do théacs ó dheas go clé a chumasú i Bootstrap ar fud ár leagan amach, ár gcomhpháirteanna agus ár bhfóntais.
Faigh eolas
Molaimid dul i dtaithí ar Bootstrap ar dtús ach léamh trínár leathanach Réamhrá Ag Tosú . Nuair a bheidh tú tar éis dul tríd, lean ar aghaidh ag léamh anseo le haghaidh conas RTL a chumasú.
B'fhéidir gur mhaith leat léamh suas freisin ar an tionscadal RTLCSS , toisc go dtugann sé cumhacht dár gcur chuige i leith RTL.
Gné thurgnamhach
Tá an ghné RTL fós turgnamhach agus is dócha go dtiocfaidh sé chun cinn de réir aiseolas úsáideoirí. An bhfaca tú rud éigin nó an bhfuil feabhas le moladh? Oscail ceist , ba bhreá linn do chuid léargais a fháil.
HTML riachtanach
Tá dhá cheanglas dhian ann chun RTL a chumasú ar leathanaigh faoi thiomáint Bootstrap.
- Socraigh
dir="rtl"
ar an<html>
eilimint. - Cuir
lang
tréith chuí, cosúil lelang="ar"
, ar an<html>
eilimint.
Ón áit sin, beidh ort leagan RTL dár CSS a chur san áireamh. Mar shampla, seo an stílbhileog dár CSS tiomsaithe agus mionghearrtha le RTL cumasaithe:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">
Teimpléad tosaithe
Is féidir leat na ceanglais thuas a fheiceáil léirithe sa teimpléad tosaithe RTL modhnaithe 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-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>
Samplaí RTL
Cuir tús le ceann dár roinnt samplaí RTL .
Cur Chuige
Tagann ár gcur chuige maidir le tacaíocht RTL a thógáil isteach i Bootstrap le dhá chinneadh thábhachtacha a mbíonn tionchar acu ar an gcaoi a scríobhaimid agus a n-úsáidimid ár CSS:
-
Ar dtús, bheartaíomar é a thógáil leis an tionscadal RTLCSS . Tugann sé seo roinnt gnéithe cumhachtacha dúinn chun athruithe agus sáruithe a bhainistiú agus sinn ag bogadh ó LTR go RTL. Ligeann sé dúinn freisin dhá leagan de Bootstrap a thógáil ó bhunachar cód amháin.
-
Ar an dara dul síos, tá dornán de ranganna treorach athainmnithe againn chun cur chuige maidir le hairíonna loighciúla a ghlacadh. Tá an chuid is mó agaibh tar éis idirghníomhú cheana féin le hairíonna loighciúla a bhuíochas lenár bhfóntais flexí - cuireann siad in ionad airíonna treo cosúil le
left
agusright
i bhfabharstart
agusend
. Fágann sin go bhfuil ainmneacha agus luachanna na ranganna oiriúnach do LTR agus RTL gan aon fhorchostas.
Mar shampla , in ionad .ml-3
, margin-left
úsáid .ms-3
.
Níor cheart go mbeadh oibriú le RTL, trínár bhfoinse Sass nó CSS tiomsaithe, mórán difriúil ónár LTR réamhshocraithe áfach.
Saincheap ón bhfoinse
Nuair a thagann sé le saincheaptha , is é an bealach is fearr leas a bhaint as athróga, léarscáileanna agus meascáin. Oibríonn an cur chuige seo mar an gcéanna do RTL, fiú má tá sé iar-phróiseáilte ó na comhaid tiomsaithe, a bhuíochas sin do conas a oibríonn RTLCSS .
Luachanna RTL saincheaptha
Trí úsáid a bhaint as treoracha luacha RTLCSS , is féidir leat luach difriúil a bhaint as aschur athróg do RTL. Mar shampla, chun an meáchan a laghdú ar $font-weight-bold
feadh an bhunachar cód, is féidir leat an /*rtl: {value}*/
chomhréir a úsáid:
$font-weight-bold: 700 #{/* rtl:600 */} !default;
A dhéanfadh aschur chuig an méid seo a leanas dár CSS réamhshocraithe agus RTL CSS:
/* bootstrap.css */
dt {
font-weight: 700 /* rtl:600 */;
}
/* bootstrap.rtl.css */
dt {
font-weight: 600;
}
Stack cló eile
Sa chás go bhfuil cló saincheaptha in úsáid agat, bí ar an eolas nach dtacaíonn gach cló leis an aibítir neamh-Laidin. Chun aistriú ó theaghlach Pan-Eorpach go dtí an teaghlach Arabach, b'fhéidir go mbeidh ort é a úsáid /*rtl:insert: {value}*/
i do chairn clónna chun ainmneacha na dteaghlach cló a mhodhnú.
Mar shampla, chun aistriú ó Helvetica Neue Webfont
do LTR go dtí Helvetica Neue Arabic
RTL, tá cuma mar seo ar do chód 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 agus RTL ag an am céanna
An dteastaíonn LTR agus RTL araon ar an leathanach céanna? A bhuí le Léarscáileanna Teaghrán RTLCSS , tá sé seo simplí go leor. Wrap your @import
s le rang, agus socraigh riail athainmnithe saincheaptha do 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*/
Tar éis Sass agus RTLCSS a rith, beidh gach roghnóir i do chomhaid CSS réamhspleách ag .ltr
, agus .rtl
le haghaidh comhaid RTL. Anois is féidir leat an dá chomhad a úsáid ar an leathanach céanna, agus go simplí úsáid a bhaint as .ltr
nó .rtl
ar do chumhdaigh comhpháirteanna chun ceann amháin nó treo eile a úsáid.
Cásanna imill agus teorainneacha aitheanta
Cé go bhfuil an cur chuige seo intuigthe, tabhair aird ar na nithe seo a leanas:
- Agus tú ag aistriú
.ltr
agus.rtl
, déan cinnte go gcuireann tú leisdir
agus go bhfuillang
tréithe dá réir. - Is féidir le luchtú an dá chomhad a bheith ina bhac feidhmíochta fíor: smaoinigh ar roinnt leas iomlán a bhaint , agus b'fhéidir iarracht a dhéanamh ceann de na comhaid sin a luchtú go neamhshioncronach .
- Cuirfidh stíleanna neadaithe ar an mbealach seo cosc ar ár
form-validation-state()
meascáin ó oibriú mar a bhí beartaithe, agus mar sin ní mór duit é a athrú beagán leat féin. Féach #31223 .
An cás arán
Is é an deighilteoir aráin an t-aon chás a éilíonn a athróg úrnua féin — eadhon — $breadcrumb-divider-flipped
mainneachtain go $breadcrumb-divider
.