تخطيطات الشبكة المتجاوبة

صيغة فئة العمود: .col-{breakpoint}-{size} خيارات نقطة التوقف: (بدون) - صغير جدًا (<576px) - ينطبق على جميع الأحجام sm - صغير (≥576px) md - متوسط (≥768px) lg - كبير (≥992px) xl - كبير جدًا (≥1200px) xxl - كبير جدًا جدًا (≥1400px) خيارات الحجم: 1 إلى 12 - عدد الأعمدة المراد احتلالها auto - عرض تلقائي بناءً على المحتوى أمثلة: .col-6 - 6 أعمدة في جميع الأحجام .col-sm-6 - 6 أعمدة من الشاشات الصغيرة فما فوق .col-md-4 - 4 أعمدة من الشاشات المتوسطة فما فوق .col-lg-3 - 3 أعمدة من الشاشات الكبيرة فما فوق .col-xl-2 - عمودان من الشاشات الكبيرة جدًا فما فوق

<div class="container"> <div class="row"> <div class="col-md-6"> <h3>العمود 1</h3> <p>عرض كامل على الهاتف المحمول، نصف العرض على الشاشات المتوسطة+</p> </div> <div class="col-md-6"> <h3>العمود 2</h3> <p>عرض كامل على الهاتف المحمول، نصف العرض على الشاشات المتوسطة+</p> </div> </div> </div> السلوك: الهاتف المحمول (<768px): كل عمود بعرض 100% (مكدس) الجهاز اللوحي+ (≥768px): كل عمود بعرض 50% (جنبًا إلى جنب)

<div class="container"> <div class="row"> <div class="col-12 col-sm-6 col-md-4 col-lg-3"> عمود متجاوب </div> <div class="col-12 col-sm-6 col-md-4 col-lg-3"> عمود متجاوب </div> <div class="col-12 col-sm-6 col-md-4 col-lg-3"> عمود متجاوب </div> <div class="col-12 col-sm-6 col-md-4 col-lg-3"> عمود متجاوب </div> </div> </div> السلوك: صغير جدًا (<576px): عمود واحد في كل صف (col-12) صغير (≥576px): عمودان في كل صف (col-sm-6) متوسط (≥768px): 3 أعمدة في كل صف (col-md-4) كبير (≥992px): 4 أعمدة في كل صف (col-lg-3)

<div class="container"> <div class="row"> <div class="col"> عمود متساوي العرض </div> <div class="col"> عمود متساوي العرض </div> <div class="col"> عمود متساوي العرض </div> </div> </div> النتيجة: ثلاثة أعمدة، كل منها يشغل بالضبط 33.33% من العرض

<div class="container"> <div class="row"> <div class="col">العمود 1</div> <div class="col">العمود 2</div> <div class="w-100"></div> <!-- إجبار صف جديد --> <div class="col">العمود 3</div> <div class="col">العمود 4</div> </div> </div> النتيجة: صفان مع عمودين متساويين في كل منهما

<div class="container"> <div class="row"> <div class="col"> عرض متساوٍ </div> <div class="col-auto"> العرض بناءً على المحتوى </div> <div class="col"> عرض متساوٍ </div> </div> </div> النتيجة: العمود الأوسط يحدد حجمه حسب المحتوى، الأعمدة الجانبية تتشارك المساحة المتبقية بالتساوي

<div class="container"> <div class="row"> <div class="col-9">9 أعمدة</div> <div class="col-4">4 أعمدة (تلتف لأن 9+4=13)</div> <div class="col-6">6 أعمدة</div> </div> </div> النتيجة البصرية: الصف 1: [عرض 9 أعمدة] الصف 2: [4 أعمدة][6 أعمدة][2 فارغة]

<div class="container"> <div class="row"> <!-- المنتج 1 --> <div class="col-12 col-sm-6 col-md-4 col-lg-3"> <div class="card"> <img src="product1.jpg" class="card-img-top" alt="المنتج 1"> <div class="card-body"> <h5 class="card-title">اسم المنتج</h5> <p class="card-text">$29.99</p> <button class="btn btn-primary">أضف إلى السلة</button> </div> </div> </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> </div> سلوك التخطيط: الهاتف المحمول: عمود واحد (عرض كامل) صغير: عمودان في كل صف متوسط: 3 أعمدة في كل صف كبير+: 4 أعمدة في كل صف

<div class="container"> <div class="row"> <!-- المحتوى الرئيسي --> <div class="col-12 col-lg-8"> <article> <h1>عنوان منشور المدونة</h1> <p>محتوى منشور المدونة يذهب هنا...</p> </article> </div> <!-- الشريط الجانبي --> <div class="col-12 col-lg-4"> <aside> <h3>المنشورات الأخيرة</h3> <ul> <li>منشور 1</li> <li>منشور 2</li> <li>منشور 3</li> </ul> </aside> </div> </div> </div> سلوك التخطيط: الهاتف المحمول/الجهاز اللوحي (<992px): الشريط الجانبي أسفل المحتوى (كلاهما بعرض كامل) سطح المكتب (≥992px): الشريط الجانبي بجانب المحتوى (66.67% / 33.33%)

