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

نوشته از عرفان جهانشاهلو
1400/06/15
تفاوت بوت استرپ 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
1140px 960px 720px 540px None (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
Yes Nestable
Yes Column ordering

 

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

xxl
≥1400px
Extra large
≥1200px
Large
≥992px
Medium
≥768px
Small
≥576px
Extra small
<576px
1320px 1140px 960px 720px 540px None (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
Yes Nestable
Yes Column 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 بوت استرپ ارتقا دهید زیرا باعث افزایش سرعت سایت شما خواهد شد.

 

نظرات

ثبت نظر جدید
dadash_hamed
کاربر
1402/09/01
مقاله خوبی بود.
ممنون از زحمت و وقتی که گذاشتین.
تمام نظرات نمایش داده شده است.