RTL

Научете как да активирате поддръжка за текст отдясно наляво в 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за 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