أدوات الشبكة والتخصيص

<!-- أحجام الفراغات القياسية --> <div class="row g-0"> <!-- 0rem / 0px --> <div class="col">بدون فراغ</div> </div> <div class="row g-1"> <!-- 0.25rem / 4px --> <div class="col">فراغ صغير جدًا</div> </div> <div class="row g-2"> <!-- 0.5rem / 8px --> <div class="col">فراغ صغير</div> </div> <div class="row g-3"> <!-- 1rem / 16px --> <div class="col">فراغ افتراضي</div> </div> <div class="row g-4"> <!-- 1.5rem / 24px --> <div class="col">فراغ متوسط</div> </div> <div class="row g-5"> <!-- 3rem / 48px --> <div class="col">فراغ كبير</div> </div> <!-- فراغات اتجاهية --> <div class="row gx-5"> <!-- أفقي فقط --> <div class="col-6">تباعد أفقي واسع</div> <div class="col-6">تباعد أفقي واسع</div> </div> <div class="row gy-5"> <!-- عمودي فقط --> <div class="col-12">تباعد عمودي طويل</div> <div class="col-12">تباعد عمودي طويل</div> </div> <!-- فراغات متجاوبة --> <div class="row g-2 g-sm-3 g-md-4 g-lg-5"> <div class="col-6">الفراغات تنمو مع حجم الشاشة</div> <div class="col-6">الفراغات تنمو مع حجم الشاشة</div> </div> <!-- فراغات اتجاهية مختلطة --> <div class="row gx-3 gy-4"> <div class="col-6">فراغات أفقية وعمودية مختلفة</div> <div class="col-6">فراغات أفقية وعمودية مختلفة</div> </div>

<!-- row-cols الأساسية: جميع الأطفال بعرض متساوٍ --> <div class="row row-cols-1"> <div class="col">عرض كامل (1 في كل صف)</div> <div class="col">عرض كامل (1 في كل صف)</div> </div> <div class="row row-cols-2"> <div class="col">عرض 50% (2 في كل صف)</div> <div class="col">عرض 50% (2 في كل صف)</div> <div class="col">عرض 50% (2 في كل صف)</div> <div class="col">عرض 50% (2 في كل صف)</div> </div> <div class="row row-cols-3"> <div class="col">عرض 33.33% (3 في كل صف)</div> <div class="col">عرض 33.33% (3 في كل صف)</div> <div class="col">عرض 33.33% (3 في كل صف)</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 على الهاتف، 2 على sm، 3 على md، 4 على lg</div> <div class="col">1 على الهاتف، 2 على sm، 3 على md، 4 على lg</div> <div class="col">1 على الهاتف، 2 على sm، 3 على md، 4 على lg</div> <div class="col">1 على الهاتف، 2 على sm، 3 على md، 4 على lg</div> <div class="col">1 على الهاتف، 2 على sm، 3 على md، 4 على lg</div> <div class="col">1 على الهاتف، 2 على sm، 3 على md، 4 على lg</div> </div> <!-- دمج row-cols مع عرض أعمدة محددة --> <div class="row row-cols-3"> <div class="col">33.33%</div> <div class="col-6">50% (يتجاوز row-cols)</div> <div class="col">يلتف إلى الصف التالي</div> </div> <!-- مثال عملي: شبكة منتجات --> <div class="row row-cols-2 row-cols-lg-4 g-3"> <div class="col"> <div class="card"> <img src="product1.jpg" class="card-img-top" alt="المنتج 1"> <div class="card-body"> <h5 class="card-title">المنتج 1</h5> </div> </div> </div> <div class="col"> <div class="card"> <img src="product2.jpg" class="card-img-top" alt="المنتج 2"> <div class="card-body"> <h5 class="card-title">المنتج 2</h5> </div> </div> </div> <!-- المزيد من المنتجات... --> </div>

<!-- إخفاء/إظهار الأعمدة في نقاط توقف مختلفة --> <div class="row"> <div class="col-12 col-md-6">مرئي دائمًا</div> <div class="col-12 col-md-6 d-none d-md-block"> مخفي على الهاتف، مرئي على md وما فوق </div> </div> <!-- عرض محتوى مختلف في أحجام مختلفة --> <div class="row"> <div class="col d-md-none"> <!-- التنقل على الهاتف --> <button class="btn btn-primary">☰ القائمة</button> </div> <div class="col d-none d-md-block"> <!-- التنقل على سطح المكتب --> <nav>الرئيسية | عن | اتصل</nav> </div> </div> <!-- أدوات Flexbox مع الشبكة --> <div class="row"> <div class="col d-flex align-items-center justify-content-center"> <div>محتوى متوسط تمامًا</div> </div> </div> <!-- أدوات اتجاه Flex --> <div class="row"> <div class="col d-flex flex-column"> <div>العنصر 1</div> <div class="mt-auto">العنصر 2 (مدفوع للأسفل)</div> </div> </div> <!-- بطاقات متساوية الارتفاع باستخدام flex --> <div class="row row-cols-1 row-cols-md-3 g-4"> <div class="col d-flex"> <div class="card w-100"> <div class="card-body d-flex flex-column"> <h5 class="card-title">البطاقة 1</h5> <p class="card-text">محتوى قصير</p> <a href="#" class="btn btn-primary mt-auto">زر</a> </div> </div> </div> <div class="col d-flex"> <div class="card w-100"> <div class="card-body d-flex flex-column"> <h5 class="card-title">البطاقة 2</h5> <p class="card-text">محتوى أطول بكثير يجعل هذه البطاقة أطول من الأخرى في الصف</p> <a href="#" class="btn btn-primary mt-auto">زر</a> </div> </div> </div> <div class="col d-flex"> <div class="card w-100"> <div class="card-body d-flex flex-column"> <h5 class="card-title">البطاقة 3</h5> <p class="card-text">محتوى متوسط</p> <a href="#" class="btn btn-primary mt-auto">زر</a> </div> </div> </div> </div>

