РТЛ

Ботстрапта уң-сул текстка ярдәмне ничек урнаштырырга икәнлеген өйрәнегез.

Бу биттә

Танышу

Башта Bootstrap белән танышырга киңәш итәбез, безнең Башлау Кереш битен укып . Моны үтеп чыккач, РТЛны ничек эшләтергә икәнлеген монда укуны дәвам итегез.

Сез шулай ук RTLCSS проектын укырга теләрсез , чөнки ул безнең РТЛга карашыбызны көчәйтә.

Эксперименталь үзенчәлек

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-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" 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-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" 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-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" 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-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

RTL мисаллары

Безнең берничә RTL мисалының берсе белән башлап җибәрегез .

Алым

Bootstrap'ка RTL ярдәмен булдыруга безнең караш ике мөһим карар белән килә, алар безнең CSSны ничек язуыбызга һәм куллануыбызга тәэсир итә:

Башта без аны RTLCSS проекты белән төзергә булдык. Бу безгә ЛТРдан РТЛга күчкәндә үзгәрешләр белән идарә итү өчен кайбер көчле үзенчәлекләр бирә. Бу шулай ук безгә бер код базасыннан Bootstrapның ике версиясен төзергә мөмкинлек бирә.
Икенчедән, без логик үзлекләр алымын кабул итү өчен берничә юнәлеш классының исемен үзгәрттек. Сезнең күбегез логик үзлекләр белән үзара бәйләнештә тордылар, безнең флекс ярдәмендә - алар юнәлеш үзенчәлекләрен алыштыралар , файдасына leftһәм . Бу класс исемнәрен һәм кыйммәтләрен LTR һәм RTL өчен өстәмә итә.rightstartend

Мәсәлән, урынына .ml-3, margin-leftкулланыгыз .ms-3.

RTL белән эшләү, безнең Sass чыганагы яки тупланган CSS, безнең килешү LTRдан күпкә аерылып торырга тиеш түгел.

Чыганактан көйләгез

Customзенчәләштерүгә килгәндә , өстенлекле ысул - үзгәрүчәннәр, карталар, миксиннардан файдалану. Бу алым 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 сызык карталары ярдәмендә бу бик туры. Сезнең @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, һәм .rtlRTL файллары өчен алдан әзерләнәчәк. Хәзер сез ике файлны да бер биттә куллана аласыз, һәм .ltrтеге яки .rtlбу юнәлешне куллану өчен компонентларыгызның төрү әйберләрен куллана аласыз.

Кыр очраклары һәм билгеле чикләүләр

Бу ысул аңлашылса да, зинһар, түбәндәгеләргә игътибар итегез:

Күчергәндә .ltrһәм .rtl, шуңа туры китереп dir, langатрибутлар өстәгез.
Ике файлны да йөкләү чын җитештерүчәнлек булырга мөмкин: кайбер оптимизацияне карагыз, һәм бәлки ул файлларның берсен асинхрон йөкләргә тырышыгыз .
Оя ясау стиле безнең form-validation-state()миксинны теләгәнчә эшләргә комачаулый, шулай итеп сез аны үзегез бераз чистартырга тиеш. 31 31223 кара .

Икмәк пешерүче сепаратор - аның яңа үзгәрүчене таләп итүче бердәнбер очрак, ягъни $breadcrumb-divider-flipped- дефолт $breadcrumb-divider.

РТЛ