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 з адной кодавай базы.
Па-другое, мы перайменавалі некалькі накіраваных класаў, каб прыняць падыход лагічных уласцівасцяў. Большасць з вас ужо ўзаемадзейнічалі з лагічнымі ўласцівасцямі дзякуючы нашым утылітам 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 на адной старонцы? Дзякуючы 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