في هذا الدرس 6تصفّح المواضيع
عند تضمين مقطع فيديو أو خريطة تفاعلية أو لوحة رسوم داخل عمود متجاوب، يؤدي غياب نسبة الأبعاد الثابتة إلى تمدد العرض مع بقاء الارتفاع جامداً فيظهر إطار مشوّه، أو قفز محتوى الصفحة فجأة أثناء التحميل. استبدل Bootstrap 5 الكلاس الطويل الملغى .embed-responsive بالمساعد الرشيق .ratio مقروناً بأربع نسب قياسية جاهزة هي .ratio-1x1 للمربعات، و.ratio-4x3، و.ratio-16x9 للفيديو القياسي، و.ratio-21x9 للعروض السينمائية العريضة.
كل ما عليك فعله هو تغليف العنصر الابن مثل <iframe> أو <video> أو حتى <div> مباشرة داخل حاوية تحمل class="ratio ratio-16x9"، كما يمكنك تخصيص أي نسبة مئوية مخصصة عبر المتغير المحلي --bs-aspect-ratio: 50% لصنع نسبة 2x1 دقيقة.
<div class="ratio ratio-16x9 text-bg-dark rounded mb-2">
<div class="d-flex align-items-center
justify-content-center">16x9 Video Stage</div>
</div>
<div class="ratio ratio-4x3 text-bg-secondary rounded">
<div class="d-flex align-items-center
justify-content-center">4x3 Presentation</div>
</div>بينما يفصل الوسم <hr> بين الكتل الرأسية، نحتاج باستمرار داخل الأشرطة الأفقية .hstack وحاويات .d-flex إلى خط فاصل عمودي رشيق يفصل بين الروابط أو معلومات النشر. يوفر المساعد .vr فاصلاً عمودياً بعرض 1px يرث لون النص الحالي بشفافية هادئة ويتمدد تلقائياً ليطابق ارتفاع أطول عنصر مجاور له داخل الصندوق المرن دون حساب ارتفاع ثابت.
بدلاً من تغليف كتلة كاملة من العناوين والفقرات بوسم رابط واحد ضخم يربك قارئات الشاشة، يمنحك المساعد .stretched-link حلاً معمارياً نظيفاً: ضع الكلاس .position-relative على الصندوق الأب لتحديد حدود التمدد، ثم أضف .stretched-link إلى الرابط النصي الداخلي فقط.
يمتد العنصر الزائف ::after الخاص بالرابط ليغطي كامل مساحة الأب النسبي، فيصبح النقر في أي موضع من الكتلة موجهاً للرابط بسلاسة، مع الانتباه لعدم وضع عدة روابط متنافسة داخل نفس الصندوق ما لم ترفع طبقة الرابط الثانوي بتموضع نسبي و.z-2.
<div class="position-relative p-3 border rounded-3
bg-body-tertiary shadow-sm">
<h3 class="h5 mb-1">Cloud Deployment Checklist</h3>
<p class="mb-2 text-body-secondary">
Click anywhere inside this panel to open the guide.
</p>
<a href="#checklist" class="stretched-link fw-semibold
link-primary">Open Full Guide</a>
</div>أضاف الإصدار 5.3 مساعدين رائعين لتحسين التفاعل البصري وإمكانية الوصول للوحة المفاتيح: الأول هو .icon-link الذي يضبط محاذاة الأيقونة بجانب نص الرابط تلقائياً عبر الصندوق المرن السطري، ومع إضافة .icon-link-hover تتحرك الأيقونة انسيابياً عند مرور المؤشر.
والثاني هو .focus-ring المقترن بألوان مثل .focus-ring-primary أو .focus-ring-success، والذي يستبدل حد المتصفح المنقط الافتراضي بحلقة ظل واضحة متناسقة حول العنصر فور التركيز عليه بمفتاح Tab.
من أشهر التغييرات المعمارية في الانتقال من الإصدار الرابع إلى 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. الخطوة التالية: انتقل الآن إلى الموديول الخامس مع الدرس الثاني والعشرين لاحتراف أول وأهم مكونات الواجهة التفاعلية وهو الأزرار وزر الإغلاق القياسي.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Aspect Ratio Helper مساعد نسبة الأبعاد
- حاوية خدمية تحافظ تلقائياً على التناسب الهندسي بين العرض والارتفاع لمقاطع الفيديو والخرائط المتجاوبة.
- للمراجعة
- 02 Stretched Link الرابط الممتد
- كلاس يوسّع منطقة النقر الخاصة بالرابط عبر عنصر زائف لتشمل كامل الصندوق الأب المتموضع نسبياً.
- للمراجعة
- 03 Visually Hidden الإخفاء البصري المتاح صوتياً
- إخفاء العنصر النصي عن العين المجردة مع إبقائه متاحاً بالكامل لقارئات الشاشة الخاصة بالمكفوفين.
- للمراجعة
- 04 Vertical Rule الفاصل العمودي المرن
- خط فصل عمودي بسماكة بكسل واحد يتمدد تلقائياً للفصل بين العناصر المتجاورة أفقياً.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 ARIA ARIA
- Accessible Rich Internet Applications
- مواصفة إمكانية الوصول القياسية التي تتكامل مع أدوات الإخفاء البصري وحلقات التركيز.
- للمراجعة
- 02 CLS CLS
- Cumulative Layout Shift
- مقياس استقرار الصفحة البصري الذي يحسنه كلاس ratio بحجز ارتفاع الفيديو قبل اكتمال تحميله.
- للمراجعة
- 03 WCAG WCAG
- Web Content Accessibility Guidelines
- المعايير العالمية التي توجب وضوح مؤشر تركيز لوحة المفاتيح وروابط التخطي.
- للمراجعة
- 04 SVG SVG
- Scalable Vector Graphics
- الأيقونات المتجهية الدقيقة التي يحاذيها المساعد icon-link بجانب النصوص بسلاسة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
صمّم قسم واجهة ترحيبية بعمودين مستخدماً كلاسات الحشو والخلفية التكيفية، وضع في أحد العمودين إطار معاينة بكلاسي ratio وratio-16x9.
-
أضف رابط تخطي بكلاس visually-hidden-focusable أعلى الصفحة، يليه صندوق يحمل position-relative وبداخله رابط بكلاس stretched-link.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي8 أسئلة تنتظرك ＋
أي زوج كلاسات في Bootstrap 5 يحل محل الكلاس القديم الملغى .embed-responsive-16by9؟
استبدل بوتستراب 5 عائلة embed-responsive بالكلاس الموحد الرشيق .ratio مع النسب .ratio-16x9 وغيرها.
ما الكلاس الواجب إضافته إلى الصندوق الأب لكي تنحصر منطقة نقر .stretched-link بداخله فقط؟
يمتد العنصر الزائف ::after للرابط حتى أقرب أب يملك تموضعاً غير static، لذا نضع .position-relative على الأب المباشر.
حُذف مكوّن .jumbotron في Bootstrap 5 لأنه يمكن بناء أقسام Hero أكثر مرونة باستخدام كلاسات الأدوات القياسية.
نعم، تغني كلاسات مثل .p-5 و.bg-body-tertiary و.rounded-3 عن الحاجة لمكوّن Jumbotron منفصل.
أي كلاس في Bootstrap 5 حلّ محل الكلاس القديم .sr-only لإخفاء النص بصرياً مع إبقائه مقروءاً لقارئات الشاشة؟
الكلاس .visually-hidden هو البديل الرسمي القياسي لـ .sr-only في بوتستراب 5.
متى يظهر العنصر الحامل للكلاس .visually-hidden-focusable أمام المستخدم بصرياً على الشاشة؟
يظهر .visually-hidden-focusable فور التركيز عليه بلوحة المفاتيح، مما يجعله مثالياً لروابط تخطي التنقل.
ينشئ الكلاس .vr خطاً فاصلاً عمودياً يتمدد تلقائياً داخل حاويات Flexbox و.hstack.
يعتمد .vr على align-self: stretch ليتمدد عمودياً بكامل ارتفاع الصف المرن.
أي متغير CSS محلي يسمح بتحديد نسبة أبعاد مخصصة على حاوية .ratio في Bootstrap 5.3؟
يقرأ الكلاس .ratio قيمة النسبة المئوية من المتغير المحلي --bs-aspect-ratio مثل 50% لنسبة 2:1.
ما وظيفة الكلاس .focus-ring في Bootstrap 5.3؟
يزيل .focus-ring الـ outline الخام ويضع حلقة box-shadow متناسقة وعالية الوضوح لمستخدمي لوحة المفاتيح.