РТЛ

Научите како да омогућите подршку за текст који се пише здесна налево у Боотстрапу у нашем изгледу, компонентама и услужним програмима.

На овој страници

Зближити се

Препоручујемо да се прво упознате са Боотстрапом тако што ћете прочитати нашу страницу Увод за почетак рада . Када га прођете, наставите да читате овде како да омогућите РТЛ.

Можда бисте желели да прочитате и РТЛЦСС пројекат , јер он покреће наш приступ РТЛ-у.

Експериментална карактеристика

Функција РТЛ је још увек експериментална и вероватно ће се развијати у складу са повратним информацијама корисника. Приметили сте нешто или желите да предложите побољшање? Отворите проблем , волели бисмо да добијемо ваше увиде.

Потребан ХТМЛ

Постоје два строга захтева за омогућавање РТЛ-а на страницама које покреће Боотстрап.

Поставите dir="rtl"на <html>елемент.
Додајте одговарајући langатрибут, као што lang="ar"је , на <html>елемент.

Одатле, мораћете да укључите РТЛ верзију нашег ЦСС-а. На пример, ево табеле стилова за наш компајлирани и минимизовани ЦСС са омогућеним РТЛ:

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

Почетни шаблон

Горенаведене захтеве можете видети у овом модификованом РТЛ стартер шаблону.

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

РТЛ примери

Започните са једним од наших неколико РТЛ примера .

Приступ

Наш приступ изградњи РТЛ подршке у Боотстрап долази са две важне одлуке које утичу на то како пишемо и користимо наш ЦСС:

Прво смо одлучили да га изградимо са пројектом РТЛЦСС . Ово нам даје неке моћне функције за управљање променама и заменама при преласку са ЛТР на РТЛ. Такође нам омогућава да направимо две верзије Боотстрапа из једне базе кода.
Друго, преименовали смо неколико класа усмерених да бисмо усвојили приступ логичких својстава. Већина вас је већ остварила интеракцију са логичким својствима захваљујући нашим флексибилним услужним програмима—они замењују својства правца као што су leftи rightу корист startи end. То чини имена и вредности класа прикладним за ЛТР и РТЛ без икаквих додатних трошкова.

На пример, уместо .ml-3за margin-left, користите .ms-3.

Међутим, рад са РТЛ-ом, преко нашег изворног Сасс-а или компајлираног ЦСС-а, не би требало да се много разликује од нашег подразумеваног ЛТР-а.

Прилагодите из извора

Када је у питању прилагођавање , пожељнији начин је да искористите предности променљивих, мапа и миксина. Овај приступ функционише исто за РТЛ, чак и ако је накнадно обрађен из компајлираних датотека, захваљујући томе како РТЛЦСС функционише .

Прилагођене РТЛ вредности

Користећи РТЛЦСС директиве вредности , можете направити променљиву која излази на другу вредност за РТЛ. На пример, да бисте смањили тежину за $font-weight-boldцелу базу кода, можете користити /*rtl: {value}*/синтаксу:

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

Што би произвело следеће за наш подразумевани ЦСС и РТЛ ЦСС:

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

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

Алтернативни скуп фонтова

У случају да користите прилагођени фонт, имајте на уму да сви фонтови не подржавају нелатинично писмо. Да бисте се пребацили са паневропске на арапску породицу, можда ћете морати да користите /*rtl:insert: {value}*/у свом скупу фонтова да бисте изменили имена породица фонтова.

На пример, да бисте се пребацили са Helvetica Neueфонта за ЛТР на Helvetica Neue ArabicРТЛ, ваш Сасс код би могао изгледати овако:

$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;

ЛТР и РТЛ у исто време

Требате и ЛТР и РТЛ на истој страници? Захваљујући РТЛЦСС Стринг Мапс , ово је прилично једноставно. Обмотајте своје @importс класом и поставите прилагођено правило преименовања за РТЛЦСС:

/* 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*/

Након покретања Сасс-а, а затим РТЛЦСС-а, сваки селектор у вашим ЦСС датотекама ће бити преведен са .ltr, а .rtlза РТЛ датотеке. Сада можете да користите обе датотеке на истој страници и једноставно користите .ltrили .rtlна омотима компоненти да бисте користили један или други правац.

Рубни случајеви и позната ограничења

Иако је овај приступ разумљив, обратите пажњу на следеће:

Када мењате .ltrи .rtl, обавезно додајте dirи langатрибуте у складу са тим.
Учитавање обе датотеке може бити право уско грло у перформансама: размислите о некој оптимизацији и можда покушајте да учитате једну од тих датотека асинхроно .
Стилови угнежђења на овај начин ће спречити да наш form-validation-state()миксин ради како је предвиђено, па ће захтевати да га сами мало прилагодите. Погледајте #31223 .

Разделник хлебних мрвица је једини случај који захтева сопствену потпуно нову променљиву — наиме $breadcrumb-divider-flipped— подразумевану $breadcrumb-divider.

РТЛ