RTL

Dysgwch sut i alluogi cefnogaeth ar gyfer testun o'r dde i'r chwith yn Bootstrap ar draws ein cynllun, cydrannau, a chyfleustodau.

Ar y dudalen hon

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 langpriodoledd priodol, fel lang="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-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" 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-+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>

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 leftac righto blaid starta end. 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-3gyfer 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-boldy 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 Webfontar gyfer LTR i Helvetica Neue ArabicRTL, 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 @imports 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 .rtlar gyfer ffeiliau RTL. Nawr gallwch chi ddefnyddio'r ddwy ffeil ar yr un dudalen, a dim ond defnyddio .ltrneu .rtlar 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 .ltra .rtl, gwnewch yn siŵr eich bod yn ychwanegu dira langphriodoleddau 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 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.

RTL