تفاوت بوت استرپ 4 و 5 چیست ؟

تفاوت بوت استرپ 4 و 5 در چیست ؟ در این مقاله به بررسی تقاوت های بوت استرپ 4 و 5 میپردازیم و سعی می کنیم به صورت کامل و دقیق این موضوع را پوشش دهیم که بوت استرپ 4 بهتره یا بوت استرپ 5 ؟

اگر بخواهیم به صورت خیلی سطحی به این موضوع نگاه کنیم باید گفت که قطعا بوت استرپ 5 بهتر است و خب قطعا ورژن جدید هر فریمورک یا کتابخانه یا هر چیز دیگری بهتر از ورژن قبلی آن است.

پس بوت استرپ هم در ورژن 5 بهتر از ورژن 4 عمل کرده است و توانسته مشکلات گزارش شده را رفع کند و تجربه بهترین برای توسعه دهندگان وب ایجاد کند.

اما اگر بخواهیم کمی با دقت بیشتری به آپدیت بوت استرپ از ورژن 4 به ورژن 5 نگاه کنیم، شاید حتی از نظر شما در ورژن 4 بهتر باشد و شما از ورژن 5 ان خوشتان نیاید.

بوت استرپ 5 چه تغییراتی نسبت به ورژن 4 دارد؟

تغییرات جی کوئری

تفاوت بوت استرپ 4 و 5

تغییرات در جی کوئری اولین و بزرگترین چیزی است که به چشم می خورد و باعث شده است که تمامی توسعه دهندگان وب در این مورد اظهار نظر کنند.

یکی از ویژگی هایی که در بوت استرپ ورژن 5 به چشم می خورد جی کوئری است که به صورت کامل از پروژه حذف شده است و این یک خبر خوب برای تمامی طراحان سایت است.

همانطور که می دانید جی کوئری حجم نسبتا زیادی دارد و وقتی شما از آن در پروژه خود استفاده می کنید باعث می شود حجم پروژه شما بالا برود و سرعت لود وب سایت شما کاهش پیدا کند.

طراحان و سازندگان بوت استرپ در ورژن 5 به صورت کامل جی کوئری را از بوت استرپ و پروژه حذف کردند و این باعث شد تا سرعت سایت و پروژه بسیار بهتر شود.

سازندگات بوت استرپ توانستند فقط و فقط با حذف جی کوئری از پروژه خود کاربران زیادی رو عاشق بوت استرپ کنند اما چطور؟

بعضی از توسعه دهندگان وب اعتقاد داشتند که بوت استرپ بسیار کند است و ارزش استفاه را ندارد. آنها می گفتند به دلیل استفاده جی کوئری در پروژه بوت استرپ سرعت پروزه کاهش پیدا می کند و ما در پروزه های خودمان از بوت استرپ استفاده نمی کنیم.

طراحان بوت استرپ نیز آمدند و در ورزن 5 به صورت کامل جی کوئری را حذف کردند تا باعث شود سرعت لود وب سایت بسیار بالاتر برود.

و همین کار باعث شد که آن دسته از توسعه دهندگانی که از بوت استرپ به خاطر سرعت پایینش بدشات می آمد دوباره به سمت بوت استرپ برگردند و از ان نیز در پروزه های خودشان استفاده بکنند.

تغیرات در سیتم گرید بندی بوت استرپ

تفاوت بوت استرپ 4 و 5

سیستم گرید بندی بوت استرپ یک سری تغییرات جزئی نسبت به ورژن قبل بوت استرپ یعنی ورژن 4 داشته است.

برای مثال در ورژن 4 بوت استرپ کلاس xxl وجود نداشت برای گرید بندی اما در ورژن 5 بوت استرپ این نیز اضافه شده است و شما می توانید برای سایز های خیلی خیلی بزرگ نیز سایت خودتان را ریسپانسیو کنید و سفارش سازی کنید.

در ورژن 4 بزرگترین سایزی که می توانستید برای ان گرید در نظر بگیرید و آن را تقسیم بندی کنید کلاس Extra large در سایز 1140px بود که با کلاس .col-xl- شما می توانستید از آن استفاده کنید.

اما در ورزن 5 علاوه بر کلاس .col-xl- شما می توانید از کلاس .col-xxl- استفاده کنید.

این کلاس برای سایز های xxl استفاده می شود که ≥1400px می باشد.

سیستم گرید بندی بوت استرپ 4:

Extra large
≥1200px
Large
≥992px
Medium
≥768px
Small
≥576px
Extra small
<576px
1140px960px720px540pxNone (auto)Max container width
.col-xl-.col-lg-.col-md-.col-sm-.col-Class prefix
12# of columns
30px (15px on each side of a column)Gutter width
YesNestable
YesColumn ordering

 

سیستم گرید بندی بوت استرپ 5:

