RTL
فێربە چۆن پشتگیری بۆ دەقی ڕاست بۆ چەپ لە Bootstrap چالاک بکەیت لە سەرانسەری نەخشە، پێکهاتەکان و سوودمەندییەکانمان.
ئاشنا بە
پێشنیار دەکەین سەرەتا ئاشنا بیت بە Bootstrap بە خوێندنەوەی لاپەڕەی ناساندنی دەستپێکردنمان . کاتێک کە تێیدا تێپەڕیت، لێرە بەردەوام بە لە خوێندنەوە بۆ چۆنیەتی چالاککردنی RTL.
هەروەها لەوانەیە بتەوێت لەسەر پڕۆژەی RTLCSS بخوێنیتەوە ، چونکە هێز دەدات بە رێبازی ئێمە بۆ RTL.
تایبەتمەندی تاقیکاری
تایبەتمەندی RTL هێشتا تاقیکارییە و بە ئەگەرێکی زۆرەوە بەپێی فیدباکەکانی بەکارهێنەر پەرەدەستێنێت. شتێکت بینیوە یان باشتربوونێکت هەیە پێشنیاری بکەیت؟ پرسێک بکەرەوە , ئێمە زۆرمان پێ خۆشە تێگەیشتنەکانتان بەدەست بهێنین.
HTML پێویستە
دوو مەرجی توند هەیە بۆ چالاککردنی RTL لە لاپەڕەکانی بەهێزکراوی Bootstrap.
dir="rtl"
لەسەر<html>
توخمەکە دابنێ .- تایبەتمەندییەکی گونجاو زیاد بکە
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 ـەکەمان هەیە:
-
سەرەتا بڕیارماندا بە پرۆژەی RTLCSS دروستی بکەین . ئەمەش چەند تایبەتمەندییەکی بەهێزمان پێدەبەخشێت بۆ بەڕێوەبردنی گۆڕانکاری و سەرپێچی لەکاتی گواستنەوە لە LTR بۆ RTL. هەروەها ڕێگەمان پێدەدات دوو وەشانی Bootstrap لە یەک کۆدبەیسەوە دروست بکەین.
-
دووەم: ئێمە ناوی مشتێک پۆلی ئاراستەییمان گۆڕیوە بۆ ئەوەی رێبازێکی تایبەتمەندییە لۆژیکیەکان بگرینەبەر. زۆربەی ئێوە پێشتر کارلێکتان لەگەڵ تایبەتمەندییە لۆژیکییەکان کردووە بەهۆی سوودمەندییە فلیکسەکانمانەوە-ئەوان جێگەی تایبەتمەندییەکانی ئاراستە دەگرنەوە وەک
left
وright
لە بەرژەوەندیstart
وend
. کە ناو و بەهاکانی پۆلەکان دەکاتە گونجاو بۆ LTR و RTL بەبێ هیچ سەرپێچێک.
بۆ نموونە لەبری .ml-3
for margin-left
، بەکاربهێنە .ms-3
.
کارکردن لەگەڵ RTL، لە ڕێگەی سەرچاوەی Sass یان CSS ی کۆکراوەمانەوە، نابێت زۆر جیاواز بێت لە LTR ی پێشوەختەمان هەرچەندە.
لە سەرچاوەوە خۆکارانە بکە
کاتێک باس لە customization دەکرێت ، ڕێگەی پەسەندکراو ئەوەیە کە سوود لە گۆڕاوەکان، نەخشەکان، و میکسینەکان وەربگریت. ئەم ڕێبازە بۆ 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، کۆدی ساسەکەت بەم شێوەیە دەبێت:
$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
لەسەر پێچەرەی پێکهاتەکانت بەکاربهێنیت بۆ بەکارهێنانی ئاراستەیەک یان ئاراستەیەکی تر.
کەیسەکانی لێوار و سنووردارکردنی ناسراو
لە کاتێکدا ئەم رێبازە جێگەی تێگەیشتنە، تکایە گرنگی بەمانەی خوارەوە بدەن:
- لە کاتی گۆڕینی
.ltr
و.rtl
, دڵنیابە کە بەپێی ئەو زیاد دەکەیتdir
وlang
تایبەتمەندیەکانت دەدەیت. - بارکردنی هەردوو پەڕگەکە دەتوانێت گەردنی تەنگێکی ڕاستەقینەی کارایی بێت: هەندێک باشترکردن لەبەرچاو بگرە ، و ڕەنگە هەوڵبدە یەکێک لەو پەڕگانە بە شێوەیەکی ناهاوسەنگ بار بکەیت .
- ستایلەکانی هێلانەکردن بەم شێوەیە ڕێگری دەکات
form-validation-state()
لە کارکردنی میکسینەکەمان وەک مەبەست، بەم شێوەیە پێویستە کەمێک بە خۆت تویک بکەیت. سەیری #31223 بکە .
کەیسی نانە وردکراوەکان
جیاکەرەوەی نانە وردکراوەکان تاکە حاڵەتە کە پێویستی بە گۆڕاوە نوێیەکەی خۆی $breadcrumb-divider-flipped
هەیە- واتە - بەپێی پێشوەختە بۆ $breadcrumb-divider
.