RTL

Lærðu hvernig á að virkja stuðning fyrir texta sem er frá hægri til vinstri í Bootstrap yfir útliti okkar, íhlutum og tólum.

Á þessari síðu

Kynntu þér

Við mælum með því að kynna þér Bootstrap fyrst með því að lesa í gegnum kynningarsíðuna okkar fyrir að byrja . Þegar þú hefur keyrt í gegnum það skaltu halda áfram að lesa hér um hvernig á að virkja RTL.

Þú gætir líka viljað lesa þér til um RTLCSS verkefnið þar sem það knýr nálgun okkar á RTL.

Tilraunaeiginleiki

RTL eiginleikinn er enn tilraunakenndur og mun líklega þróast í samræmi við endurgjöf notenda. Komstu auga á eitthvað eða hefurðu til að bæta úr? Opnaðu mál , við viljum gjarnan fá innsýn þína.

Áskilið HTML

Það eru tvær strangar kröfur til að virkja RTL á síðum sem knúnar eru af Bootstrap.

Stillt dir="rtl"á <html>þáttinn.
Bættu við viðeigandi langeigind, eins og lang="ar", á <html>frumefninu.

Þaðan þarftu að láta fylgja með RTL útgáfu af CSS okkar. Til dæmis, hér er stílblaðið fyrir samansetta og minnkaða CSS okkar með RTL virkt:

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

Sniðmát fyrir byrjendur

Þú getur séð ofangreindar kröfur endurspeglast í þessu breytta RTL byrjunarsniðmáti.

<!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 dæmi

Byrjaðu með einu af nokkrum RTL dæmum okkar .

Nálgun

Nálgun okkar til að byggja upp RTL stuðning í Bootstrap kemur með tveimur mikilvægum ákvörðunum sem hafa áhrif á hvernig við skrifum og notum CSS okkar:

Í fyrsta lagi ákváðum við að byggja það með RTLCSS verkefninu. Þetta gefur okkur nokkra öfluga eiginleika til að stjórna breytingum og hnekkja þegar farið er frá LTR til RTL. Það gerir okkur einnig kleift að smíða tvær útgáfur af Bootstrap úr einum kóðagrunni.
Í öðru lagi höfum við endurnefnt handfylli stefnubundinna flokka til að taka upp rökræna eiginleika nálgun. Flest ykkar hafa þegar haft samskipti við rökræna eiginleika þökk sé sveigjanlegu tólunum okkar - þær koma í stað stefnueiginleika eins leftog og rightí þágu startog end. Það gerir flokkanöfnin og gildin viðeigandi fyrir LTR og RTL án nokkurs kostnaðar.

Notaðu til dæmis í stað .ml-3fyrir .margin-left.ms-3

Að vinna með RTL, í gegnum uppruna Sass eða samsett CSS, ætti þó ekki að vera mikið frábrugðið sjálfgefna LTR okkar.

Sérsníða frá uppruna

Þegar kemur að sérstillingu er ákjósanlegasta leiðin að nýta sér breytur, kort og blöndun. Þessi nálgun virkar á sama hátt fyrir RTL, jafnvel þótt hún sé eftirvinnsla úr samsettum skrám, þökk sé því hvernig RTLCSS virkar .

Sérsniðin RTL gildi

Með því að nota RTLCSS gildi tilskipanir geturðu gert breytuúttak að öðru gildi fyrir RTL. Til dæmis, til að minnka þyngd fyrir $font-weight-boldallan kóðagrunninn, geturðu notað /*rtl: {value}*/setningafræðina:

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

Sem myndi gefa út í eftirfarandi fyrir sjálfgefna CSS og RTL CSS:

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

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

Annar leturstafla

Ef þú ert að nota sérsniðna leturgerð skaltu hafa í huga að ekki öll leturgerðir styðja latneska stafrófið. Til að skipta úr samevrópskri fjölskyldu yfir í arabíska fjölskyldu gætirðu þurft að nota /*rtl:insert: {value}*/í leturstaflanum þínum til að breyta nöfnum leturfjölskyldna.

Til dæmis, til að skipta úr Helvetica Neue Webfontfyrir LTR í Helvetica Neue Arabicfyrir RTL, lítur Sass kóðinn þinn svona út:

$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 og RTL á sama tíma

Þarftu bæði LTR og RTL á sömu síðu? Þökk sé RTLCSS String Maps er þetta frekar einfalt. Vefðu @imports þínum með bekk og settu sérsniðna endurnefnareglu fyrir 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*/

Eftir að Sass hefur verið keyrt og síðan RTLCSS, verður hver veljara í CSS skránum þínum settur á undan .ltr, og .rtlfyrir RTL skrár. Nú geturðu notað báðar skrárnar á sömu síðu og einfaldlega notað .ltreða .rtlá umbúðir íhluta þinna til að nota eina eða hina áttina.

Jaðartilfelli og þekktar takmarkanir

Þó að þessi nálgun sé skiljanleg, vinsamlegast gaum að eftirfarandi:

Þegar skipt er yfir .ltrog .rtl, vertu viss um að þú bætir við dirog langeiginleikum í samræmi við það.
Að hlaða báðar skrárnar getur verið raunverulegur flöskuháls á frammistöðu: íhugaðu smá fínstillingu og reyndu kannski að hlaða einni af þessum skrám ósamstilltur .
Hreiðurstíll á þennan hátt kemur í veg fyrir að blandan okkar form-validation-state()virki eins og til er ætlast, þannig að þú þarft að fínstilla það aðeins sjálfur. Sjá #31223 .

Brauðmolaskiljan er eina tilvikið sem krefst eigin glænýju breytu — nefnilega $breadcrumb-divider-flipped— sjálfgefið $breadcrumb-divider.

RTL