RTL
Dysgwch sut i alluogi cefnogaeth ar gyfer testun o'r dde i'r chwith yn Bootstrap ar draws ein cynllun, cydrannau, a chyfleustodau.
Dewch yn gyfarwydd
Rydym yn argymell ymgyfarwyddo â Bootstrap yn gyntaf trwy ddarllen ein tudalen Cyflwyniad Cychwyn Arni . Unwaith y byddwch wedi rhedeg drwyddo, parhewch i ddarllen yma i weld sut i alluogi RTL.
Efallai y byddwch hefyd am ddarllen am y prosiect RTLCSS , gan ei fod yn pweru ein hymagwedd at RTL.
Nodwedd arbrofol
Mae'r nodwedd RTL yn dal i fod yn arbrofol ac mae'n debyg y bydd yn esblygu yn ôl adborth defnyddwyr. Wedi sylwi ar rywbeth neu welliant i'w awgrymu? Agorwch fater , byddem wrth ein bodd yn cael eich mewnwelediadau.
HTML gofynnol
Mae dau ofyniad llym ar gyfer galluogi RTL mewn tudalennau wedi'u pweru gan Bootstrap.
- Gosod
dir="rtl"
ar yr<html>
elfen. - Ychwanegu
lang
priodoledd priodol, fellang="ar"
, ar yr<html>
elfen.
O'r fan honno, bydd angen i chi gynnwys fersiwn RTL o'n CSS. Er enghraifft, dyma'r ddalen arddull ar gyfer ein CSS wedi'i llunio a'i miniogi gyda RTL wedi'i alluogi:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">
Templed cychwynnol
Gallwch weld y gofynion uchod yn cael eu hadlewyrchu yn y templed cychwynnol RTL diwygiedig hwn.
<!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>
Enghreifftiau RTL
Dechreuwch gydag un o'n nifer o enghreifftiau RTL .
Agwedd
Daw ein hymagwedd at adeiladu cefnogaeth RTL yn Bootstrap gyda dau benderfyniad pwysig sy'n effeithio ar sut rydym yn ysgrifennu ac yn defnyddio ein CSS:
-
Yn gyntaf, penderfynasom ei adeiladu gyda'r prosiect RTLCSS . Mae hyn yn rhoi rhai nodweddion pwerus i ni ar gyfer rheoli newidiadau a diystyru wrth symud o LTR i RTL. Mae hefyd yn caniatáu inni adeiladu dwy fersiwn o Bootstrap o un sylfaen cod.
-
Yn ail, rydym wedi ailenwi llond llaw o ddosbarthiadau cyfeiriadol i fabwysiadu dull priodweddau rhesymegol. Mae'r rhan fwyaf ohonoch eisoes wedi rhyngweithio ag eiddo rhesymegol diolch i'n cyfleustodau hyblyg - maen nhw'n disodli eiddo cyfeiriad fel
left
acright
o blaidstart
aend
. Mae hynny'n gwneud enwau a gwerthoedd y dosbarthiadau yn briodol ar gyfer LTR ac RTL heb unrhyw gostau cyffredinol.
Er enghraifft, yn lle ar .ml-3
gyfer margin-left
, defnyddiwch .ms-3
.
Fodd bynnag, ni ddylai gweithio gyda RTL, trwy ein ffynhonnell Sass neu CSS a luniwyd, fod yn llawer gwahanol i'n LTR rhagosodedig.
Addasu o'r ffynhonnell
O ran addasu , y ffordd orau yw manteisio ar newidynnau, mapiau a chymysgeddau. Mae'r dull hwn yn gweithio yr un peth ar gyfer RTL, hyd yn oed os caiff ei ôl-brosesu o'r ffeiliau a luniwyd, diolch i sut mae RTLCSS yn gweithio .
Gwerthoedd RTL personol
Gan ddefnyddio cyfarwyddebau gwerth RTLCSS , gallwch wneud allbwn newidiol yn werth gwahanol ar gyfer RTL. Er enghraifft, i leihau'r pwysau ar gyfer $font-weight-bold
y sylfaen cod, gallwch ddefnyddio'r /*rtl: {value}*/
gystrawen:
$font-weight-bold: 700 #{/* rtl:600 */} !default;
A fyddai'n allbynnu i'r canlynol ar gyfer ein CSS diofyn a RTL CSS:
/* bootstrap.css */
dt {
font-weight: 700 /* rtl:600 */;
}
/* bootstrap.rtl.css */
dt {
font-weight: 600;
}
Stack ffontiau amgen
Os ydych chi'n defnyddio ffont wedi'i deilwra, byddwch yn ymwybodol nad yw pob ffont yn cefnogi'r wyddor nad yw'n Lladin. I newid o deulu Pan-Ewropeaidd i deulu Arabaidd, efallai y bydd angen i chi ddefnyddio /*rtl:insert: {value}*/
yn eich pentwr ffontiau i addasu enwau teuluoedd ffontiau.
Er enghraifft, i newid o Helvetica Neue Webfont
ar gyfer LTR i Helvetica Neue Arabic
RTL, mae eich cod Sass yn edrych fel hyn:
$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 ac RTL ar yr un pryd
Angen LTR ac RTL ar yr un dudalen? Diolch i Fapiau Llinynnol RTLCSS , mae hyn yn eithaf syml. Lapiwch eich @import
s gyda dosbarth, a gosodwch reol ailenwi wedi'i deilwra ar gyfer 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*/
Ar ôl rhedeg Sass yna RTLCSS, bydd pob dewiswr yn eich ffeiliau CSS yn cael ei ragpendodi gan .ltr
, ac .rtl
ar gyfer ffeiliau RTL. Nawr gallwch chi ddefnyddio'r ddwy ffeil ar yr un dudalen, a dim ond defnyddio .ltr
neu .rtl
ar eich deunydd lapio cydrannau i ddefnyddio un cyfeiriad neu'r llall.
Achosion ymyl a chyfyngiadau hysbys
Er bod y dull hwn yn ddealladwy, rhowch sylw i'r canlynol:
- Wrth newid
.ltr
a.rtl
, gwnewch yn siŵr eich bod yn ychwanegudir
alang
phriodoleddau yn unol â hynny. - Gall llwytho'r ddwy ffeil fod yn dagfa perfformiad go iawn: ystyriwch rywfaint o optimeiddio , ac efallai ceisiwch lwytho un o'r ffeiliau hynny yn anghydamserol .
- Bydd arddulliau nythu fel hyn yn atal ein
form-validation-state()
cymysgedd rhag gweithio yn ôl y bwriad, felly bydd angen ichi ei addasu ychydig ar eich pen eich hun. Gweler #31223 .
Y cas briwsion bara
Y gwahanydd briwsion bara yw'r unig achos sy'n gofyn am ei newidyn newydd sbon ei hun— sef $breadcrumb-divider-flipped
—yn ddiofyn i $breadcrumb-divider
.