أنماط التصميم المتجاوب

<!-- التفكير بالأولوية للهاتف: ابدأ بتخطيط الهاتف --> <div class="container"> <!-- هذا بعرض كامل على الهاتف، نصف العرض على المتوسط وما فوق --> <div class="row"> <div class="col-12 col-md-6"> <h3>صندوق المحتوى</h3> <p>يبدأ بعرض 100% (الهاتف)، ثم يصبح 50% عند نقطة توقف md</p> </div> </div> </div> <!-- التعزيز التدريجي: أضف تعقيدًا مع نمو الشاشات --> <div class="row"> <!-- الهاتف: عمود واحد (100%) --> <!-- الجهاز اللوحي: عمودان (50% لكل منهما) --> <!-- سطح المكتب: 3 أعمدة (33.33% لكل منها) --> <!-- سطح المكتب الكبير: 4 أعمدة (25% لكل منها) --> <div class="col-12 col-sm-6 col-md-4 col-lg-3">الصندوق 1</div> <div class="col-12 col-sm-6 col-md-4 col-lg-3">الصندوق 2</div> <div class="col-12 col-sm-6 col-md-4 col-lg-3">الصندوق 3</div> <div class="col-12 col-sm-6 col-md-4 col-lg-3">الصندوق 4</div> </div> <!-- مبسط مع row-cols --> <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4"> <div class="col">الصندوق 1</div> <div class="col">الصندوق 2</div> <div class="col">الصندوق 3</div> <div class="col">الصندوق 4</div> </div>

<!-- إخفاء على الهاتف، إظهار على سطح المكتب --> <div class="d-none d-md-block"> <p>هذا المحتوى يظهر فقط على الشاشات المتوسطة وأكبر</p> </div> <!-- إظهار على الهاتف، إخفاء على سطح المكتب --> <div class="d-block d-md-none"> <p>هذا المحتوى يظهر فقط على الهاتف</p> </div> <!-- إظهار فقط في نطاق نقطة توقف محدد --> <div class="d-none d-md-block d-lg-none"> <p>هذا يظهر فقط على الشاشات المتوسطة (md)</p> </div> <!-- مثال عملي: تنقل مختلف للهاتف مقابل سطح المكتب --> <nav> <!-- الهاتف: قائمة الهامبرغر --> <div class="d-md-none"> <button class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#mobileNav"> ☰ القائمة </button> <div class="collapse" id="mobileNav"> <ul class="list-unstyled"> <li><a href="#">الرئيسية</a></li> <li><a href="#">عن</a></li> <li><a href="#">اتصل</a></li> </ul> </div> </div> <!-- سطح المكتب: قائمة أفقية --> <div class="d-none d-md-block"> <ul class="nav"> <li class="nav-item"><a class="nav-link" href="#">الرئيسية</a></li> <li class="nav-item"><a class="nav-link" href="#">عن</a></li> <li class="nav-item"><a class="nav-link" href="#">اتصل</a></li> </ul> </div> </nav> <!-- أدوات العرض --> <div class="d-inline d-md-block">سطري على الهاتف، كتلة على سطح المكتب</div> <div class="d-flex d-md-inline-flex">Flex على الهاتف، inline-flex على سطح المكتب</div>

