انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #10 من درس: نظام flexbox الصندوق المرن في BootStrap

BootStrap Order الترتيب في bootstrap

ستتعلم في هذا الدرس التحكم في تقسيم صفحة الويب ومحاذاة العناصر باستخدام نظام fexbox في bootstrap.

1 صفوف تعليمية
Bootstrap
2,881 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

يمكن التحكم في الترتيب التي تظهر به العناصر داخل flexbox عن طريق استخدام كلاس *-order حيث * هي رقم من 0 الى 5 .

جرّب بنفسك

Flex Order

ترتيب العناصر داخل flexbox.

HTML 
<div class="d-flex flex-nowrap bg-secondary py-3 text-white">
   <div class="order-3 p-2 bg-primary">First Item</div>
   <div class="order-2 p-2 bg-primary">Second Item</div>
   <div class="order-1 p-2 bg-primary">Third Item</div>
</div>
جرّب بنفسك

جميع فقرات هذا الدرس (نظام flexbox الصندوق المرن في BootStrap)