أدوات الموضع والحجم

<!-- فئات الموضع --> <div class="position-static"> الموضع الثابت (افتراضي، تدفق المستند العادي) </div> <div class="position-relative"> الموضع النسبي (موضعه نسبة إلى الموضع العادي) <div class="position-absolute top-0 start-0"> عنصر فرعي مطلق (موضعه نسبة إلى هذا الوالد) </div> </div> <div class="position-absolute top-50 start-50"> الموضع المطلق (نسبة إلى أقرب سلف موضعه) </div> <div class="position-fixed bottom-0 end-0"> الموضع الثابت (نسبة إلى نافذة العرض) </div> <div class="position-sticky top-0"> الموضع اللاصق (يتبدل بين النسبي والثابت) </div> <!-- الموضع المتجاوب --> <div class="position-relative position-md-absolute"> نسبي على الموبايل، مطلق على الديسكتوب </div>

<!-- الموضع الحافة --> <div class="position-relative" style="height: 200px; background: #f8f9fa;"> <div class="position-absolute top-0 start-0">أعلى يسار</div> <div class="position-absolute top-0 end-0">أعلى يمين</div> <div class="position-absolute bottom-0 start-0">أسفل يسار</div> <div class="position-absolute bottom-0 end-0">أسفل يمين</div> </div> <!-- الموضع المركزي --> <div class="position-relative" style="height: 200px;"> <div class="position-absolute top-50 start-50"> 50% من الأعلى واليسار (ليس في المنتصف) </div> </div> <div class="position-relative" style="height: 200px;"> <div class="position-absolute top-50 start-50 translate-middle"> في المنتصف تماماً </div> </div> <!-- أدوات الترجمة --> <div class="position-absolute top-0 start-50 translate-middle-x"> في المنتصف أفقياً فقط </div> <div class="position-absolute top-50 start-0 translate-middle-y"> في المنتصف عمودياً فقط </div> <!-- الموضع الحافة 100% --> <div class="position-absolute top-0 start-0 end-0"> عرض كامل في الأعلى </div> <div class="position-absolute top-0 bottom-0 start-0"> ارتفاع كامل على الجانب الأيسر </div> <div class="position-absolute top-0 start-0 bottom-0 end-0"> تغطية كاملة (جميع الحواف) </div>

<!-- العرض بالنسبة المئوية --> <div class="w-25">عرض 25%</div> <div class="w-50">عرض 50%</div> <div class="w-75">عرض 75%</div> <div class="w-100">عرض 100%</div> <div class="w-auto">عرض تلقائي (عرض طبيعي)</div> <!-- الحد الأقصى للعرض --> <div class="mw-100">حد أقصى للعرض 100%</div> <!-- عرض نافذة العرض --> <div class="vw-100"> 100% من عرض نافذة العرض (قد يتجاوز الحاوية) </div> <!-- الحد الأدنى لعرض نافذة العرض --> <div class="min-vw-100"> حد أدنى 100% من عرض نافذة العرض </div> <!-- مثال عملي: حاوية صورة --> <div class="w-75 mx-auto"> <img src="image.jpg" class="w-100" alt="صورة متجاوبة"> </div> <!-- العرض المتجاوب --> <div class="w-100 w-md-75 w-lg-50"> 100% على الموبايل، 75% على التابلت، 50% على الديسكتوب </div>

<!-- الارتفاع بالنسبة المئوية --> <div style="height: 400px; background: #f8f9fa;"> <div class="h-25 bg-primary">ارتفاع 25%</div> <div class="h-50 bg-success">ارتفاع 50%</div> <div class="h-75 bg-warning">ارتفاع 75%</div> </div> <div class="h-100">ارتفاع 100% (من الوالد)</div> <div class="h-auto">ارتفاع تلقائي (ارتفاع طبيعي)</div> <!-- الحد الأقصى للارتفاع --> <div class="mh-100">حد أقصى للارتفاع 100%</div> <!-- ارتفاع نافذة العرض --> <div class="vh-100"> 100% من ارتفاع نافذة العرض (شاشة كاملة) </div> <div class="min-vh-100"> حد أدنى 100% من ارتفاع نافذة العرض </div> <!-- حالات الاستخدام الشائعة --> <!-- قسم البطل بشاشة كاملة --> <section class="vh-100 d-flex align-items-center justify-content-center"> <div class="text-center"> <h1>مرحباً</h1> </div> </section> <!-- تخطيط الشريط الجانبي --> <div class="d-flex"> <aside class="vh-100" style="width: 250px;">الشريط الجانبي</aside> <main class="flex-fill">المحتوى الرئيسي</main> </div>

