زمین بازی شبکهٔ Bootstrap
چیدمانهای واکنشگرا را با شبکهٔ Bootstrap 5.3 بهصورت بصری بسازید و کلاسهای دقیق را کپی کنید — row، col، آفستها، ترتیب، فاصلهها و چینش.
—
همهچیز در مرورگر شما اجرا میشود — چیزی آپلود نمیشود.
کلاسهایی که تنظیم میکنید از این نقطهٔ شکست به بالا اعمال میشوند. برای ساخت چیدمانهای واکنشگرا نقاط شکست را تغییر دهید.
درباره زمین بازی شبکهٔ Bootstrap
زمینبازی Bootstrap Grid چیدمانهای واکنشگرای ردیف-و-ستون را با سیستم شبکهٔ واقعی Bootstrap 5.3 میسازد. تا ۱۲ ستون به یک ردیف اضافه کنید، روی هر ستون کلیک کنید تا عرض، آفست و ترتیب آن را تنظیم کنید، و شیارها و تراز را روی ردیف تنظیم کنید — پیشنمایش و مارکآپ تولیدشده با هر تغییر زنده بهروزرسانی میشوند.
چون شبکههای Bootstrap موبایلمحور هستند، سوییچر بریکپوینت محوری است: یک ستون را در پایه col-6 و در md برابر col-md-4 تنظیم کنید و بدون نوشتن یک خط کد، الگوی کلاسیک رویهم-روی-موبایل، سهتایی-روی-دسکتاپ را ساختهاید. آفستها، ترتیب و کلاسهای شیار همگی همان پیشوندهای واکنشگرا را میگیرند.
خروجی HTML تمیز و کپی-پیست است — یک div ردیف با فرزندان ستونش و دقیقاً کلاسهایی که پیکربندی کردهاید. کل قطعه را یا فقط کلاسهای ردیف را کپی کنید؛ همهچیز بهصورت محلی در مرورگر شما اجرا میشود.
نحوه استفاده از زمین بازی شبکهٔ Bootstrap
- ستونها را به ردیف اضافه کنید — تا ۱۲ ستون — و روی یکی کلیک کنید تا انتخاب شود.
- دهانه، آفست و ترتیب ستون انتخابشده را برای بریکپوینت فعلی تنظیم کنید.
- بریکپوینتها را (از sm تا xxl) عوض کنید تا مشخص کنید چیدمان روی صفحات بزرگتر چگونه دوباره جریان مییابد.
- شیارهای ردیف و یوتیلیتیهای ترازش را تنظیم کنید.
- پیشنمایش زنده را بررسی کنید، سپس HTML تولیدشده یا کلاسهای ردیف را کپی کنید.