RTL

Биздин макет, компоненттер жана утилиталар боюнча Bootstrap'те оңдон солго текстти колдоону кантип иштетүүнү үйрөнүңүз.

Бул бетте

Таанышып алгыла

Баштоо боюнча киришүү бетибизди окуп, алгач Bootstrap менен таанышууну сунуштайбыз . Аны бүтүргөндөн кийин, RTLди кантип иштетүү керек экенин бул жерден окууну улантыңыз.

Сиз ошондой эле RTLCSS долбоору жөнүндө окугуңуз келиши мүмкүн , анткени ал биздин RTLге болгон мамилебизди бекемдейт.

Эксперименттик өзгөчөлүк

RTL өзгөчөлүгү дагы эле эксперименталдык жана колдонуучунун пикири боюнча өнүгөт. Бир нерсе байкадыңызбы же сунуш кыла турган жакшыртууңуз барбы? Маселени ачыңыз , биз сиздин түшүнүктү алгыбыз келет.

Талап кылынган HTML

Bootstrap менен иштеген барактарда RTLди иштетүү үчүн эки катуу талап бар.

Элементке dir="rtl"коюу <html>.
Элементке , сыяктуу тиешелүү langатрибут кошуңуз .lang="ar"<html>

Ал жерден биздин CSSтин RTL версиясын кошушуңуз керек болот. Мисалы, бул жерде RTL иштетилген компиляцияланган жана кичирейтилген CSS үчүн стилдер таблицасы:

<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 мисалдарынын бири менен баштаңыз .

мамиле

Bootstrap'ке RTL колдоосун курууга болгон мамилебиз CSS жазуубузга жана колдонуубузга таасир этүүчү эки маанилүү чечим менен келет:

Биринчиден, биз аны RTLCSS долбоору менен курууну чечтик . Бул бизге LTRден RTLге өтүүдө өзгөртүүлөрдү жана жокко чыгарууларды башкаруу үчүн кээ бир күчтүү функцияларды берет. Ал ошондой эле бир код базасынан Bootstrapтин эки версиясын түзүүгө мүмкүндүк берет.
Экинчиден, логикалык касиеттерге мамиле кылуу үчүн бир нече багыттуу класстардын атын өзгөрттүк. Көпчүлүгүңүздөр биздин ийкемдүү утилиталарыбыздын аркасында логикалык касиеттер менен иштешкенсиздер — алар багыт касиеттерин leftжана rightпайдасына startжана end. Бул класстын аталыштарын жана маанилерин LTR жана RTL үчүн эч кандай кошумча чыгымсыз ылайыктуу кылат.

Мисалы, .ml-3үчүн ордуна margin-left, колдонуңуз .ms-3.

Биздин Sass булагы же компиляцияланган CSS аркылуу RTL менен иштөө биздин демейки LTRден анча деле айырмаланбашы керек.

Булактан өзгөчөлөштүрүү

Ыңгайлаштырууга келгенде , өзгөрмөлөрдүн, карталардын жана аралашмалардын артыкчылыктарын колдонуу артыкчылыктуу жол. Бул ыкма RTLCSS кантип иштээри үчүн, компиляцияланган файлдардан кийин иштетилген болсо да, RTL үчүн бирдей иштейт .

Ыңгайлаштырылган 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ден RTLге өтүү Helvetica Neue Arabicүчүн, 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 аркасында бул абдан жөнөкөй. Классыңызды класс менен ороп, RTLCSS @importүчүн ыңгайлаштырылган атын өзгөртүү эрежесин орнотуңуз:

/* 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, жана .rtlRTL файлдары коюлат. Эми сиз эки файлды бир баракта колдоно аласыз, жана жөн гана бир .ltrже .rtlбашка багытты колдонуу үчүн компоненттериңиздин орогучтарын колдоно аласыз.

Edge учурлары жана белгилүү чектөөлөр

Бул ыкма түшүнүктүү болгону менен, төмөндөгүлөргө көңүл буруңуз:

.ltrжана которуштурууда , ошого жараша жана атрибуттарды .rtlкошконуңузду текшериңиз .dirlang
Эки файлды тең жүктөө реалдуу иштөө тармагы болушу мүмкүн: кээ бир оптималдаштырууну карап көрүңүз, балким , ошол файлдардын бирин асинхрондук түрдө жүктөөгө аракет кылыңыз .
Уюштурулган стилдер биздин form-validation-state()миксиндин ойдогудай иштешине тоскоол болот, андыктан аны өз алдынча бир аз чыңдоону талап кылат. Кара #31223 .

Нан сыныктарын бөлгүч - бул өзүнүн жаңы өзгөрмөсүн талап кылган жалгыз учур, атап айтканда - $breadcrumb-divider-flippedдемейкиге $breadcrumb-divider.

RTL