<!-- صورة متجاوبة أساسية --> <img src="photo.jpg" class="img-fluid" alt="الوصف"> <!-- img-fluid = max-width: 100%; height: auto; --> <!-- صورة متجاوبة مع قيود --> <div style="max-width: 600px;"> <img src="photo.jpg" class="img-fluid" alt="لن تتجاوز 600px أبدًا"> </div> <!-- زوايا مستديرة متجاوبة --> <img src="photo.jpg" class="img-fluid rounded" alt="مستديرة"> <img src="photo.jpg" class="img-fluid rounded-circle" alt="دائرة"> <img src="photo.jpg" class="img-fluid rounded-pill" alt="حبة"> <!-- نمط المصغرة --> <img src="photo.jpg" class="img-thumbnail" alt="مصغرة"> <!-- صور خلفية متجاوبة مع CSS --> <div class="hero-banner" style=" background-image: url('hero.jpg'); background-size: cover; background-position: center; min-height: 300px; "> <div class="container"> <h1>محتوى البطل</h1> </div> </div> <!-- حاويات نسبة العرض إلى الارتفاع للصور/الفيديو --> <div class="ratio ratio-16x9"> <img src="video-thumbnail.jpg" alt="نسبة عرض إلى ارتفاع 16:9"> </div> <div class="ratio ratio-4x3"> <img src="old-tv.jpg" alt="نسبة عرض إلى ارتفاع 4:3"> </div> <div class="ratio ratio-1x1"> <img src="square.jpg" alt="نسبة عرض إلى ارتفاع مربعة 1:1"> </div> <!-- شبكة صور متجاوبة --> <div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 g-2"> <div class="col"> <img src="gallery1.jpg" class="img-fluid" alt="المعرض"> </div> <div class="col"> <img src="gallery2.jpg" class="img-fluid" alt="المعرض"> </div> <!-- المزيد من الصور... --> </div> <!-- الاتجاه الفني مع عنصر picture --> <picture> <source media="(min-width: 1200px)" srcset="desktop-wide.jpg"> <source media="(min-width: 768px)" srcset="tablet.jpg"> <img src="mobile.jpg" class="img-fluid" alt="متجاوب"> </picture>

<!-- عناوين العرض المتجاوبة --> <h1 class="display-1">أكبر عرض</h1> <h1 class="display-2">عرض كبير</h1> <h1 class="display-3">عرض متوسط</h1> <h1 class="display-4">عرض صغير</h1> <h1 class="display-5">عرض أصغر</h1> <h1 class="display-6">أصغر عرض</h1> <!-- فقرة رئيسية لنص المقدمة --> <p class="lead"> هذه الفقرة تبرز من النص العادي وتتحجم بشكل متجاوب. </p> <!-- أحجام خطوط متجاوبة مع الأدوات --> <p class="fs-1">حجم الخط 1 (الأكبر)</p> <p class="fs-2">حجم الخط 2</p> <p class="fs-3">حجم الخط 3</p> <p class="fs-4">حجم الخط 4</p> <p class="fs-5">حجم الخط 5</p> <p class="fs-6">حجم الخط 6 (الأصغر)</p> <!-- محاذاة النص التي تتغير مع نقطة التوقف --> <p class="text-center text-md-start"> متوسط على الهاتف، محاذاة لليسار على سطح المكتب </p> <p class="text-start text-md-center text-lg-end"> يسار على الهاتف، وسط على الجهاز اللوحي، يمين على سطح المكتب </p> <!-- اقتطاع النص المتجاوب --> <p class="text-truncate" style="max-width: 200px;"> سيتم اقتطاع هذا النص بنقاط حذف إذا كان طويلاً جدًا </p> <!-- فواصل الأسطر المتجاوبة --> <h2> عنوان طويل قد<br class="d-none d-md-inline"> ينقسم على سطح المكتب </h2> <!-- طباعة متجاوبة مخصصة --> <h1 class="mb-2 mb-md-4"> عنوان مع هامش متجاوب </h1> <p class="px-3 px-md-5"> محتوى مع حشوة أفقية متجاوبة </p>

