شرح صفوف ومحتوى الفقرة
نختم أدوات التحكم البصري بثلاث عائلات دقيقة تكمل منظومة التموضع:
- شفافية العنصر الكامل (
.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.