الفرق بين المراجعتين لصفحة: «Bootstrap/position»
لا ملخص تعديل |
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}' |
||
| سطر 30: | سطر 30: | ||
== مصادر == | == مصادر == | ||
[https://getbootstrap.com/docs/4.0/utilities/position/ صفحة Position في توثيق Bootstrap]. | [https://getbootstrap.com/docs/4.0/utilities/position/ صفحة Position في توثيق Bootstrap]. | ||
[[تصنيف:Bootstrap]] | [[تصنيف:Bootstrap|{{SUBPAGENAME}}]] | ||
[[تصنيف:Bootstrap utilities]] | [[تصنيف:Bootstrap utilities|{{SUBPAGENAME}}]] | ||
مراجعة 13:10، 7 مايو 2018
استخدم هذه الأدوات المختصرة للضبط السريع لموضع العناصر.
القيّم المشتركة
تتوفّر أصناف لتموضع العناصر بسرعة، إلّا أنّها ليست متجاوبة.
<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>