<!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>لوحة تحكم متجاوبة</title> <link href="bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container-fluid"> <!-- الرأس --> <header class="row bg-dark text-white py-3 mb-3"> <div class="col"> <div class="d-flex justify-content-between align-items-center"> <h1 class="h3 mb-0">لوحة التحكم</h1> <!-- الهاتف: أيقونة فقط، سطح المكتب: نص + أيقونة --> <button class="btn btn-light"> <span class="d-none d-md-inline">تسجيل خروج</span> <span>🚪</span> </button> </div> </div> </header> <div class="row"> <!-- الشريط الجانبي: عرض كامل على الهاتف، شريط جانبي على سطح المكتب --> <aside class="col-12 col-md-3 col-lg-2 mb-3"> <nav class="nav flex-column"> <a class="nav-link active" href="#">📊 لوحة التحكم</a> <a class="nav-link" href="#">👥 المستخدمون</a> <a class="nav-link" href="#">📈 التحليلات</a> <a class="nav-link" href="#">⚙️ الإعدادات</a> </nav> </aside> <!-- المحتوى الرئيسي --> <main class="col-12 col-md-9 col-lg-10"> <!-- بطاقات الإحصائيات: تكديس على الهاتف، صف على الجهاز اللوحي+ --> <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-3 mb-4"> <div class="col"> <div class="card"> <div class="card-body"> <h6 class="card-subtitle text-muted mb-2">إجمالي المستخدمين</h6> <h2 class="card-title mb-0">12,543</h2> </div> </div> </div> <div class="col"> <div class="card"> <div class="card-body"> <h6 class="card-subtitle text-muted mb-2">الإيرادات</h6> <h2 class="card-title mb-0">$45,890</h2> </div> </div> </div> <div class="col"> <div class="card"> <div class="card-body"> <h6 class="card-subtitle text-muted mb-2">الطلبات</h6> <h2 class="card-title mb-0">892</h2> </div> </div> </div> <div class="col"> <div class="card"> <div class="card-body"> <h6 class="card-subtitle text-muted mb-2">النمو</h6> <h2 class="card-title mb-0">+23%</h2> </div> </div> </div> </div> <!-- الرسوم البيانية: تكديس على الهاتف، جنبًا إلى جنب على سطح المكتب --> <div class="row g-3"> <div class="col-12 col-lg-8"> <div class="card"> <div class="card-body"> <h5 class="card-title">نظرة عامة على المبيعات</h5> <div style="height: 300px; background: #f0f0f0; display: flex; align-items: center; justify-content: center;"> منطقة الرسم البياني </div> </div> </div> </div> <div class="col-12 col-lg-4"> <div class="card"> <div class="card-body"> <h5 class="card-title">النشاط الأخير</h5> <ul class="list-unstyled"> <li class="mb-2">✅ مستخدم جديد مسجل</li> <li class="mb-2">💰 تم استلام الدفع</li> <li class="mb-2">📦 تم شحن الطلب</li> </ul> </div> </div> </div> </div> </main> </div> </div> </body> </html>

<!-- النمط 1: مكدس إلى أفقي --> <div class="row"> <div class="col-12 col-md-6">تكديس على الهاتف، جنبًا إلى جنب على سطح المكتب</div> <div class="col-12 col-md-6">تكديس على الهاتف، جنبًا إلى جنب على سطح المكتب</div> </div> <!-- النمط 2: تخطيط الشريط الجانبي --> <div class="row"> <aside class="col-12 col-lg-3 mb-3 mb-lg-0">الشريط الجانبي</aside> <main class="col-12 col-lg-9">المحتوى الرئيسي</main> </div> <!-- النمط 3: شبكة البطاقات --> <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-4"> <div class="col"><div class="card">...</div></div> <div class="col"><div class="card">...</div></div> <div class="col"><div class="card">...</div></div> </div> <!-- النمط 4: البطل مع محتوى متوسط --> <div class="row align-items-center justify-content-center" style="min-height: 60vh;"> <div class="col-12 col-md-8 col-lg-6 text-center"> <h1 class="display-3">عنوان البطل</h1> <p class="lead">نص العنوان الفرعي</p> <button class="btn btn-primary btn-lg">زر الدعوة لاتخاذ إجراء</button> </div> </div> <!-- النمط 5: جدول متجاوب --> <div class="table-responsive"> <table class="table"> <thead> <tr> <th>الاسم</th> <th>البريد الإلكتروني</th> <th class="d-none d-md-table-cell">الهاتف</th> <th class="d-none d-lg-table-cell">الشركة</th> </tr> </thead> <tbody> <!-- صفوف الجدول --> </tbody> </table> </div>