Skip to di men tin dɛn we de insay Skip to doks nevigishɔn
in English

RTL we dɛn kɔl RTL

Lan aw fɔ ɛnabul sɔpɔt fɔ rayt-to-lɛft tɛks na Bootstrap akɔdin to wi layout, kɔmpɔnɛnt dɛn, ɛn yutiliti dɛn.

Na dis pej

Mek yu no bɔt am

Wi kin advays yu fɔ no bɔt Bootstrap fɔs bay we yu rid wi Getting Started Introduction pej . We yu dɔn rɔn tru am, kɔntinyu fɔ rid ya fɔ aw fɔ ɛnabul RTL.

Yu kin want fɔ rid ɔp bak bɔt di RTLCSS prɔjek , as i de gi pawa to wi we fɔ du RTL.

Ekspirimɛnt ficha

Di RTL ficha stil de ɛkspirimɛnt ɛn i go mɔs bi se i go evolv akɔdin to di yuza fidbak. Yu dɔn si sɔntin ɔ yu gɛt impɔtant tin fɔ tɔk bɔt? Open an issue , wi go lɛk fɔ gɛt yu insayt dɛn.

HTML we dɛn nid

Tu strikt rikwaymɛnt dɛn de fɔ ɛnabul RTL insay Bootstrap-pawa pej dɛn.

  1. Set dir="rtl"pan di <html>elemɛnt.
  2. Ad wan langatribyut we fit, lɛk lang="ar", pan di <html>ɛlimɛnt.

Frɔm de, yu go nid fɔ put wan RTL vɛshɔn fɔ wi CSS. Fɔ ɛgzampul, na di staylshit fɔ wi kɔmpilayt ɛn minifyed CSS wit RTL we dɛn dɔn ɛnabul:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">

Di tɛmplat fɔ stat

Yu kin si di rikwaymɛnt dɛn we de ɔp we de sho insay dis modifyed RTL stata tɛmplat.

<!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>

RTL ɛgzampul dɛn

Start wit wan pan wi sɔm RTL ɛgzampul dɛn .

Mit

Wi we fɔ bil RTL sɔpɔt insay Bootstrap kam wit tu impɔtant disizhɔn dɛn we de ambɔg aw wi de rayt ɛn yuz wi CSS:

  1. Fɔs, wi disayd fɔ bil am wit di RTLCSS prɔjek. Dis de gi wi sɔm pawaful ficha dɛn fɔ manej chenj ɛn ɔvarayz we yu de muf frɔm LTR to RTL. I de alaw wi bak fɔ bil tu vɛshɔn dɛn fɔ Bootstrap frɔm wan kɔdbɛys.

  2. Sɛkɔn, wi dɔn chenj di nem fɔ wan anful dairekshɔn klas dɛn fɔ adopt wan lɔjik prɔpati dɛn we dɛn de yuz. Bɔku pan una dɔn ɔlrɛdi intarakt wit lɔjik prɔpati dɛn tank to wi fleks yutiliti dɛn—dɛn de riples dairekshɔn prɔpati dɛn lɛk leftɛn rightin favɔrit startɛn end. Dat de mek di klas nem ɛn valyu dɛn fit fɔ LTR ɛn RTL we nɔ gɛt ɛni ɔvahɛd.

Fɔ ɛgzampul, instead fɔ yuz .ml-3fɔ margin-left, yuz .ms-3.

Wok wit RTL, tru wi sɔs Sass ɔ kɔmpilayt CSS, nɔ fɔ rili difrɛn frɔm wi difɔlt LTR pan ɔl we.

Kastamayz frɔm sɔs

We i kam pan kɔstɔmayshɔn , di we we dɛn kin lɛk fɔ du na fɔ tek advantej pan di vayriɔbul dɛn, map dɛn, ɛn miksin dɛn. Dis we fɔ du tin de wok di sem fɔ RTL, ivin if dɛn dɔn post-prosɛs am frɔm di fayl dɛn we dɛn dɔn kɔmpilayt, tank to aw RTLCSS de wok .

Kastom RTL valyu dɛn

Yuz RTLCSS valyu dairekt , yu kin mek wan vɛriɔbul autput wan difrɛn valyu fɔ RTL. Fɔ ɛgzampul, fɔ ridyus di wet fɔ $font-weight-boldɔlsay na di kɔdbɛs, yu kin yuz di /*rtl: {value}*/sɛntaks:

$font-weight-bold: 700 #{/* rtl:600 */} !default;

We go autput to di wan dɛn we de dɔŋ fɔ wi difɔlt CSS ɛn RTL CSS:

/* bootstrap.css */
dt {
  font-weight: 700 /* rtl:600 */;
}

/* bootstrap.rtl.css */
dt {
  font-weight: 600;
}

Alternativ font stak fɔ di wan dɛn we de yuz am

If yu de yuz kɔstɔm font, mɛmba se nɔto ɔl di font dɛn de sɔpɔt di alifbɛt we nɔto Latin. Fɔ chenj frɔm Pan-Yuropian to Arabik famili, yu go nid fɔ yuz /*rtl:insert: {value}*/insay yu font stak fɔ chenj di nem dɛn fɔ di font famili dɛn.

Fɔ ɛgzampul, fɔ chenj frɔm Helvetica Neue Webfontfɔ LTR to Helvetica Neue Arabicfɔ RTL, yu Sass kɔd tan lɛk dis:

$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 ɛn RTL na di sem tɛm

Nid ɔl tu di LTR ɛn RTL na di sem pej? Tɛnki fɔ RTLCSS String Maps , dis na fayn fayn tin fɔ du. Rap yu @imports wit wan klas, ɛn sɛt wan kɔstɔm rinem rul fɔ 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*/

Afta yu dɔn rɔn Sass den RTLCSS, ɛni sɛlɛktɔ na yu CSS fayl dɛn go de bifo bay .ltr, ɛn .rtlfɔ RTL fayl dɛn. Naw yu ebul fɔ yuz ɔl tu di fayl dɛn na di sem pej, ɛn jɔs yuz .ltrɔ .rtlna yu kɔmpɔnɛnt wrap dɛn fɔ yuz wan ɔ di ɔda dairekshɔn.

Edj kes ɛn limiteshɔn dɛn we dɛn no

Pan ɔl we wi kin ɔndastand dis we fɔ du tin, duya pe atɛnshɔn to dɛn tin ya:

  1. We yu de chenj .ltrɛn .rtl, mek shɔ se yu ad dirɛn langatribyut dɛn akɔdin to am.
  2. Fɔ lod ɔl tu di fayl dɛn kin bi rial pefɔmɛns bɔtulnɛk: tink bɔt sɔm ɔptimayzeshɔn , ɛn sɔntɛm tray fɔ lod wan pan dɛn fayl dɛn de asynchronously .
  3. Nesting stayl dis we go mek wi form-validation-state()mixin nɔ wok lɛk aw dɛn bin want am, so nid fɔ mek yu tweak am smɔl bay yusɛf. Si di #31223 .

Di kes we dɛn mek wit bred

Di breadcrumb separator na di onli kes we nid in yon brand nyu variebul— dat na $breadcrumb-divider-flipped—difɔlt to $breadcrumb-divider.

Ɔda tin dɛn we yu go ebul fɔ du