RTL

Mësoni se si të aktivizoni mbështetjen për tekstin nga e djathta në të majtë në Bootstrap në paraqitjen, komponentët dhe shërbimet tona.

Në këtë faqe

Njihuni

Ne ju rekomandojmë që së pari të njiheni me Bootstrap duke lexuar faqen tonë të hyrjes për të filluar . Pasi ta keni kaluar, vazhdoni të lexoni këtu se si të aktivizoni RTL.

Ju gjithashtu mund të dëshironi të lexoni për projektin RTLCSS , pasi ai fuqizon qasjen tonë ndaj RTL.

Veçori eksperimentale

Veçoria RTL është ende eksperimentale dhe ndoshta do të evoluojë sipas reagimeve të përdoruesve. Vërehet diçka apo keni ndonjë përmirësim për të sugjeruar? Hap një çështje , do të donim të merrnim njohuritë tuaja.

HTML e kërkuar

Ekzistojnë dy kërkesa strikte për aktivizimin e RTL në faqet e fuqizuara nga Bootstrap.

Vendoseni dir="rtl"në <html>element.
Shtoni një langatribut të përshtatshëm, si lang="ar", në <html>element.

Nga atje, do t'ju duhet të përfshini një version RTL të CSS tonë. Për shembull, këtu është fleta e stilit për CSS-në tonë të përpiluar dhe të minuar me RTL të aktivizuar:

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

Modeli fillestar

Ju mund të shihni kërkesat e mësipërme të pasqyruara në këtë shabllon fillestar të modifikuar RTL.

<!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-OXTEbYDqaX2ZY/BOaZV/yFGChYHtrXH2nyXJ372n2Y8abBhrqacCEe+3qhSHtLjy" 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-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" 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-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Shembuj RTL

Filloni me një nga disa shembujt tanë RTL .

Qasje

Qasja jonë për ndërtimin e mbështetjes RTL në Bootstrap vjen me dy vendime të rëndësishme që ndikojnë në mënyrën se si ne shkruajmë dhe përdorim CSS-në tonë:

Së pari, vendosëm ta ndërtonim me projektin RTLCSS . Kjo na jep disa veçori të fuqishme për menaxhimin e ndryshimeve dhe anulimeve kur lëvizim nga LTR në RTL. Gjithashtu na lejon të ndërtojmë dy versione të Bootstrap nga një bazë kodi.
Së dyti, ne kemi riemërtuar një pjesë të vogël të klasave të drejtimit për të adoptuar një qasje të vetive logjike. Shumica prej jush kanë ndërvepruar tashmë me vetitë logjike falë shërbimeve tona flex—ato zëvendësojnë vetitë e drejtimit si leftdhe rightnë favor startdhe end. Kjo i bën emrat dhe vlerat e klasave të përshtatshme për LTR dhe RTL pa asnjë shpenzim.

Për shembull, në vend të .ml-3për margin-left, përdorni .ms-3.

Megjithatë, puna me RTL, përmes Sass-it tonë burimor ose CSS-së së përpiluar, nuk duhet të jetë shumë e ndryshme nga LTR-ja jonë e paracaktuar.

Personalizojeni nga burimi

Kur bëhet fjalë për personalizimin , mënyra e preferuar është të përfitoni nga variablat, hartat dhe përzierjet. Kjo qasje funksionon njësoj për RTL, edhe nëse është e përpunuar pas nga skedarët e përpiluar, falë mënyrës se si funksionon RTLCSS .

Vlerat e personalizuara RTL

Duke përdorur direktivat e vlerave RTLCSS , mund të bëni një dalje variable një vlerë të ndryshme për RTL. Për shembull, për të ulur peshën për $font-weight-boldtë gjithë bazën e kodeve, mund të përdorni /*rtl: {value}*/sintaksën:

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

E cila do të jepte si më poshtë për CSS-në tonë të paracaktuar dhe RTL CSS:

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

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

Stack alternativ i shkronjave

Në rast se jeni duke përdorur një font të personalizuar, kini parasysh se jo të gjitha fontet mbështesin alfabetin jo latin. Për të kaluar nga familja pan-evropiane në arabe, mund t'ju duhet të përdorni /*rtl:insert: {value}*/në grupin tuaj të shkronjave për të modifikuar emrat e familjeve të shkronjave.

Për shembull, për të kaluar nga Helvetica Neuefonti për LTR në Helvetica Neue Arabicpër RTL, kodi juaj Sass mund të duket si ky:

$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 dhe RTL në të njëjtën kohë

Keni nevojë për LTR dhe RTL në të njëjtën faqe? Falë RTLCSS String Maps , kjo është mjaft e thjeshtë. Mbështillni @imports-të tuaj me një klasë dhe vendosni një rregull të personalizuar të riemërtimit për 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*/

Pas ekzekutimit të Sass dhe më pas RTLCSS, çdo përzgjedhës në skedarët tuaj CSS do të paraprihet nga .ltr, dhe .rtlpër skedarët RTL. Tani mund të përdorni të dy skedarët në të njëjtën faqe dhe thjesht përdorni .ltrose .rtlnë mbështjellësit e komponentëve tuaj për të përdorur një ose tjetrin drejtim.

Rastet e skajeve dhe kufizimet e njohura

Ndërsa kjo qasje është e kuptueshme, ju lutemi kushtojini vëmendje sa vijon:

Kur ndërroni .ltrdhe .rtl, sigurohuni që të shtoni dirdhe langatribuoni në përputhje me rrethanat.
Ngarkimi i të dy skedarëve mund të jetë një pengesë e vërtetë e performancës: merrni parasysh disa optimizime dhe ndoshta provoni të ngarkoni një nga ata skedarë në mënyrë asinkrone .
Stilet e folezimit në këtë mënyrë do të parandalojnë që form-validation-state()miksin tonë të funksionojë siç synohet, kështu që ju kërkojnë ta rregulloni pak vetë. Shihni #31223 .

Ndarësi i bukës është i vetmi rast që kërkon variablin e tij krejt të ri—domethënë— $breadcrumb-divider-flippeddefault në $breadcrumb-divider.

RTL