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

در این مقاله قصد داریم به مناسبت انتشار نسخه 5 بتا بوت استرپ نگاهی بیندازیم به تفاوت های اصلی بوت استرپ نسخه 4 و بوت استرپ نسخه 5

تفاوت بین بوت استرپ 4 و بوت استرپ 5
Article مجازی

بوت استرپ چیست؟
یک چارچوب منبع باز که از اواخر سال 2011 برای طراحی وب سایت های واکنشگرا با رویکرد Mobile First طراحی شده است.
بوت استرپ کتابخانه ای از کد های آماده CSS , HTML , JS می باشد و برای طراحی Front-end استفاده می شود.

چرا بوت استرپ؟

  • سریع و راحت
  • واکنشگرا و مناسب برای تلفن های همراه
  • رایگان است! در سایت www.getbootstap.com موجود است
  • پشتیبانی از مرورگر های مختلف

 

بوت استرپ 5 آلفا در اواسط ژوئن 2020 ارائه شده است.

برخی از کلاسهای اضافه شده در این نسخه عبارتند از:

gx-*(classes control the horizontal/column gutter width)

gy-*(classes control the vertical/row gutter width)

g-*(classes control the horizontal & vertical gutter width)

rows-cols-auto

 

 

تفاوت بین بوت استرپ 4 و بوت استرپ 5 :

  Bootstrap 4 Bootstrap 5
Gride System دارای 5 صفحه بندی است(xs,sm,md,ld,xl) دارای 6 صفحه بندی است(xs,sm,md,ld,xl,xxl)
Color دارای رنگ های محدود است رنگ های اضافی با پالت رنگ بهبود یافته اضافه شده است
Jquery دارای Jquery و تمام افزونه های مرتبط است Jquery حذف شده و با چند افزونه فعال به vanilla js تغییر می یابد
Internet Explorer بوت استرپ 4 از IE10 و 11 پشتیبانی میکند بوت استرپ 5 از IE10 و 11 پشتیبانی نمیکند
Form elements دکمه های رادیویی و جعبه های چک در سیستم عامل و مرورگر های مختلف ظاهر متفاوتی دارند چه سیستم عامل باشد و چه مرورگر ظاهر عناصر فرم تغییر نخواهد کرد
Utilities API امکان تغییر ابزار های کمکی در بوت استرپ 4 نیست بوت استرپ 5 به ما امکان تغییر و ایجاد ابزار مورد نظر را می دهد
Gutter از .gutter با اندازه قلم در px استقاده میکنید از .g* با اندازه قلم در rem استفاده میکنید
Vertical Classes ستون ها میتوانند بصورت  نسبی قرار بگیرند (Relative) ستون ها را نمیتوان بصورت نسبی قرار داد
Bootstrap Icons بوت استرپ 4 آیکون SVG خاص را ندارد بوت استرپ 5 آیکون های SVG خاص خود را دارد
Jumbotron پشتیبانی می کند پشتیبانی نمی کند
Card deck card deckبرای ایجاد مجموعه ای از کارت ها با عرض و ارتفاع برابر استفاده می شود کلاس card deck حذف شد
Navbar ویژگی inline-block را دارید و بصورت پیش فرض برای کلاس dropdown-menu-dark کشویی سفید نمایش می دهد ویژگی inline-block حذف شده و برای کلاس dropdown-menu-dark بصورت پیش فرض منوی کشویی مشکی نمایش می دهد
Static Site Generator در بوت استرپ 4 از نرم افزار Jekyll استفاده می کنید در بوت استرپ 5 از نرم افزار Hugo استفاده می کنید