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-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" 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-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" 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-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 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-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" 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 WebfontLTR 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*/

After running Sass then RTLCSS, each selector in your CSS files will be prepended by .ltr, and .rtl for RTL files. Now you’re able to use both files on the same page, and simply use .ltr or .rtl on your components wrappers to use one or the other direction.

Edge cases and known limitations

While this approach is understandable, please pay attention to the following:

When switching .ltr and .rtl, make sure you add dir and lang attributes accordingly.
Loading both files can be a real performance bottleneck: consider some optimization, and maybe try to load one of those files asynchronously.
Nesting styles this way will prevent our form-validation-state() mixin from working as intended, thus require you tweak it a bit by yourself. See #31223.

The breadcrumb separator is the only case requiring its own brand new variable— namely $breadcrumb-divider-flipped —defaulting to $breadcrumb-divider.

RTL