<div class="container"> <div class="row"> <div class="col-12 col-md-6 col-xl-3"> <div class="text-center"> <i class="bi bi-lightning fs-1 text-primary"></i> <h3>سريع</h3> <p>أداء سريع للغاية</p> </div> </div> <div class="col-12 col-md-6 col-xl-3"> <div class="text-center"> <i class="bi bi-shield-check fs-1 text-success"></i> <h3>آمن</h3> <p>أمان على مستوى البنوك</p> </div> </div> <div class="col-12 col-md-6 col-xl-3"> <div class="text-center"> <i class="bi bi-phone fs-1 text-info"></i> <h3>متجاوب</h3> <p>يعمل على جميع الأجهزة</p> </div> </div> <div class="col-12 col-md-6 col-xl-3"> <div class="text-center"> <i class="bi bi-heart fs-1 text-danger"></i> <h3>محبوب</h3> <p>موثوق به من قبل الآلاف</p> </div> </div> </div> </div> سلوك التخطيط: الهاتف المحمول (<768px): عمود واحد (مكدس) الجهاز اللوحي (768px-1199px): عمودان في كل صف سطح المكتب (≥1200px): 4 أعمدة في كل صف

<div class="container-fluid"> <div class="row"> <!-- تنقل الشريط الجانبي --> <div class="col-12 col-md-3 col-lg-2 bg-dark text-white"> <nav> <h4>لوحة المعلومات</h4> <ul class="nav flex-column"> <li class="nav-item">الرئيسية</li> <li class="nav-item">التحليلات</li> <li class="nav-item">التقارير</li> </ul> </nav> </div> <!-- منطقة المحتوى الرئيسية --> <div class="col-12 col-md-9 col-lg-10"> <div class="row"> <!-- بطاقات الإحصائيات --> <div class="col-12 col-sm-6 col-xl-3"> <div class="card"> <div class="card-body"> <h5>إجمالي المستخدمين</h5> <h2>1,234</h2> </div> </div> </div> <!-- المزيد من بطاقات الإحصائيات... --> </div> </div> </div> </div> سلوك التخطيط: الهاتف المحمول (<768px): الشريط الجانبي في الأعلى، محتوى بعرض كامل أسفله الجهاز اللوحي (≥768px): الشريط الجانبي 25%، المحتوى 75% سطح المكتب (≥992px): الشريط الجانبي 16.67%، المحتوى 83.33%

<!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="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <!-- الرأس --> <header class="bg-primary text-white py-3"> <div class="container"> <h1>موقعي المتجاوب</h1> </div> </header> <!-- قسم البطل --> <section class="bg-light py-5"> <div class="container"> <div class="row align-items-center"> <div class="col-12 col-lg-6"> <h2>مرحبًا بك في موقعنا</h2> <p class="lead">قم ببناء مواقع ويب متجاوبة رائعة</p> <button class="btn btn-primary btn-lg">ابدأ الآن</button> </div> <div class="col-12 col-lg-6"> <img src="hero-image.jpg" class="img-fluid" alt="البطل"> </div> </div> </div> </section> <!-- الميزات --> <section class="py-5"> <div class="container"> <h2 class="text-center mb-4">الميزات</h2> <div class="row"> <div class="col-12 col-sm-6 col-lg-3 mb-4"> <div class="card h-100"> <div class="card-body text-center"> <h4>الميزة 1</h4> <p>الوصف</p> </div> </div> </div> <!-- كرر لـ 3 ميزات أخرى --> </div> </div> </section> <!-- التذييل --> <footer class="bg-dark text-white py-4"> <div class="container"> <div class="row"> <div class="col-12 col-md-4"> <h5>حول</h5> <p>معلومات الشركة</p> </div> <div class="col-12 col-md-4"> <h5>الروابط</h5> <ul class="list-unstyled"> <li>الرئيسية</li> <li>حول</li> </ul> </div> <div class="col-12 col-md-4"> <h5>اتصل</h5> <p>البريد الإلكتروني: info@example.com</p> </div> </div> </div> </footer> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"> </script> </body> </html>

النمط 1: التكديس إلى الأفقي <div class="col-md-6"></div> الهاتف المحمول: مكدس (100%) سطح المكتب: جنبًا إلى جنب (50/50) النمط 2: شبكة 1-2-4 <div class="col-12 col-md-6 col-lg-3"></div> الهاتف المحمول: عمود واحد الجهاز اللوحي: عمودان سطح المكتب: 4 أعمدة النمط 3: تبديل الشريط الجانبي <div class="col-12 col-lg-8">الرئيسي</div> <div class="col-12 col-lg-4">الشريط الجانبي</div> الهاتف المحمول: الشريط الجانبي أسفل الرئيسي (كلاهما 100%) سطح المكتب: الشريط الجانبي بجانب الرئيسي (66.67% / 33.33%) النمط 4: بطاقات متساوية الارتفاع <div class="col-sm-6 col-lg-4"> <div class="card h-100">المحتوى</div> </div> تمتد البطاقات إلى ارتفاع متساوٍ في كل صف