Гузаштан ба мундариҷаи асосӣ Ба новбари ҳуҷҷатҳо гузаред
in English

RTL

Бифаҳмед, ки чӣ гуна дастгирӣ барои матни аз рост ба чап дар Bootstrap дар саросари тарҳ, ҷузъҳо ва утилитаҳои мо фаъол карда шавад.

Дар ин саҳифа

Шинос шавед

Мо тавсия медиҳем, ки аввал бо хондани саҳифаи Муқаддимаи Оғози мо бо Bootstrap шинос шавед . Пас аз он ки шумо онро иҷро кардед, хонданро дар ин ҷо идома диҳед, то ки чӣ тавр RTL-ро фаъол созед.

Шумо инчунин метавонед дар бораи лоиҳаи RTLCSS хонед , зеро он муносибати моро ба RTL қувват мебахшад.

Хусусияти таҷрибавӣ

Хусусияти RTL то ҳол таҷрибавӣ аст ва эҳтимол аз рӯи фикру мулоҳизаҳои корбарон таҳаввул хоҳад кард. Оё чизе пайдо кардед ё беҳтаре барои пешниҳод кардан доред? Як масъала кушоед , мо мехоҳем фаҳмиши шуморо гирем.

HTML талаб карда мешавад

Барои фаъол кардани RTL дар саҳифаҳои аз ҷониби Bootstrap фаъолшуда ду талаботи қатъӣ вуҷуд дорад.

  1. Дар элемент ҷойгир кунед dir="rtl".<html>
  2. Дар элемент як 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-и мо таъсир мерасонанд:

  1. Аввалан, мо тасмим гирифтем, ки онро бо лоиҳаи RTLCSS созем . Ин ба мо баъзе хусусиятҳои пурқувватро барои идоракунии тағирот ва бекоркунӣ ҳангоми гузаштан аз LTR ба RTL медиҳад. Он инчунин ба мо имкон медиҳад, ки ду версияи Bootstrapро аз як пойгоҳи код созем.

  2. Дуюм, мо як қатор синфҳои самтро барои қабули равиши хосиятҳои мантиқӣ номгузорӣ кардем. Аксарияти шумо ба шарофати утилитаҳои флеши мо аллакай бо хосиятҳои мантиқӣ ҳамкорӣ кардаед - онҳо хосиятҳои самтро ба монанди 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 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 , ин хеле осон аст. s-и худро бо синф печонед @importва барои 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самти дигар ҷузъҳои ҷузъҳои худро истифода баред.

Ҳолатҳои канорӣ ва маҳдудиятҳои маълум

Гарчанде ки ин равиш фаҳмо аст, лутфан ба инҳо диққат диҳед:

  1. Ҳангоми иваз кардани .ltrва .rtl, боварӣ ҳосил кунед, ки шумо мувофиқан dirва langатрибутҳо илова мекунед.
  2. Боркунии ҳарду файл метавонад як мушкили воқеии иҷроиш бошад: каме оптимизатсияро баррасӣ кунед ва шояд кӯшиш кунед, ки яке аз ин файлҳоро ба таври асинхронӣ бор кунед .
  3. Услубҳои лонагузорӣ бо ин роҳ form-validation-state()аз кор кардани омехтаи мо монеъ мешаванд, бинобар ин аз шумо талаб мекунанд, ки онро худатон каме танзим кунед. Нигаред № 31223 .

Ҳолати нонреза

Ҷудокунаки нонреза ягона ҳолатест, ки тағирёбандаи бренди нави худро, яъне $breadcrumb-divider-flippedпешфарзро талаб мекунад $breadcrumb-divider.

Захираҳои иловагӣ