RTL

Дізнайтеся, як увімкнути підтримку тексту справа наліво в Bootstrap у нашому макеті, компонентах і утилітах.

На цій сторінці

Ознайомитися

Ми рекомендуємо спочатку ознайомитися з Bootstrap, прочитавши нашу вступну сторінку « Початок роботи » . Ознайомившись із ним, продовжуйте читати тут, як увімкнути RTL.

Ви також можете прочитати про проект RTLCSS , оскільки він забезпечує наш підхід до RTL.

Експериментальна функція

Функція RTL все ще експериментальна і, ймовірно, буде розвиватися відповідно до відгуків користувачів. Помітили щось або хочете запропонувати покращення? Відкрийте випуск , ми будемо раді отримати вашу думку.

Необхідний HTML

Існує дві суворі вимоги для ввімкнення RTL на сторінках, що працюють на основі Bootstrap.

Встановити dir="rtl"на <html>елемент.
Додайте до елемента відповідний langатрибут, наприклад .lang="ar"<html>

Після цього вам потрібно буде включити версію нашого CSS у напрямку справа. Наприклад, ось таблиця стилів для нашого скомпільованого та скороченого CSS із увімкненим RTL:

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

Початковий шаблон

Ви можете побачити наведені вище вимоги, відображені в цьому зміненому початковому шаблоні 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-+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>

Приклади RTL

Почніть з одного з наших прикладів RTL .

Підхід

Наш підхід до створення підтримки RTL у Bootstrap передбачає два важливі рішення, які впливають на те, як ми пишемо та використовуємо CSS:

Спочатку ми вирішили створити його за допомогою проекту RTLCSS . Це дає нам деякі потужні функції для керування змінами та перевизначеннями під час переходу від LTR до RTL. Це також дозволяє нам створити дві версії Bootstrap з однієї кодової бази.
По-друге, ми перейменували декілька спрямованих класів, щоб застосувати підхід логічних властивостей. Більшість із вас уже взаємодіяли з логічними властивостями завдяки нашим утилітам flex—вони замінюють такі властивості напрямку, як leftі, rightна користь startі end. Це робить імена та значення класів придатними для LTR і RTL без будь-яких додаткових витрат.

Наприклад, замість .ml-3for margin-leftвикористовуйте .ms-3.

Однак робота з RTL через наш вихідний код Sass або скомпільований CSS мало чим відрізняється від нашого стандартного LTR.

Налаштувати з джерела

Коли справа доходить до налаштування , кращим способом є використання змінних, карт і міксинів. Цей підхід так само працює для RTL, навіть якщо він постоброблений зі скомпільованих файлів, завдяки тому, як працює RTLCSS .

Спеціальні значення RTL

Використовуючи директиви значення RTLCSS , ви можете зробити вихід змінної іншим значенням для RTL. Наприклад, щоб зменшити вагу для $font-weight-boldвсієї кодової бази, ви можете використати /*rtl: {value}*/синтаксис:

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

Що виведе наступне для нашого стандартного CSS і RTL CSS:

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

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

Альтернативний стек шрифтів

Якщо ви використовуєте спеціальний шрифт, майте на увазі, що не всі шрифти підтримують нелатинський алфавіт. Щоб перейти від загальноєвропейської до арабської сімейства, вам може знадобитися використати /*rtl:insert: {value}*/у вашому стеку шрифтів, щоб змінити назви сімейства шрифтів.

Наприклад, щоб перейти від Helvetica Neue Webfontдля LTR до Helvetica Neue Arabicдля RTL, ваш код Sass виглядатиме так:

$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 і RTL одночасно

Потрібні LTR і RTL на одній сторінці? Завдяки RTLCSS String Maps це досить просто. Обгорніть ваш @imports класом і встановіть спеціальне правило перейменування для 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*/

Після запуску Sass, а потім RTLCSS перед кожним селектором у ваших файлах CSS буде додано .ltr, а .rtlдля файлів RTL. Тепер ви можете використовувати обидва файли на одній сторінці та просто використовувати .ltrабо .rtlна оболонках компонентів, щоб використовувати один або інший напрямок.

Граничні випадки та відомі обмеження

Хоча такий підхід зрозумілий, зверніть увагу на таке:

Під час перемикання .ltrта .rtlпереконайтеся, що ви додали відповідні атрибути dirта .lang
Завантаження обох файлів може бути справжнім вузьким місцем продуктивності: подумайте про певну оптимізацію та, можливо, спробуйте завантажити один із цих файлів асинхронно .
Стилі вкладеності таким чином перешкоджатимуть нашій form-validation-state()міксині працювати належним чином, тому вам доведеться трохи налаштувати її самостійно. Див. #31223 .

Роздільник навігаційних шляхів — це єдиний випадок, який потребує власної абсолютно нової змінної, а саме $breadcrumb-divider-flipped— за замовчуванням $breadcrumb-divider.

RTL