مكونات تخطيط Bootstrap

<!-- حاوية ذات عرض ثابت (نقاط توقف متجاوبة) --> <div class="container"> <!-- يتغير العرض عند نقاط التوقف: sm (540px)، md (720px)، lg (960px)، xl (1140px)، xxl (1320px) --> <p>حاوية متجاوبة ذات عرض ثابت</p> </div> <!-- حاوية بعرض كامل --> <div class="container-fluid"> <!-- دائمًا بعرض 100% في جميع نقاط التوقف --> <p>حاوية سائلة بعرض كامل</p> </div> <!-- حاويات متجاوبة (100% حتى نقطة التوقف) --> <div class="container-sm">بعرض 100% حتى نقطة توقف sm (576px)</div> <div class="container-md">بعرض 100% حتى نقطة توقف md (768px)</div> <div class="container-lg">بعرض 100% حتى نقطة توقف lg (992px)</div> <div class="container-xl">بعرض 100% حتى نقطة توقف xl (1200px)</div> <div class="container-xxl">بعرض 100% حتى نقطة توقف xxl (1400px)</div> <!-- مثال عملي: دمج الحاويات --> <!-- رأس بعرض كامل --> <header class="bg-dark text-white"> <div class="container"> <nav class="navbar"> <span class="navbar-brand">موقعي</span> </nav> </div> </header> <!-- بطل بعرض كامل مع محتوى متوسط --> <section class="bg-primary text-white py-5"> <div class="container"> <h1 class="display-3">مرحبًا</h1> <p class="lead">محتوى قسم البطل</p> </div> </section> <!-- منطقة المحتوى القياسية --> <main class="container my-5"> <div class="row"> <div class="col-lg-8"> <article>المحتوى الرئيسي</article> </div> <div class="col-lg-4"> <aside>الشريط الجانبي</aside> </div> </div> </main> <!-- تذييل بعرض كامل --> <footer class="bg-dark text-white py-4"> <div class="container"> <p class="mb-0">© 2024 موقعي</p> </div> </footer>

<!-- أعمدة ذات عرض تلقائي --> <div class="row"> <div class="col"> عمود بعرض متساوٍ (يشارك المساحة المتاحة) </div> <div class="col"> عمود بعرض متساوٍ (يشارك المساحة المتاحة) </div> <div class="col"> عمود بعرض متساوٍ (يشارك المساحة المتاحة) </div> </div> <!-- مختلط: عرض محدد + عرض تلقائي --> <div class="row"> <div class="col-6"> عرض ثابت 50% </div> <div class="col"> عرض تلقائي (يملأ ال 50% المتبقية) </div> </div> <!-- عرض بناءً على المحتوى --> <div class="row"> <div class="col-auto"> العرض بناءً على المحتوى (لا ينمو) </div> <div class="col"> يأخذ المساحة المتبقية </div> </div> <!-- عملي: تخطيط نموذج --> <form> <div class="row g-3"> <div class="col-md-6"> <label for="firstName" class="form-label">الاسم الأول</label> <input type="text" class="form-control" id="firstName"> </div> <div class="col-md-6"> <label for="lastName" class="form-label">الاسم الأخير</label> <input type="text" class="form-control" id="lastName"> </div> <div class="col-12"> <label for="email" class="form-label">البريد الإلكتروني</label> <input type="email" class="form-control" id="email"> </div> <div class="col-md-8"> <label for="address" class="form-label">العنوان</label> <input type="text" class="form-control" id="address"> </div> <div class="col-md-4"> <label for="zip" class="form-label">الرمز البريدي</label> <input type="text" class="form-control" id="zip"> </div> <div class="col-12"> <button type="submit" class="btn btn-primary">إرسال</button> </div> </div> </form>

<!-- مثال 1: صفحة منتج التجارة الإلكترونية --> <div class="container"> <div class="row g-4"> <!-- صور المنتج: عرض كامل على الهاتف، 60% على سطح المكتب --> <div class="col-12 col-lg-7"> <img src="product.jpg" class="img-fluid" alt="المنتج"> <!-- معرض المصغرات --> <div class="row row-cols-4 g-2 mt-2"> <div class="col"><img src="thumb1.jpg" class="img-fluid" alt="مصغرة"></div> <div class="col"><img src="thumb2.jpg" class="img-fluid" alt="مصغرة"></div> <div class="col"><img src="thumb3.jpg" class="img-fluid" alt="مصغرة"></div> <div class="col"><img src="thumb4.jpg" class="img-fluid" alt="مصغرة"></div> </div> </div> <!-- تفاصيل المنتج: عرض كامل على الهاتف، 40% على سطح المكتب --> <div class="col-12 col-lg-5"> <h1 class="h3">اسم المنتج</h1> <p class="text-muted">SKU: 12345</p> <h2 class="h4 text-primary">$99.99</h2> <p>وصف المنتج هنا...</p> <!-- الخيارات --> <div class="mb-3"> <label class="form-label">المقاس</label> <select class="form-select"> <option>صغير</option> <option>متوسط</option> <option>كبير</option> </select> </div> <!-- الأزرار: تكديس على الهاتف، جنبًا إلى جنب على الجهاز اللوحي+ --> <div class="row g-2"> <div class="col-12 col-sm-6"> <button class="btn btn-primary w-100">أضف إلى السلة</button> </div> <div class="col-12 col-sm-6"> <button class="btn btn-outline-secondary w-100">قائمة الرغبات</button> </div> </div> </div> </div> </div>

<!-- أدوات z-index في Bootstrap --> <div class="position-relative"> <div class="position-absolute top-0 start-0 w-100 h-100 bg-primary opacity-25"> طبقة الخلفية (z-index افتراضي) </div> <div class="position-absolute top-50 start-50 translate-middle z-1"> الطبقة الوسطى (z-index: 1) </div> <div class="position-absolute bottom-0 end-0 z-2"> الطبقة العليا (z-index: 2) </div> <div class="position-absolute top-0 end-0 z-3"> الطبقة الأعلى (z-index: 3) </div> </div> <!-- عملي: تراكب مشروط --> <div class="position-fixed top-0 start-0 w-100 h-100 bg-dark bg-opacity-50 z-2"> <!-- خلفية التراكب --> </div> <div class="position-fixed top-50 start-50 translate-middle z-3 bg-white p-4 rounded"> <!-- محتوى مشروط فوق التراكب --> <h3>عنوان المشروط</h3> <p>محتوى المشروط</p> </div>

<!-- أفضل ممارسة 1: HTML دلالي --> <!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> <!-- استخدم العلامات الدلالية --> <header> <nav class="navbar navbar-expand-lg">...</nav> </header> <main> <section class="hero">...</section> <section class="features">...</section> <article class="blog-post">...</article> </main> <aside class="sidebar">...</aside> <footer>...</footer> </body> </html>