xxl
≥1400px
Extra large
≥1200px
Large
≥992px
Medium
≥768px
Small
≥576px
Extra small
<576px
1320px1140px960px720px540pxNone (auto)Max container width
.col-xxl-.col-xl-.col-lg-.col-md-.col-sm-.col-Class prefix
12# of columns
1.5rem (.75rem on left and right)Gutter width
YesNestable
YesColumn ordering

نسخه راستچین در بوت استرپ ورژن 5

در ورزن های 4 و یا 3 در بوت استرپ زمانی که می خواستیم از آن در پروزه خود استفاده کنیم که سایت ما فارسی زبان بود و یا راستچین بود باید می آمدیم و به صورت دستی کد های css به بوت استرپ اضافه می کردیم تا به صورت راستچین شود تا بتوانیم در سایت های فارسی زبان استفاده کنیم.

اما در ورژن 5 بوت استرپ خود توسعه دهندگان بوت استرپ نسخه ای راستچین نیز ارائه کرده اند تا تمامی سایت های فارسی زبان و یا راستچین بتوانند از آن استفاده کنند و بدون مشکل و دستکاری کد ها لذت ببرند.

لازم به ذکر است که نسخه های 4 و یا پایین تر بوت استرپ نیز ورژن های راستچین داشتند اما به صورت رسمی برای خود بوت استرپ نبود و توسعه دهندگان دیگر آن ها را در گیت هاب و یا جا های دیگر ارائه کرده بودند اما در ورژن 5 به صورت رسمی از خود سایت بوت استرپ ارائه شد.

تغییر صفت های data

یکی دیگر از تفاوت بین بوت استرپ 4 و 5 تغییری است که در صفت های data رخ داده است.

قبل از ارائه بوت استرپ ورژن 5 ما در بوت استرپ ورژن 4 وقتی می خواستیم از data ها استفاده بکنیم برای مثال data-target را میزدیم.

اما در ورژن 5 بوت استرپ یک bs بین این کلمات اضافه شده است که برای مثال به جای data-target از data-bs-target استفاده می کنیم.

یا به عنوان مثال به جای data-toggle از data-bs-toggle استفاده می کنیم.

پشتیبانی از مرورگر ها 

از نسخه 5 بوت استرپ مرورگر های IE و Legacy Edge پشتیبانی نمی شوند و اگر کاربران شما از این مرورگر ها استفاده کنند و وارد سایت شما شوند پشتیبانی نمی شود و سایت شما به صورت ریسپانسیو شده با بوت استرپ نمایش داده نمی شود.

نتیجه گیری

بوت استرپ در ورژن 5 بهبود های خیلی زیادی داشته است و پیشنهاد می شود حتما از ان در پروزه های خود استفاده کنید.

و یا اگر در سایت خود از قبل، از ورژن 4 استفاده می کردید حتما در سریع ترین زمان ممکن آن را به ورژن 5 بوت استرپ ارتقا دهید زیرا باعث افزایش سرعت سایت شما خواهد شد.

 

One thought on “تفاوت بوت استرپ 4 و 5 چیست ؟

  1. Hosein.Sjd میگوید:

    سلام وقت بخیر
    ببخشید فرمودید Jquery سرعت Bootstrap 4 رو پایین می آورد. این یعنی بهتره ما هم از Jquery استفاده نکنیم؟
    برای javascript چه framework و چه کتابخونه ای رو پیشنهاد می دید؟

    • محمدامین سعیدی راد میگوید:

      سلام عزیز.
      فریمورک بوت استرپ 4 از جی کوئری هم استفاده می کرد. یعنی برای استفاده از بوت استرپ 4 باید فایل های جی کوئری رو هم به پروژتون لینک می کردید و این موضوع باعث افزایش حجم و پایین اومدن سرعت پروژه میشد. به همین جهت بوت استرپ تو ورژن 5 کتابخونه جی کوئری رو کنار گذاشت و با جاوا اسکریپت خام نیازای خودش رو برطرف کرد.
      این یه امر کاملا طبیعی و واضحه که بوت استرپ به علت تعداد بالای وابستگی‌هاش، سعی کرده یکی از اونا (جی کوئری) رو حذف کنه تا پرفورمنس و بازدهی بهتری رو داشته باشه.
      اما این موضوع نمیتونه دلیلی بر منسوخ شدن یا از بین رفتن جی کوئری باشه. هر چند به عقیده برخی از دوستان جی کوئری منسوخ شده، اما پیشنهاد می کنم در کنار تکنولوژی اصلی فرانت که کار می کنید، جی کوئری را نیز یاد بگیرید.
      چون مدت زمان زیادی ازتون نمیگیره و یادگیریش خالی از لطف نیست. جایی ممکنه به خودش یا حداقل به پلاگین هاش نیاز داشته باشین.

دیدگاهتان را بنویسید