<!-- أدوات المحاذاة --> <div class="row align-items-start">محاذاة للأعلى</div> <div class="row align-items-center">محاذاة للمركز</div> <div class="row align-items-end">محاذاة للأسفل</div> <!-- المحاذاة الذاتية --> <div class="row" style="height: 200px;"> <div class="col align-self-start">أعلى</div> <div class="col align-self-center">وسط</div> <div class="col align-self-end">أسفل</div> </div> <!-- تبرير المحتوى --> <div class="row justify-content-start">...</div> <div class="row justify-content-center">...</div> <div class="row justify-content-end">...</div> <div class="row justify-content-between">...</div> <div class="row justify-content-around">...</div> <div class="row justify-content-evenly">...</div> <!-- التفاف Flex --> <div class="row flex-wrap">...</div> <div class="row flex-nowrap">...</div> <div class="row flex-wrap-reverse">...</div> <!-- اتجاه Flex --> <div class="row flex-row">...</div> <div class="row flex-row-reverse">...</div> <div class="row flex-column">...</div> <div class="row flex-column-reverse">...</div> <!-- Flex fill وgrow --> <div class="row"> <div class="col flex-fill">Flex fill</div> <div class="col flex-grow-1">Flex grow</div> <div class="col flex-shrink-1">Flex shrink</div> </div> <!-- عملي: تخطيط تذييل ثابت --> <div class="container d-flex flex-column" style="min-height: 100vh;"> <div class="row"> <div class="col">الرأس</div> </div> <div class="row flex-grow-1"> <div class="col">المحتوى الرئيسي يتوسع</div> </div> <div class="row"> <div class="col">التذييل دائمًا في الأسفل</div> </div> </div>

<!-- أدوات الهامش --> <div class="row"> <div class="col mb-3">هامش سفلي</div> <div class="col mt-3">هامش علوي</div> <div class="col mx-3">هامش أفقي</div> <div class="col my-3">هامش عمودي</div> </div> <!-- أدوات الحشوة --> <div class="row"> <div class="col p-3">حشوة من جميع الجوانب</div> <div class="col px-4">حشوة أفقية</div> <div class="col py-4">حشوة عمودية</div> </div> <!-- إزالة الهوامش السالبة من الصف --> <div class="row g-0 mx-0"> <div class="col">بدون هوامش سالبة</div> </div> <!-- هوامش تلقائية للوضع --> <div class="row"> <div class="col-6 ms-auto">مدفوع لليمين</div> </div> <div class="row"> <div class="col-6 mx-auto">متوسط</div> </div> <!-- تباعد متجاوب --> <div class="row"> <div class="col mb-3 mb-md-4 mb-lg-5"> هامش سفلي متجاوب </div> </div> <!-- مقياس التباعد: 0-5 --> <!-- 0 = 0، 1 = 0.25rem، 2 = 0.5rem، 3 = 1rem، 4 = 1.5rem، 5 = 3rem -->

<!-- الطريقة 1: إضافة حدود مؤقتة --> <style> .debug .row { border: 2px solid red; margin-bottom: 10px; } .debug .col, .debug [class*="col-"] { border: 1px solid blue; background-color: rgba(0, 123, 255, 0.1); padding-top: 10px; padding-bottom: 10px; } </style> <div class="container debug"> <div class="row"> <div class="col-4">العمود 1</div> <div class="col-4">العمود 2</div> <div class="col-4">العمود 3</div> </div> </div> <!-- الطريقة 2: استخدام ألوان الخلفية --> <div class="row"> <div class="col bg-primary bg-opacity-25">العمود 1</div> <div class="col bg-success bg-opacity-25">العمود 2</div> <div class="col bg-warning bg-opacity-25">العمود 3</div> </div> <!-- الطريقة 3: إضافة min-height لرؤية المحاذاة --> <div class="row"> <div class="col border" style="min-height: 100px;">العمود 1</div> <div class="col border" style="min-height: 100px;">العمود 2</div> </div> <!-- الطريقة 4: استخدام أدوات المطور في المتصفح --> <!-- 1. افتح DevTools (F12) 2. حدد العنصر 3. في لوحة Styles، ابحث عن فئات .row أو .col 4. اطلع على الحشوة والهوامش والعرض المحسوبة 5. استخدم لوحة Elements لتشغيل/إيقاف الفئات -->