سحر ابراهیمی
سحر ابراهیمی
خواندن ۴ دقیقه·۴ سال پیش

چه چیزی در Bootstrap 5 جدید است؟

تیم Bootstrap نسخه 5 این فریم ورک محبوب رو در حالت Beta منتشر کرده است و دنبال کنندگان آن می توانند حالا از نسخه های قدیمی تر به نسخه نهایی مهاجرت کنند. سوالی که پیش می آید این است که تفاوت نسخه جدید با نسخه قبلی چیست؟

پیش از تمامی مواردی که در این نسخه تغییر یافته است، باید به تغییر لوگوی Bootstrap به شکل ابتدای مقاله اشاره کنیم.

1-استفاده از Vanilla JavaScript به جای JQuery

در گذشته Bootstrap از JQuery بعنوان یک dependency برای ارائه امکاناتی مانند منو، carousel و dropdown و .. استفاده می کرد. این امر برای برنامه نویسانی که از تکنولوژی های جدید طراحی رابط کاربری مانند React و ... استفاده می کردند امر ناخوشایندی بود و الان این مساله در نسخه 5 فریم ورک برطرف شده است. این به این معنی نیست که Bootstrap 5 به جاوااسکریپت نیاز ندارد بلکه به این معنی است که به جای JQuery برای قسمت های Dynamic از Vanilla JS استفاده شده است.

2- پشتیبانی از IE ورژن های 10 و 11 حذف شده است.

با ظهور مرورگر Edge و فراهم کردن نمایش های بهتر و صحیح تر از گرافیک وب سایت ها و همچنین سرعت محو شدن استفاده از آن، حالا دیگر می توان امکانات بسیار خوب و کاملی که در آخرین ورژن های chrome و firefox وجود دارد را در این مرورگر مشاهده نمود. تیم بوت استرپ تصمیم گرفت تا حمایت از نسخه های قدیمی IE را حذف کند که این امکان را فراهم کرده تا بتواند از تکنولوژی های جدید جاوا اسکریپت و CSS در نسخه آخر خود بهره بگیرد.

3- امکان Customize کردن CSS

با حذف پشتیبانی از IE حالا امکان Custom کردن کدهای CSS با variable براحتی فراهم شده است

.table {   --bs-table-bg: #{$table-bg};   --bs-table-accent-bg: transparent;   --bs-table-striped-color: #{$table-striped-color};   --bs-table-striped-bg: #{$table-striped-bg};   --bs-table-active-color: #{$table-active-color};   --bs-table-active-bg: #{$table-active-bg};   --bs-table-hover-color: #{$table-hover-color};   --bs-table-hover-bg: #{$table-hover-bg};    // Styles here... }

4- پالت رنگ گسترده

شما براحتی می توانید پالت رنگی خودتان را با این پالت رنگی جایگزین کنید. همچنین استفاده از این پالت رنگی بسیار راحت می باشد، برای مثال برای استفاده از طیف های مختلف رنگ آبی به صورت زیر رنگ ها صدا زده می شود. $blue-200 و $blue-300 و ....

5- نمایش فرم ها بروز شده است.

در نسخه قبلی فرم ها به همان شکلی که مرورگر به صورت پیش فرض ارائه می داد نمایش داده می شود. به همین جهت در مرورگرهای مختلف فرمها نمایش های متفاوتی داشتند. در نسخه جدید نمایش custom برای فرمه ها در نظر گرفته شده است و شما می توانید در تمامی مرورگرها نمایش ثابتی از فرم های خود داشته باشید.

6- وجود Utilities API

شما براحتی می توانید با استفاده از SASS کلاس های مورد نظر خودتان رو بسازید یا کلاس های موجود رو overwrite کنید.

&quotwidth&quot: (
      property: width,
      class: w,
      values: (
        25: 25%,
        50: 50%,
        75: 75%,
        100: 100%,
        auto: auto
      )
    ),

می توانید pseudo class استفاده کنید.

$utilities: (
  &quotopacity&quot: (
    property: opacity,
    class: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

خروجی به شکل زیر خواهد بود.

.opacity-0-hover:hover { opacity: 0; }
.opacity-25-hover:hover { opacity: .25; }
.opacity-50-hover:hover { opacity: .5; }
.opacity-75-hover:hover { opacity: .75; }
.opacity-100-hover:hover { opacity: 1; }

7- سیستم grid پیشرفته

با حفظ سیستم گرید موجود در نسخه 4 ، بوت استرپ گرید خودش را پیشرفته تر کرده است و با کمترین تغییرات می توان به سیستم جدید مهاجرت کرد.برخی امکانات به شرح زیر است:

اضافه شدن Break Point جدید xxl

اضافه شدن کلاس های Gutter

لایه های فرم ها با سیستم جدید جایگزین شده اند.

برای فاصله های عمودی کلاس هایی تعریف شده است.

ستون ها دیگر به صورت پیش فرض نسبی هستند.

8- پشتیبانی از RTL

در این نسخه به صورت Built-in بوت استرپ از زبان های راست به چپ پشتیبانی می کند و براحتی می توان از کلاس های خودش استفاده کرد.

9- امکان ویرایش بوت استرپ و قرار دادن تم های مختلف

در این نسخه امکان قرار دادن تم های اختصاصی و اختصاصی سازی راحت تر شده است.

10- تغییر data attr

بوت استرپ برای کنترل رفتارهای جاوا اسکریپت از HTML استفاده می کند بنابراین با توجه به این امر که در نسخه 5، data attr از data-* به data-bs-* تغییر کرده است. شما نیاز دارید که در مهاجرت این قسمت ها را جایگزین کنید.

11- استفاده از Popper.js ورژن 2

در بوت استرپ tooltip ها و popover ها از Popper.js استفاده می کنند در ورژن دوم این کتابخانه offset ها حذف شده است و بوت استرپ نیز با استفاده از ورژن 2 این امکان را استفاده کرده و نمایش را بهبود بخشیده است.

12- کتابخانه آیکن ها

بوت استرپ فاقد library برای آیکن های مختص خودش بود و همواره استفاده کنندگان ناچار به استفاده از آیکن های منابع مختلف بودند. در این نسخه کتابخانه ای از آیکن های SVG در نسخه اولیه و کتابخانه ای از فونت آیکن ها در نسخه stable ارائه شده است که شامل بیش از 1000 آیکن می باشد.

13- مستندات بهتر

مستندات نحوه استفاده از بوت استرپ 5 بهبود یافته است و امکان وجود یک منوی expanded در ستون چپ رجوع به کتابخانه و کامپوننت ها را راحت کرده است.


منبع https://getbootstrap.com/


بوت استرپbootstrapbootstrap5
شاید از این پست‌ها خوشتان بیاید