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

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

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

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

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

<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.