Cмотреть на GitHub

RTL-стилизация

Включение поддержки направления написания текста справа налево (Right To Left) в Bootstrap для наших макетов, компонентов и утилит.

На этой странице

Сайты могут поддерживать направления написания текста: слева направо (LTR – Left To Right) и справа налево (Right To Left). В CSS по умолчанию используется направление LTR. Адаптации интерфейса под RTL актуальна и для иврита, и для персидского языка.

Знакомство

Мы рекомендуем сначала познакомиться с Bootstrap, прочитав нашу страницу введения в начало работы. После того, как вы пройдете через это, продолжайте читать здесь, чтобы узнать, как включить RTL.

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

Функция RTL в Bootstrap все еще является экспериментальной и будет развиваться на основе отзывов пользователей. Заметили что-то или хотите предложить улучшение? Открыть issue, мы хотели бы узнать ваше мнение.

Обязательный HTML

Есть два строгих требования для включения RTL на страницах с поддержкой Bootstrap.

Установите dir="rtl" в элементе <html>.
Добавьте соответствующий атрибут lang, например lang="ar", в элемент <html>.

Оттуда Вам нужно будет включить RTL-версию нашего CSS. Например, вот таблица стилей для нашего скомпилированного и миниатюрного CSS с включенным RTL:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.rtl.min.css" integrity="sha384-dpuaG1suU0eT09tx5plTaGMLBsfDLzUCCUXOY2j/LSvXYuG6Bqs43ALlhIqAJVRb" 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/bootstrap@5.3.3/dist/css/bootstrap.rtl.min.css" integrity="sha384-dpuaG1suU0eT09tx5plTaGMLBsfDLzUCCUXOY2j/LSvXYuG6Bqs43ALlhIqAJVRb" 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/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Примеры RTL

Начните с одного из нескольких примеров RTL.

Подход

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

Во-первых, мы решили создать его с помощью проекта RTLCSS. Это дает нам несколько мощных функций для управления изменениями и переопределениями при переходе от LTR к RTL. Это также позволяет нам создавать две версии Bootstrap из одной кодовой базы.
Во-вторых, мы переименовали несколько классов направлений, чтобы принять подход логических свойств. Большинство из Вас уже взаимодействовали с логическими свойствами благодаря нашим гибким утилитам - они заменяют свойства направления, такие как left и right в пользу start и end. Это делает имена и значения классов подходящими для LTR и RTL без каких-либо накладных расходов.

Например, вместо .ml-3 для 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 для LTR на Helvetica Neue Arabic для RTL, ваш код Sass может выглядеть так:

$font-family-sans-serif:
  Helvetica Neue #{"/* rtl:insert:Arabic */"},
  // Кросс-платформенное общее семейство шрифтов (шрифт пользовательского интерфейса по умолчанию)
  system-ui,
  // Safari для macOS и iOS (San Francisco)
  -apple-system,
  // Chrome < 56 для macOS (Сан-Франциско)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // Базовый резервный веб-сайт
  Arial,
  // Linux
  "Noto Sans",
  // Резервный вариант без засечек
  sans-serif,
  // Emoji шрифты
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

Использование LTR и RTL одновременно

Нужны и LTR, и RTL на одной странице? Благодаря RTLCSS String Maps, это довольно просто. Оберните свой @import классом и установите собственное правило переименования для 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:

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

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