إخفاء العناصر في التخطيطات سريعة الاستجابة باستخدام Bootstrap

عند تصميم تخطيطات سريعة الاستجابة، تصبح إدارة المساحة أمرًا بالغ الأهمية، خاصة على الشاشات الصغيرة. يوفر Bootstrap دعمًا لطي عناصر شريط القائمة للأجهزة المحمولة، ولكن ماذا لو كنت تريد إخفاء عناصر الصفحة الأخرى بالمثل؟

الحل:

يقدم Bootstrap فئات تتيح لك لإخفاء العناصر بناءً على حجم الشاشة:

• أجهزة صغيرة جدًا: الهواتف (
الأجهزة الصغيرة:
• الأجهزة اللوحية (≥768 بكسل) - .visible-sm-* (إظهار)، .خفي -sm (إخفاء)
الأجهزة المتوسطة:
• أجهزة الكمبيوتر المكتبية (≥992 بكسل) - .visible-md-* (إظهار)، .hidden-md (إخفاء)الأجهزة الكبيرة:
أجهزة الكمبيوتر المكتبية (≥1200px) - .visible-lg-* (إظهار)، .hidden -lg (إخفاء)
مثال للاستخدام:

للإخفاء عنصر .nav-pills على الشاشات الصغيرة:

  ...

بالنسبة إلى Bootstrap 4، استخدم Hidden-*-up (إخفاء لنقاط التوقف الأكبر) أو Hidden-*-down (يخفي نقاط التوقف الأصغر).

• في إصدارات Bootstrap الأقدم، أصبح .hidden-phone و.hidden-tablet قديمين.