زمین بازی Bootstrap Flex

درباره زمین بازی Bootstrap Flex

زمین‌بازی Bootstrap Flex به شما اجازه می‌دهد به‌جای CSS خام، چیدمان‌های فلکس‌باکس را با کلاس‌های واقعی یوتیلیتی Bootstrap 5.3 بسازید. کانتینر را — جهت، شکستن خط، justify-content، align-items، فاصله — با کنترل‌های قطعه‌بندی‌شده پیکربندی کنید، روی هر آیتم کلیک کنید تا align-self، order، grow و shrink خودش را تنظیم کنید، و ببینید پیش‌نمایش زنده فوراً دوباره مرتب می‌شود.

کلید بریک‌پوینت است که آن را از یک اسباب‌بازی فراتر می‌برد: sm، md، lg، xl یا xxl را انتخاب کنید و کلاس‌هایی که از آن نقطه تنظیم می‌کنید پیشوند واکنش‌گرا می‌گیرند — justify-content-md-between، flex-lg-row — دقیقاً همان‌طور که سیستم موبایل‌محور Bootstrap آن‌ها را از آن بریک‌پوینت به بالا اعمال می‌کند. تا ۱۲ آیتم اضافه کنید تا یک کامپوننت واقعی را شبیه‌سازی کنید.

وقتی چیدمان درست به نظر رسید، HTML تولیدشده یا فقط کلاس‌های کانتینر را کپی کرده و مستقیماً در پروژهٔ خود جای‌گذاری کنید. همه‌چیز در مرورگر شما اجرا می‌شود و چیزی آپلود نمی‌شود.

نحوه استفاده از زمین بازی Bootstrap Flex

1. یوتیلیتی‌های کانتینر — جهت، wrap، justify-content، align-items و فاصله — را با کنترل‌های قطعه‌بندی‌شده تنظیم کنید.
2. آیتم‌ها را اضافه یا حذف کنید (۲ تا ۱۲) تا با کامپوننت واقعی شما مطابقت داشته باشد.
3. روی یک آیتم کلیک کنید تا به آن align-self، order یا یوتیلیتی‌های اندازه‌گیری فلکس خودش را بدهید.
4. بریک‌پوینت‌ها را عوض کنید تا نسخه‌های واکنش‌گرا را که از sm، md، lg، xl یا xxl به بالا اعمال می‌شوند اضافه کنید.
5. پیش‌نمایش زنده را بررسی کنید، سپس HTML تولیدشده یا کلاس‌های کانتینر را کپی کنید.

سوالات متداول