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
favourstart
وend
. هذا يجعل أسماء الفئات والقيم مناسبة لـ LTR و RTL دون أي تكاليف إضافية.
على سبيل المثال ، بدلاً من .ml-3
for 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;
}
مكدس الخطوط البديلة
إذا كنت تستخدم خطًا مخصصًا ، فاعلم أنه ليست كل الخطوط تدعم الأبجدية غير اللاتينية. للتبديل من عائلة Pan-European إلى مجموعة الخطوط العربية ، قد تحتاج إلى استخدام /*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 String Maps ، هذا واضح جدًا. قم بلف @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
.