<!-- عناصر مربعة --> <div class="w-25" style="aspect-ratio: 1/1;"> مربع (باستخدام نسبة العرض إلى الارتفاع CSS) </div> <!-- صندوق بنسبة عرض إلى ارتفاع ثابتة --> <div class="position-relative w-100" style="padding-bottom: 56.25%;"> <div class="position-absolute top-0 start-0 w-100 h-100"> حاوية بنسبة 16:9 </div> </div> <!-- بطاقة بارتفاع ثابت --> <div class="card w-100" style="height: 300px;"> <div class="card-body d-flex flex-column"> <h5 class="card-title">عنوان البطاقة</h5> <p class="card-text flex-grow-1">المحتوى</p> <button class="btn btn-primary mt-auto">إجراء</button> </div> </div> <!-- خلفية نموذج بشاشة كاملة --> <div class="position-fixed top-0 start-0 w-100 h-100 bg-dark bg-opacity-50"> خلفية النموذج </div>

<!-- الفيضان التلقائي (يظهر شريط التمرير عند الحاجة) --> <div class="overflow-auto" style="max-height: 200px;"> محتوى طويل سيتم التمرير فيه... </div> <!-- الفيضان المخفي (يقص المحتوى) --> <div class="overflow-hidden" style="height: 100px;"> المحتوى مقصوص، بدون شريط تمرير </div> <!-- الفيضان المرئي (افتراضي، يمكن أن يفيض المحتوى) --> <div class="overflow-visible"> المحتوى يمكن أن يمتد خارج الحدود </div> <!-- الفيضان التمرير (يظهر شريط التمرير دائماً) --> <div class="overflow-scroll" style="height: 200px;"> يحتوي دائماً على شريط تمرير </div> <!-- التحكم في محور X و Y --> <div class="overflow-x-auto overflow-y-hidden"> تمرير أفقي، مقصوص عمودياً </div> <div class="overflow-x-hidden overflow-y-auto"> مقصوص أفقياً، تمرير عمودياً </div> <!-- مثال فيضان النص --> <div class="overflow-hidden text-nowrap text-truncate" style="max-width: 200px;"> نص طويل جداً سيتم اقتصاصه بنقاط حذف </div> <!-- جدول قابل للتمرير --> <div class="overflow-auto"> <table class="table"> <!-- محتوى جدول عريض --> </table> </div>

<!-- شارة إشعار --> <div class="position-relative d-inline-block"> <button class="btn btn-primary"> الإشعارات </button> <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger"> 99+ </span> </div> <!-- نص تراكب الصورة --> <div class="position-relative"> <img src="image.jpg" class="w-100" alt="الخلفية"> <div class="position-absolute bottom-0 start-0 w-100 p-3 bg-dark bg-opacity-75 text-white"> <h3>عنوان الصورة</h3> <p>نص الوصف</p> </div> </div> <!-- زر ثابت في الأسفل --> <button class="btn btn-primary position-fixed bottom-0 end-0 m-3"> التمرير للأعلى </button> <!-- رأس لاصق --> <header class="position-sticky top-0 bg-white shadow-sm" style="z-index: 1000;"> <nav class="container"> محتوى التنقل </nav> </header> <!-- بطاقة مع شارة في الزاوية --> <div class="card position-relative"> <span class="position-absolute top-0 end-0 badge bg-success m-2"> جديد </span> <img src="product.jpg" class="card-img-top" alt="المنتج"> <div class="card-body"> <h5 class="card-title">اسم المنتج</h5> </div> </div> <!-- تراكب التحميل --> <div class="position-relative"> <div class="content">المحتوى الرئيسي</div> <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center bg-white bg-opacity-75"> <div class="spinner-border" role="status"> <span class="visually-hidden">جاري التحميل...</span> </div> </div> </div> <!-- تخطيط شاشة منقسمة --> <div class="vh-100 d-flex"> <div class="w-50 bg-primary text-white d-flex align-items-center justify-content-center"> <h1>الجانب الأيسر</h1> </div> <div class="w-50 d-flex align-items-center justify-content-center"> <h1>الجانب الأيمن</h1> </div> </div>

<!-- فئات Z-Index --> <div class="position-relative"> <div class="position-absolute z-n1">خلف (z-index: -1)</div> <div class="position-absolute z-0">الأساس (z-index: 0)</div> <div class="position-absolute z-1">المستوى 1 (z-index: 1)</div> <div class="position-absolute z-2">المستوى 2 (z-index: 2)</div> <div class="position-absolute z-3">المستوى 3 (z-index: 3)</div> </div> <!-- القائمة المنسدلة مع Z-Index مناسب --> <div class="position-relative"> <button class="btn btn-primary">افتح القائمة</button> <div class="position-absolute top-100 start-0 z-3 bg-white shadow"> محتوى القائمة المنسدلة (يظهر فوق العناصر الأخرى) </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"> النموذج (فوق الخلفية) </div>