Bootstrap 4 در مقابل Bootstrap 5
Bootstrap 4 برای برخی کامپوننتها (مثل Modal و Dropdown) به jQuery وابسته است و از کلاسهای sr-only و مقادیر Sass قدیمیتری استفاده میکند، در حالی که Bootstrap 5 کاملاً وابستگی به jQuery را حذف کرده، از جاوااسکریپت خالص استفاده میکند و کلاسهای Utility API قدرتمندتری برای سفارشیسازی دارد.
| ویژگی | Bootstrap 4 | Bootstrap 5 |
|---|---|---|
| وابستگی به jQuery | دارد | ندارد |
| پیشوند دیتا-اتریبیوت | data-toggle | data-bs-toggle |
| حجم باندل | بیشتر | کمتر |
کِی از Bootstrap 4 استفاده کنیم؟
وقتی روی یک پروژه قدیمی کار میکنید که از قبل با jQuery و Bootstrap 4 نوشته شده و مهاجرت هزینهبر است.
کِی از Bootstrap 5 استفاده کنیم؟
برای هر پروژه جدید؛ حذف وابستگی jQuery باعث سبکتر شدن باندل نهایی و سازگاری بهتر با فریمورکهای مدرن مثل React یا Vue میشود.
مثال Bootstrap 4
<!-- Bootstrap 4: نیاز به jQuery برای Modal -->
<script src="jquery.js"></script>
<script src="bootstrap.bundle.js"></script>
<div class="modal" data-toggle="modal">...</div>
مثال Bootstrap 5
<!-- Bootstrap 5: بدون jQuery -->
<script src="bootstrap.bundle.min.js"></script>
<div class="modal" data-bs-toggle="modal">...</div>
اشتباه رایج
اشتباه رایج فراموش کردن تغییر پیشوند data-toggle به data-bs-toggle هنگام ارتقا از نسخه ۴ به ۵ است؛ این تغییر نامگذاری باعث میشود کامپوننتهای تعاملی مثل Modal و Dropdown بهخاموشی از کار بیفتند بدون هیچ خطای واضحی.
جمعبندی
برای پروژههای قدیمی وابسته به jQuery فعلاً Bootstrap 4 قابل قبول است، اما برای پروژههای جدید همیشه Bootstrap 5 (یا نسخه جدیدتر) را انتخاب کنید.