ساحة تجربة Bootstrap Flex
صمّم تخطيطات flex في Bootstrap 5.3 بصريًا وانسخ فئات الأدوات الدقيقة — d-flex وjustify-content وalign-items وorder وgrow والمزيد.
—
كل شيء يعمل داخل متصفحك — لا يتم رفع أي شيء.
تُطبَّق الفئات التي تحددها بدءًا من نقطة التوقف هذه وما فوقها. بدّل نقاط التوقف لبناء تخطيطات متجاوبة.
حول ساحة تجربة Bootstrap Flex
ملعب Bootstrap Flex يتيح لك بناء تخطيطات flexbox باستخدام فئات مساعدة حقيقية من Bootstrap 5.3 بدلاً من CSS الخام. اضبط الحاوية — الاتجاه، الالتفاف، justify-content، align-items، gap — باستخدام عناصر تحكم مجزَّأة، وانقر أي عنصر لضبط align-self وorder وgrow وshrink الخاصة به، وشاهد المعاينة الحية تُعيد الترتيب فوراً.
مفتاح نقاط التوقف هو ما يجعلها أكثر من مجرد لعبة: اختر sm أو md أو lg أو xl أو xxl، وستكتسب الفئات التي تضبطها من تلك النقطة بادئة الاستجابة — justify-content-md-between، flex-lg-row — تماماً كما يطبّقها نظام Bootstrap المبني أولاً للجوال من تلك النقطة فما فوق. أضف حتى 12 عنصراً لمحاكاة مكوّن واقعي.
عندما يبدو التخطيط صحيحاً، انسخ HTML المُولَّد أو فئات الحاوية فقط والصقها مباشرة في مشروعك. كل شيء يعمل في متصفحك ولا شيء يُرفع.
كيفية استخدام ساحة تجربة Bootstrap Flex
- اضبط فئات الحاوية المساعدة — الاتجاه، الالتفاف، justify-content، align-items وgap — باستخدام عناصر التحكم المجزَّأة.
- أضف أو أزل عناصر (2 إلى 12) لمطابقة مكوّنك الفعلي.
- انقر عنصراً لمنحه فئات align-self أو order أو تحجيم flex الخاصة به.
- بدّل نقاط التوقف لإضافة أنماط استجابة تُطبَّق من sm أو md أو lg أو xl أو xxl فما فوق.
- تحقق من المعاينة الحية، ثم انسخ HTML المُولَّد أو فئات الحاوية.