شرح صفوف ومحتوى الفقرة
عندما تلاحظ أن أحد كلاسات بوتستراب لا يطبّق التنسيق المتوقع، يمكنك تشخيص السبب خلال ثوانٍ عبر ثلاث فحوصات سريعة في أدوات المطور DevTools بالضغط على F12:
- لوحة الشبكة Network: أعد تحميل الصفحة وتأكد أن ملفي
bootstrap.min.cssوbootstrap.bundle.min.jsيعيدان الحالة200دون خطأ مسار404أو رفض بصمةSRI. - لوحة العناصر Elements: افحص عنصر
<body>وتحقق من ظهور متغيرات الجذر مثل--bs-body-font-family. - لوحة الطرفية Console: اطبع التعبير
typeof window.bootstrapلتتأكد من إرجاع القيمة"object"كدليل قاطع على جاهزية الحزمة التفاعلية.
HTML
<div class="container">
<h2>Runtime Diagnostic Check</h2>
<p id="verOut">Running check...</p>
</div>
<script>
const jsOk = typeof window.bootstrap === 'object';
const cssVar = getComputedStyle(document.body)
.getPropertyValue('--bs-body-line-height').trim();
verOut.textContent = 'JS: ' + jsOk + ' | lh: ' + cssVar;
</script>| اسم الملف المترجم | موضعه القياسي في HTML | هل يضم Popper؟ | حالة الاستخدام المثالية |
|---|---|---|---|
bootstrap.min.css | داخل <head> قبل ملفك الخاص | ملف تنسيق فقط | جميع الصفحات القياسية ذات الاتجاه اليساري LTR |
bootstrap.rtl.min.css | داخل <head> بدلاً من القياسي | ملف تنسيق فقط | الواجهات العربية المفعّل عليها dir="rtl" |
bootstrap.bundle.min.js | قبل إغلاق </body> مباشرةً | نعم مدمجة بالكامل | الخيار الافتراضي الموصى به لكافة المكونات التفاعلية |
bootstrap.min.js | بعد استدعاء popper.min.js | لا يضمها | فقط عند إدارة نسخة Popper منفصلة يدوياً |
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس طرق تثبيت Bootstrap 5.3 الثلاث، وحماية روابط CDN ببصمة SRI، واستضافة الملفات محلياً، وبناء قالب البداية القياسي مع وسم viewport، والتمييز بين حزمة Bundle ومكتبة Popper، وفحص جاهزية الإطار في DevTools. الخطوة التالية: انتقل الآن إلى الدرس الثالث «دعم اللغة العربية RTL في بوتستراب 5» لإعداد الواجهات العربية الاحترافية من اليمين إلى اليسار.