تموضع العناصر في إطار العمل Bootstrap

استخدم هذه الأدوات المختصرة للضبط السريع لموضع العناصر.

القيّم المشتركة

تتوفّر أصناف لتموضع العناصر بسرعة، إلّا أنّها ليست متجاوبة.

<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>

جزء علوي ثابت (fixed)

ضع عنصُرًا في أعلى إطار العرض، من الحافّة إلى الحافّة. تأكّد من فهم تبعات الوضعيّة الثابتة على مشروعك، فقد تحتاج إلى أنماط CSS إضافيّة.

<div class="fixed-top">...</div>

جزء سفلي ثابت (fixed)

ضع عنصُرًا في أسفل إطار العرض، من الحافّة إلى الحافّة. تأكّد من فهم تبعات الوضعيّة الثابتة على مشروعك، فقد تحتاج إلى أنماط CSS إضافيّة.

<div class="fixed-bottom">...</div>

جزء علوي لاصق (sticky)

ضع عنصُرًا في أعلى إطار العرض، من الحافّة إلى الحافّة، لكن فقط بدءًا من اللحظة التي يتجاوزه فيها شريط التمرير. يستخدم الصنف ‎.sticky-top خاصيّة position: sticky في CSS؛ التي لا تُدعَم تمامًا في جميع المتصفّحات.

يعرض الإصداران 10 و11 من Internet Explorer الخاصيّة position: sticky على أنّها position: relative. لهذا السبب تُغلَّف الأنماط بالاستعلام ‎@supports، لقصر الالتصاق على المتصفّحات التي تعرض الخاصيّة بطريقة صحيحة فقط.

<div class="sticky-top">...</div>

مصادر

صفحة Position في توثيق Bootstrap.