في هذا الدرس 7تصفّح المواضيع
تتيح لك كلاسات خاصية العرض .d-{value} ونسخها المتجاوبة .d-{breakpoint}-{value} تبديل طريقة رسم العنصر أو إخفاءه تماماً حسب عرض الشاشة دون كتابة استعلام وسائط واحد؛ ومن أشهر قيمها none وinline وinline-block وblock وgrid.
فإذا أردت إخفاء شريط جانبي على الهواتف وإظهاره بدءاً من الشاشات المتوسطة فما فوق، تجمع ببساطة d-none d-md-block. كما يوفر الإطار عائلة .d-print-* مثل .d-print-none لإخفاء قوائم التنقل وأزرار الإجراءات تلقائياً عندما يطبع المستخدم الفاتورة أو التقرير ورقياً.
<div class="d-block d-md-none p-2 text-bg-info rounded">
Visible on Mobile Only (<768px)
</div>
<div class="d-none d-md-block p-2 text-bg-primary rounded">
Visible on Tablet & Desktop (>=768px)
</div>
<div class="d-print-none mt-2 small text-body-secondary">
Hidden automatically when printing paper PDF
</div>لبناء عناصر متراكبة مثل عداد الإشعارات الأحمر فوق زاوية صندوق الرسائل، ندمج نوع التموضع مع إحداثيات الحواف المنطقية:
- تحديد السياق: نضع
.position-relativeعلى الصندوق الأب ليكون نقطة المرجع، ونضع.position-absoluteعلى العنصر الفرعي المتراكب. - إحداثيات المسافة (0 و50 و100): نحدد موقع العنصر بنسبة مئوية عبر
.top-0أو.top-50أو.top-100، و.bottom-*، والاتجاهين المنطقيين.start-0/.start-50/.start-100و.end-*.
عندما تضع عنصراً مطلقاً عند إحداثيات المنتصف top-50 start-50، يضع المتصفح «الزاوية العليا» للعنصر في المنتصف فيبدو منحرفاً قليلاً للأسفل والجانب. يعالج كلاس .translate-middle ذلك بسحب العنصر عكسياً بمقدار نصف عرضه ونصف ارتفاعه translate(-50%, -50%) ليتطابق مركزه الهندسي مع النقطة المستهدفة بدقة مليمترية.
وإذا أردت السحب على محور واحد فقط، استخدم .translate-middle-x للمحور الأفقي أو .translate-middle-y للمحور الرأسي.
<div class="p-4">
<div class="position-relative d-inline-block
px-4 py-2 text-bg-primary rounded-3">
Inbox Messages
<span class="position-absolute top-0 start-100
translate-middle px-2 py-1 text-bg-danger
rounded-pill small">9+</span>
</div>
</div>لتثبيت شريط التنقل أو شريط الإجراءات أثناء تمرير الصفحة الطويلة، يوفر بوتستراب نمطين مختلفين جوهرياً:
- التثبيت الدائم (
.fixed-topو.fixed-bottom): ينتزع العنصر من التدفق الطبيعي للصفحة ويلصقه بأعلى أو أسفل الشاشة دائماً، مما يتطلب إضافة حشو تعويضي على<body>حتى لا يختفي المحتوى تحته. - التثبيت الذكي الهجين (
.sticky-topو.sticky-bottomونسخها المتجاوبة.sticky-md-top): يبقى العنصر في مكانه الطبيعي تماماً ولا يغطي ما بعده، وبمجرد وصول التمرير إليه يلتصق بحافة الشاشة طوال بقائه داخل حدود حاويته الأب!
عندما يتجاوز طول النص أو السجل البرمجي الارتفاع المحدد لصندوقه، تمنحك كلاسات الفيضان أربعة خيارات دقيقة: .overflow-auto لإظهار شريط تمرير عند الحاجة فقط (الخيار الأنظف دائماً)، و.overflow-hidden لقص أي جزء زائد خارج حدود الصندوق، و.overflow-scroll لإظهار مسار التمرير دائماً، و.overflow-visible للسماح بالخروج.
وفي الإصدار 5.3 يمكنك التحكم في كل محور باستقلالية تامة عبر .overflow-x-auto للتمرير الأفقي وحده و.overflow-y-auto للتمرير الرأسي وحده.
عند التفاف فقرة مقالية حول صورة صغيرة، استخدم التعويم المنطقي .float-start أو .float-end (أو المتجاوب .float-md-start) مع إضافة .clearfix على الأب لاحتواء الطفو، وتجنب استخدام التعويم لبناء أعمدة الصفحة الكاملة طالما لديك نظام الشبكة الحديث.
أما عندما تضطر لتوحيد أبعاد بطاقات الصور بارتفاع ثابت مثل 180px دون تمطيط الصور أو ضغطها، فإن عائلة .object-fit-cover تقص أطراف الصورة بذكاء لتملأ الإطار مع الحفاظ الكامل على نسبة أبعادها الأصلية، بجانب خيارات .object-fit-contain و.object-fit-scale.
<div class="row g-3">
<div class="col-6">
<img src="/images/examples/laptop-pro.webp"
height="130" class="w-100 object-fit-cover rounded-3"
alt="Distortion-free cover crop">
</div>
<div class="col-6">
<img src="/images/examples/laptop-pro.webp"
height="130" class="w-100 object-fit-contain border"
alt="Full contain fit"></div></div>نختم أدوات التحكم البصري بثلاث عائلات دقيقة تكمل منظومة التموضع:
- شفافية العنصر الكامل (
.opacity-0/25/50/75/100): تضبط شفافية الصندوق ومحتواه معاً (انتبه: العنصر ذو.opacity-0يظل قابلاً للنقر بالمؤشر!). - الرؤية وحجز المكان (
.visibleو.invisible): يخفي.invisibleالعنصر بصرياً وعن النقر وقارئات الشاشة عبرvisibility: hiddenمع إبقاء مساحته الهندسية محجوزة لمنع اهتزاز الواجهة. - ترتيب التراكب الرأسي (
.z-n1و.z-0حتى.z-3): تتحكم كلاسات بوتستراب 5.3 في أي طبقة متموضعة تعلو فوق جارتها دون أرقام عشوائية مضخمة.
يلخص الجدول المرجعي التالي أدوات العرض والتموضع والفيضان والطبقات في بوتستراب 5.3:
| الفئة | الكلاسات الأساسية | السلوك الهندسي |
|---|---|---|
| العرض والطباعة | .d-none, .d-md-block, .d-print-none | تبديل الظهور ونمط الصندوق حسب الشاشة أو عند الطباعة |
| التموضع والإحداثيات | .position-relative, .position-absolute, .top-0, .start-100 | تثبيت العناصر الفرعية عند نسب 0% و50% و100% من حواف الأب |
| التوسيط العكسي | .translate-middle, .translate-middle-x | مطابقة مركز العنصر المطلق مع نقطة الإحداثيات |
| التثبيت العلوي والسفلي | .sticky-top, .fixed-top, .fixed-bottom | تثبيت الأشرطة أثناء التمرير داخل الأب أو على مستوى النافذة |
| الفيضان وملاءمة الوسائط | .overflow-y-auto, .object-fit-cover | عزل التمرير وقص الصور بتناسق داخل أبعاد ثابتة |
| الشفافية والرؤية والطبقات | .opacity-50, .invisible, .z-n1 .. .z-3 | ضبط الشفافية وحجز المساحة وترتيب طبقات التراكب |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
ملخص الدرس: تعرفت في هذا الدرس على كلاسات العرض والطباعة المتجاوبة، وإحداثيات التموضع المطلق والنسبي والتوسيط بـ translate-middle، والفرق بين sticky-top وfixed-top، وأدوات الفيضان وملاءمة الصور object-fit وترتيب الطبقات z-index.
الخطوة التالية والدرس القادم
انتقل الآن إلى درس «الصندوق المرن والتكديس في بوتستراب 5» لإتقان كلاسات Flexbox والمحاذاة والالتفاف وأدوات التكديس المختصرة vstack وhstack.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Translate Middle التوسيط العكسي للإحداثيات
- كلاس يسحب العنصر المطلق بنسبة 50% أفقياً ورأسياً ليتطابق مركزه الهندسي مع نقطة الإحداثيات.
- للمراجعة
- 02 Sticky Positioning التثبيت الهجين الذكي
- كلاس يبقي العنصر في تدفقه الطبيعي ثم يلصقه بأعلى الشاشة فور وصول تمرير الصفحة إليه.
- للمراجعة
- 03 Object Fit Cover الملاءمة الكاملة بدون تشويه
- كلاس يملأ إطار الصورة أو الفيديو المحدد الارتفاع بالكامل مع الحفاظ على تناسق الأبعاد دون تمطيط.
- للمراجعة
- 04 Invisible Utility الإخفاء مع حجز المساحة
- كلاس يخفي العنصر بصرياً وتفاعلياً مع الاحتفاظ بحيزه الهندسي في السطر لمنع قفز العناصر المجاورة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 PDF PDF
- Portable Document Format
- مخرجات طباعة الفواتير والتقارير التي ينظفها كلاس d-print-none بإخفاء أشرطة التنقل تلقائياً.
- للمراجعة
- 02 DOM DOM
- Document Object Model
- شجرة عناصر المتصفح التي تبقى فيها العناصر المخفية بكلاس d-none موجودة برمجياً في المصدر.
- للمراجعة
- 03 RTL RTL
- Right-to-Left
- اتجاه الواجهة العربية حيث يرتكز الكلاس start-0 على الحافة اليمنى وend-0 على الحافة اليسرى.
- للمراجعة
- 04 CSS CSS
- Cascading Style Sheets
- المواصفة التي تحكم سياقات التموضع وترتيب الطبقات وملاءمة الوسائط في بوتستراب.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
أنشئ صندوقاً أباً بكلاسات position-relative d-inline-block px-4 py-2 text-bg-dark rounded-3 يضم بداخله عداداً فرعياً بكلاسات position-absolute top-0 start-100 translate-middle px-2 py-1 text-bg-danger rounded-pill small.
-
اكتب صندوقاً مخفياً على الهاتف وظاهراً بدءاً من الشاشات المتوسطة وعند عدم الطباعة (d-none d-md-block d-print-none)، متبوعاً بالصورة /images/examples/laptop-pro.webp بارتفاع 150 وكلاسات w-100 object-fit-cover rounded-3.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي8 أسئلة تنتظرك ＋
أي تركيبة كلاسات تخفي العنصر على الهاتف (<768px) وتظهره كعنصر كتلي بدءاً من شاشات md فأكبر؟
يخفي .d-none العنصر افتراضياً على الجوال ثم يعيده .d-md-block للظهور الكتلي عند عرض 768px فأكثر.
ما الكلاس الواجب وضعه على الحاوية الأب ليرتكز عليها الابن المطلق .position-absolute بدلاً من نافذة الصفحة؟
يؤسس الكلاس .position-relative مرجع الإحداثيات للأبناء ذوي التموضع المطلق.
ما الفرق الجوهري بين الكلاس .invisible والكلاس .d-none في بوتستراب 5؟
يخفي .invisible العنصر مع الاحتفاظ بمساحته المحجوزة في التخطيط، بينما يزيل .d-none العنصر ومساحته تماماً.
هل يمكن أن يؤدي وضع .overflow-hidden على الحاوية الأب إلى تعطيل عمل .sticky-top أثناء تمرير الصفحة؟
صحيح؛ تمنع خاصية overflow-hidden على الأب التصاق العنصر المزود بـ sticky-top بحافة نافذة المتصفح.
أي كلاس في بوتستراب 5.3 يملأ صندوق صورة ثابت الارتفاع بالكامل عبر قص الأطراف الزائدة دون تمطيط الصورة؟
يحافظ .object-fit-cover على تناسق أبعاد الصورة مع ملء الصندوق بالكامل بدون تشويه.
أي كلاس يخفي شريط التنقل تلقائياً عند طباعة الصفحة ورقياً أو حفظها كملف PDF فقط؟
يطبق .d-print-none خاصية الإخفاء حصرياً داخل استعلام الطباعة @media print.
هل يظل العنصر المزود بكلاس .opacity-0 قابلاً للنقر بالفأرة رغم كونه شفافاً تماماً للعين؟
صحيح؛ الشفافية الصفرية تخفي الألوان فقط ويبقى العنصر موجوداً في مكانه ويستقبل النقرات.
أي كلاس طبقات في بوتستراب 5.3 يضع طبقة خلفية زخرفية متموضعة «خلف» المحتوى القياسي z-0؟
يضبط الكلاس .z-n1 قيمة الترتيب الرأسي عند -1 لتستقر الطبقة خلف عناصر z-0.