справа налево

Узнайте, как включить поддержку текста с написанием справа налево в Bootstrap в нашем макете, компонентах и утилитах.

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

Разобраться

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

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

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

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

Требуемый HTML

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

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

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

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

Стартовый шаблон

Вы можете увидеть приведенные выше требования, отраженные в этом модифицированном начальном шаблоне 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>

Примеры 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шрифта для 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 на одной странице? Благодаря String Maps RTLCSS это довольно просто. Оберните свои @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.