РТЛ
Ботстрапта уң-сул текстка ярдәмне ничек урнаштырырга икәнлеген өйрәнегез.
Танышу
Башта 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-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 проекты белән төзергә булдык. Бу безгә ЛТРдан РТЛга күчкәндә үзгәрешләр белән идарә итү өчен кайбер көчле үзенчәлекләр бирә. Бу шулай ук безгә бер код базасыннан Bootstrapның ике версиясен төзергә мөмкинлек бирә.
-
Икенчедән, без логик үзлекләр алымын кабул итү өчен берничә юнәлеш классының исемен үзгәрттек. Сезнең күбегез логик үзлекләр белән үзара бәйләнештә тордылар, безнең флекс ярдәмендә - алар юнәлеш үзенчәлекләрен алыштыралар , файдасына
left
һәм . Бу класс исемнәрен һәм кыйммәтләрен LTR һәм RTL өчен өстәмә итә.right
start
end
Мәсәлән, урынына .ml-3
, 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 Webfont
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 сызык карталары ярдәмендә бу бик туры. Класс белән төрегез @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
бу юнәлешне куллану өчен компонентларыгызның төрү әйберләрен куллана аласыз.
Кыр очраклары һәм билгеле чикләүләр
Бу ысул аңлашылса да, зинһар, түбәндәгеләргә игътибар итегез:
- Күчергәндә
.ltr
һәм.rtl
, шуңа күрә кушуыгызныdir
һәмlang
атрибутларыгызны тикшерегез. - Ике файлны да йөкләү чын җитештерүчәнлек булырга мөмкин: кайбер оптимизацияне карагыз, һәм бәлки ул файлларның берсен асинхрон рәвештә йөкләргә тырышыгыз .
- Оя ясау стиле безнең
form-validation-state()
миксинның теләгәнчә эшләвенә комачаулый, шуңа күрә сез аны үзегез бераз чистартырга тиеш. 31 31223 кара .
Икмәк кисәге
Икмәк пешерүче сепаратор - аның яңа үзгәрүчене таләп итүче бердәнбер очрак, ягъни $breadcrumb-divider-flipped
- дефолт $breadcrumb-divider
.