РТЛ
Научите како да омогућите подршку за текст који се пише здесна налево у Боотстрапу у нашем изгледу, компонентама и услужним програмима.
Зближити се
Препоручујемо да се прво упознате са Боотстрапом тако што ћете прочитати нашу страницу Увод за почетак рада . Када га прођете, наставите да читате овде како да омогућите РТЛ.
Можда бисте желели да прочитате и РТЛЦСС пројекат , јер он покреће наш приступ РТЛ-у.
Експериментална карактеристика
Функција РТЛ је још увек експериментална и вероватно ће се развијати у складу са повратним информацијама корисника. Приметили сте нешто или желите да предложите побољшање? Отворите проблем , волели бисмо да добијемо ваше увиде.
Потребан ХТМЛ
Постоје два строга захтева за омогућавање РТЛ-а на страницама које покреће Боотстрап.
- Поставите
dir="rtl"
на<html>
елемент. - Додајте одговарајући
lang
атрибут, као штоlang="ar"
је , на<html>
елемент.
Одатле, мораћете да укључите РТЛ верзију нашег ЦСС-а. На пример, ево табеле стилова за наш компајлирани и минимизовани ЦСС са омогућеним РТЛ:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" crossorigin="anonymous">
Почетни шаблон
Горенаведене захтеве можете видети у овом модификованом РТЛ стартер шаблону.
<!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>
РТЛ примери
Започните са једним од наших неколико РТЛ примера .
Приступ
Наш приступ изградњи РТЛ подршке у Боотстрап долази са две важне одлуке које утичу на то како пишемо и користимо наш ЦСС:
-
Прво смо одлучили да га изградимо са пројектом РТЛЦСС . Ово нам даје неке моћне функције за управљање променама и заменама при преласку са ЛТР на РТЛ. Такође нам омогућава да направимо две верзије Боотстрапа из једне базе кода.
-
Друго, преименовали смо неколико класа усмерених да бисмо усвојили приступ логичких својстава. Већина вас је већ остварила интеракцију са логичким својствима захваљујући нашим флексибилним услужним програмима—они замењују својства правца као што су
left
иright
у користstart
иend
. То чини имена и вредности класа прикладним за ЛТР и РТЛ без икаквих додатних трошкова.
На пример, уместо .ml-3
за margin-left
, користите .ms-3
.
Међутим, рад са РТЛ-ом, преко нашег изворног Сасс-а или компајлираног ЦСС-а, не би требало да се много разликује од нашег подразумеваног ЛТР-а.
Прилагодите из извора
Када је у питању прилагођавање , пожељнији начин је да искористите предности променљивих, мапа и миксина. Овај приступ функционише исто за РТЛ, чак и ако је накнадно обрађен из компајлираних датотека, захваљујући томе како РТЛЦСС функционише .
Прилагођене РТЛ вредности
Користећи РТЛЦСС директиве вредности , можете направити променљиву која излази на другу вредност за РТЛ. На пример, да бисте смањили тежину за $font-weight-bold
целу базу кода, можете користити /*rtl: {value}*/
синтаксу:
$font-weight-bold: 700 #{/* rtl:600 */} !default;
Што би произвело следеће за наш подразумевани ЦСС и РТЛ ЦСС:
/* bootstrap.css */
dt {
font-weight: 700 /* rtl:600 */;
}
/* bootstrap.rtl.css */
dt {
font-weight: 600;
}
Алтернативни скуп фонтова
У случају да користите прилагођени фонт, имајте на уму да сви фонтови не подржавају нелатинично писмо. Да бисте се пребацили са паневропске на арапску породицу, можда ћете морати да користите /*rtl:insert: {value}*/
у свом скупу фонтова да бисте изменили имена породица фонтова.
На пример, да бисте прешли са Helvetica Neue Webfont
ЛТР на Helvetica Neue Arabic
РТЛ, ваш Сасс код изгледа овако:
$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;
ЛТР и РТЛ у исто време
Требате и ЛТР и РТЛ на истој страници? Захваљујући РТЛЦСС Стринг Мапс , ово је прилично једноставно. Обмотајте своје @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*/
Након покретања Сасс-а, а затим РТЛЦСС-а, сваки селектор у вашим ЦСС датотекама ће бити преведен са .ltr
, а .rtl
за РТЛ датотеке. Сада можете да користите обе датотеке на истој страници и једноставно користите .ltr
или .rtl
на омотима компоненти да бисте користили један или други правац.
Рубни случајеви и позната ограничења
Иако је овај приступ разумљив, обратите пажњу на следеће:
- Када мењате
.ltr
и.rtl
, обавезно додајтеdir
иlang
атрибуте у складу са тим. - Учитавање обе датотеке може бити право уско грло у перформансама: размислите о некој оптимизацији и можда покушајте да учитате једну од тих датотека асинхроно .
- Стилови угнежђења на овај начин ће спречити да наш
form-validation-state()
миксин ради како је предвиђено, па ће захтевати да га сами мало прилагодите. Погледајте #31223 .
Случај за хлебне мрвице
Разделник хлебних мрвица је једини случај који захтева сопствену потпуно нову променљиву — наиме $breadcrumb-divider-flipped
— подразумевану $breadcrumb-divider
.