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-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 од една база на кодови.
Второ, преименувавме неколку насочувачки класи за да усвоиме пристап за логички својства. Повеќето од вас веќе имаат интеракција со логичките својства благодарение на нашите флексибилни алатки - тие ги заменуваат својствата за насока како 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 ArabicRTL, вашиот 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