محاذاة وترتيب الشبكة

<!-- محاذاة جميع الأعمدة في صف --> <div class="row align-items-start" style="height: 200px;"> <div class="col">محاذاة للأعلى</div> <div class="col">محاذاة للأعلى</div> </div> <div class="row align-items-center" style="height: 200px;"> <div class="col">توسيط عمودي</div> <div class="col">توسيط عمودي</div> </div> <div class="row align-items-end" style="height: 200px;"> <div class="col">محاذاة للأسفل</div> <div class="col">محاذاة للأسفل</div> </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 class="col-4">العمود 1</div> <div class="col-4">العمود 2</div> </div> <!-- محاذاة المركز --> <div class="row justify-content-center"> <div class="col-4">العمود 1</div> <div class="col-4">العمود 2</div> </div> <!-- محاذاة النهاية --> <div class="row justify-content-end"> <div class="col-4">العمود 1</div> <div class="col-4">العمود 2</div> </div> <!-- مساحة حول الأعمدة --> <div class="row justify-content-around"> <div class="col-4">العمود 1</div> <div class="col-4">العمود 2</div> </div> <!-- مساحة بين الأعمدة --> <div class="row justify-content-between"> <div class="col-4">العمود 1</div> <div class="col-4">العمود 2</div> </div> <!-- مساحة موزعة بالتساوي --> <div class="row justify-content-evenly"> <div class="col-4">العمود 1</div> <div class="col-4">العمود 2</div> </div>

<!-- الترتيب الافتراضي --> <div class="row"> <div class="col">الأول في DOM</div> <div class="col">الثاني في DOM</div> <div class="col">الثالث في DOM</div> </div> <!-- ترتيب مخصص --> <div class="row"> <div class="col order-3">الأول في DOM، لكن يظهر أخيرًا</div> <div class="col order-1">الثاني في DOM، لكن يظهر أولاً</div> <div class="col order-2">الثالث في DOM، لكن يظهر ثانيًا</div> </div> <!-- ترتيب متجاوب --> <div class="row"> <div class="col order-2 order-md-1"> ثاني على الهاتف، أول على سطح المكتب </div> <div class="col order-1 order-md-2"> أول على الهاتف، ثاني على سطح المكتب </div> </div> <!-- أدوات الأول والأخير --> <div class="row"> <div class="col order-last">يظهر أخيرًا</div> <div class="col">الوسط</div> <div class="col order-first">يظهر أولاً</div> </div>

<!-- إزاحة أساسية --> <div class="row"> <div class="col-md-4">4 أعمدة</div> <div class="col-md-4 offset-md-4">4 أعمدة مع إزاحة 4 أعمدة</div> </div> <!-- التوسيط بالإزاحة --> <div class="row"> <div class="col-md-6 offset-md-3"> محتوى متوسط من 6 أعمدة </div> </div> <!-- إزاحات متجاوبة --> <div class="row"> <div class="col-md-4 offset-md-2 col-lg-6 offset-lg-0"> إزاحة على الشاشات المتوسطة، بدون إزاحة على الشاشات الكبيرة </div> </div> <!-- إزالة الإزاحة --> <div class="row"> <div class="col-6 offset-3 offset-md-0"> إزاحة على الهاتف، بدون إزاحة على سطح المكتب </div> </div> <!-- بديل الهامش التلقائي --> <div class="row"> <div class="col-md-4 ms-auto">مدفوع لليمين</div> </div> <div class="row"> <div class="col-md-4 mx-auto">متوسط</div> </div>

<!-- بدون فراغات --> <div class="row g-0"> <div class="col-6">بدون فراغ</div> <div class="col-6">بدون فراغ</div> </div> <!-- فراغات قياسية (الافتراضي يعادل g-3) --> <div class="row g-2"> <div class="col-6">فراغ صغير</div> <div class="col-6">فراغ صغير</div> </div> <div class="row g-5"> <div class="col-6">فراغ كبير</div> <div class="col-6">فراغ كبير</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-6">فراغ عمودي فقط</div> <div class="col-6">فراغ عمودي فقط</div> <div class="col-6">فراغ عمودي فقط</div> </div> <!-- فراغات متجاوبة --> <div class="row g-2 g-md-4 g-lg-5"> <div class="col-6">فراغات متجاوبة</div> <div class="col-6">فراغات متجاوبة</div> </div>

<!-- تخطيط البطاقة مع التوسيط المثالي --> <div class="row align-items-center justify-content-center" style="min-height: 400px;"> <div class="col-md-6 col-lg-4"> <div class="card"> <div class="card-body"> <h5 class="card-title">بطاقة متوسطة</h5> <p class="card-text">متوسطة تمامًا أفقيًا وعموديًا.</p> </div> </div> </div> </div> <!-- تخطيط الشريط الجانبي مع الترتيب المتجاوب --> <div class="row g-4"> <div class="col-lg-8 order-2 order-lg-1"> <!-- المحتوى الرئيسي يظهر ثانيًا على الهاتف، أولاً على سطح المكتب --> <h2>المحتوى الرئيسي</h2> <p>محتوى المقالة هنا...</p> </div> <div class="col-lg-4 order-1 order-lg-2"> <!-- الشريط الجانبي يظهر أولاً على الهاتف، ثانيًا على سطح المكتب --> <h3>الشريط الجانبي</h3> <p>روابط التنقل...</p> </div> </div> <!-- صناديق الميزات مع التباعد والمحاذاة --> <div class="row g-4 justify-content-center"> <div class="col-md-4 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 flex-grow-1">الوصف</p> <a href="#" class="btn btn-primary mt-auto">اعرف المزيد</a> </div> </div> </div> <div class="col-md-4 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 flex-grow-1">الوصف</p> <a href="#" class="btn btn-primary mt-auto">اعرف المزيد</a> </div> </div> </div> </div>