справа налево
Узнайте, как включить поддержку текста с написанием справа налево в 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-+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-3
for 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 на одной странице? Благодаря String Maps RTLCSS это довольно просто. Оберните свои @import
s классом и установите собственное правило переименования для 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
.