شرح صفوف ومحتوى الفقرة
من أشهر التغييرات المعمارية في الانتقال من الإصدار الرابع إلى Bootstrap 5 الاستغناء الرسمي عن مكوّن .jumbotron القديم؛ لأن كل ما كان يفعله ذلك المكوّن لم يتجاوز حشواً داخلياً كبيراً وخلفية رمادية واستدارة خفيفة! اليوم تبني أقسام الواجهة الترحيبية Hero Sections بمرونة أوسع وحجم حزمة أخف عبر دمج كلاسات الأدوات القياسية مثل .p-5 .mb-4 .bg-body-tertiary .rounded-3 .border مع العناوين البارزة .display-5 .fw-bold.
| الأداة القديمة الملغاة في BS4 | البديل القياسي في Bootstrap 5.3 | الميزة الهندسية للبديل الحديث |
|---|---|---|
.embed-responsive-16by9 | .ratio .ratio-16x9 | يدعم متغيرات CSS المخصصة لأي نسبة أبعاد بحجم كود أقل |
.sr-only / .sr-only-focusable | .visually-hidden / -focusable | تسمية دلالية شاملة تتسق مع معايير الإتاحة الحديثة |
.jumbotron | .p-5 .bg-body-tertiary .rounded-3 | يتكيف تلقائياً مع الوضعين الفاتح والداكن بلا كود زائد |
| فواصل الحدود اليدوية | .vr و .icon-link و .focus-ring | محاذاة مرنة فورية وحلقات تركيز عالية الوضوح |
<div class="p-4 p-md-5 bg-body-tertiary rounded-3 border">
<h1 class="display-6 fw-bold">Modern Cloud Workspace</h1>
<p class="col-md-9 fs-5 text-body-secondary">
Build responsive hero banners with pure BS5 utilities.
</p>
<a href="#launch" class="d-inline-block px-4 py-2
text-bg-primary rounded-2 text-decoration-none fw-bold">
Launch Workspace
</a>
</div>ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعرفت في هذا الدرس على حزمة المساعدات البصرية وأدوات الإتاحة في بوتستراب 5.3، بما يشمل تثبيت نسب أبعاد الوسائط بكلاس ratio، والفاصل العمودي vr، وتوسيع النقر بـ stretched-link، وحلقات التركيز والإخفاء البصري، وبناء واجهات Hero البديلة لـ Jumbotron. الخطوة التالية: انتقل الآن إلى الموديول الخامس مع الدرس الثاني والعشرين لاحتراف أول وأهم مكونات الواجهة التفاعلية وهو الأزرار وزر الإغلاق القياسي.