الفرق بين المراجعتين ل"Bootstrap/position"
(أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:تموضع العناصر في إطار العمل Bootstrap}}</noinclude>') |
(إضافة محتوى الصفحة) |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:تموضع العناصر في إطار العمل Bootstrap}}</noinclude> | <noinclude>{{DISPLAYTITLE:تموضع العناصر في إطار العمل Bootstrap}}</noinclude> | ||
| + | استخدم هذه الأدوات المختصرة للضبط السريع لموضع العناصر. | ||
| + | |||
| + | == القيّم المشتركة == | ||
| + | تتوفّر أصناف لتموضع العناصر بسرعة، إلّا أنّها ليست متجاوبة.<syntaxhighlight lang="html"> | ||
| + | <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> | ||
| + | </syntaxhighlight> | ||
| + | |||
| + | == جزء علويّ ثابت == | ||
| + | ضع عنصُرًا في أعلى إطار العرض، من الحافّة إلى الحافّة. تأكّد من فهم تبعات الوضعيّة الثابتة على مشروعك، فقد تحتاج إلى أنماط CSS إضافيّة.<syntaxhighlight lang="html"> | ||
| + | <div class="fixed-top">...</div> | ||
| + | </syntaxhighlight> | ||
| + | |||
| + | == جزء سفليّ ثابت == | ||
| + | ضع عنصُرًا في أسفل إطار العرض، من الحافّة إلى الحافّة. تأكّد من فهم تبعات الوضعيّة الثابتة على مشروعك، فقد تحتاج إلى أنماط CSS إضافيّة.<syntaxhighlight lang="html"> | ||
| + | <div class="fixed-bottom">...</div> | ||
| + | </syntaxhighlight> | ||
| + | |||
| + | == جزء علويّ لاصق == | ||
| + | ضع عنصُرًا في أعلى إطار العرض، من الحافّة إلى الحافّة، لكن فقط بدءًا من اللحظة التي يتجاوزه فيها شريط التمرير. يستخدم الصنف <code>.sticky-top</code> خاصيّة <code>position: sticky</code> في CSS؛ التي لا تُدعَم تمامًا في جميع المتصفّحات. | ||
| + | |||
| + | '''يعرض الإصداران 10 و11 من Internet Explorer الخاصيّة <code>position: sticky</code> على أنّها <code>position: relative</code>'''. لهذا السبب تُغلَّف الأنماط بالاستعلام <code>@supports</code>، لقصر الالتصاق على المتصفّحات التي تعرض الخاصيّة بطريقة صحيحة فقط.<syntaxhighlight lang="html"> | ||
| + | <div class="sticky-top">...</div> | ||
| + | </syntaxhighlight> | ||
| + | |||
| + | == مصادر == | ||
| + | [https://getbootstrap.com/docs/4.0/utilities/position/ صفحة Position في توثيق Bootstrap]. | ||
| + | [[تصنيف:Bootstrap]] | ||
| + | [[تصنيف:Bootstrap utilities]] | ||
مراجعة 12:55، 14 أبريل 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>
جزء علويّ ثابت
ضع عنصُرًا في أعلى إطار العرض، من الحافّة إلى الحافّة. تأكّد من فهم تبعات الوضعيّة الثابتة على مشروعك، فقد تحتاج إلى أنماط CSS إضافيّة.
<div class="fixed-top">...</div>
جزء سفليّ ثابت
ضع عنصُرًا في أسفل إطار العرض، من الحافّة إلى الحافّة. تأكّد من فهم تبعات الوضعيّة الثابتة على مشروعك، فقد تحتاج إلى أنماط CSS إضافيّة.
<div class="fixed-bottom">...</div>
جزء علويّ لاصق
ضع عنصُرًا في أعلى إطار العرض، من الحافّة إلى الحافّة، لكن فقط بدءًا من اللحظة التي يتجاوزه فيها شريط التمرير. يستخدم الصنف .sticky-top خاصيّة position: sticky في CSS؛ التي لا تُدعَم تمامًا في جميع المتصفّحات.
يعرض الإصداران 10 و11 من Internet Explorer الخاصيّة position: sticky على أنّها position: relative. لهذا السبب تُغلَّف الأنماط بالاستعلام @supports، لقصر الالتصاق على المتصفّحات التي تعرض الخاصيّة بطريقة صحيحة فقط.
<div class="sticky-top">...</div>