هر آنچه باید در مورد بوت استرپ 5 بدانید
بوت استرپ 5 یک کتابخانه front-end قدرتمند است که به شما کمک میکند تا یک صفحه یا وب سایت را سازگار با دستگاه های موبایل طراحی کنید. این کتابخانه بر مبنای 12 ستون در گرید طراحی شده است و شامل کامپوننت های گسترده ای برای پیاده سازی بخش های مختلف سایت است.
اگر شما اطلاعات زیادی در مورد این فریمورک محبوب ندارید، به خصوص نسخه 5 که بهترین نسخه این کتابخانه است، پس پیشنهاد میکنم، حتما تا انتهای این مقاله همراه ما باشید. در این مقاله، من فقط آنچه را که در نسخه 5 تغییر کرده است را مرور می کنم و درباره اهمیت آنها صحبت خواهم کرد.
لیست محتوایی که در این مقاله درباره آنها صحبت شده است، به شرح زیر است:
- حذف وابستگی بوت استرپ 5 از جی کوئری و استفاده از جاوا اسکریپت خام
- اندازه های فونت واکنش گرا
- حذف پشتیبانی از Internet Explorer و مشخه های سفارشی CSS
- تغییر واحد اندازه گیری
- بهبود سیستم گرید
- بروزرسانی کلاس ها
- کتابخانه جدید آیکون های SVG
- API های کاربردی
- بهبود در مستندات
حذف وابستگی بوت استرپ 5 از جی کوئری و استفاده از جاوا اسکریپت خام
jQuery کتابخانه ای است که یک لایه انتزاع برای برنامه نویسان کلاسیک وب ارائه می دهد. این کتابخانه به توسعه دهندگان این امکان را می دهد تا بدون نوشتن کدهای زیادی از جاوا اسکریپت به نتیجه ای که میخواهند برسند.
با استفاده از جی کوئری میتوانید عناصر مورد نظر را در صفحه پیدا و آنها را تغییر دهید، به تعامل کاربران پاسخ دهید یا برخی اطلاعات را بدون بارگذاری دوباره از سرور بازیابی کنید. اگرچه jQuery مزایای بی شماری برای ما دارد، اما به دلیل زمان بارگذاری در صفحه و رشد چشمگیر فریمورک های دیگری مانند React ، Angular و Vue ، محبوبیت خود را از دست داده است.
این ابزارهای مدرن از یک DOM مجازی برای تعامل با DOM واقعی استفاده می کنند و این روش بسیار سریعتر از وب سایتهایی است که از جی کوئری قدیمی استفاده می کنند. البته به همین دلیل هم بوت استرپ جی کوئری را رها کرد و اکنون فقط از جاوا اسکریپت استفاده میکند. اکنون میتوانید از جاوا اسکریپت استفاده کنید، بدون اینکه نگران اضافه شدن توابع غیر ضروری به برنامه خود باشید.
اندازه های فونت واکنش گرا
طراحی یک وب سایت برای پلتفرم ها و صفحه نمایشگر های مختلف می تواند چالش برانگیز باشد. برای غلبه بر این مشکل، توسعه دهندگان باید از media query ها استفاده کنند که به شما امکان می دهد صفحه خود را در نمایشگرها، متفاوت نشان دهید.
RFS یک موتورتغییر اندازه دهنده واحد است که به طور خودکار اندازه فونت مناسب را بر اساس اندازه صفحه محاسبه می کند و می تواند برای هر مشخصه ای از CSS مورد استفاده قرار گیرد. اگرچه این قابلیت در نسخه 4 بوت استرپ هم وجود داشت، اما در نسخه 5 به صورت پیشفرض فعال است.
حذف پشتیبانی از Internet Explorer و استفاده از مشخه های سفارشی CSS
در سال 1995 ، مایکروسافت اینترنت اکسپلورر را منتشر کرد و در آن روزها این مرورگر به دلیل پشتیبانی از برنامه های مرتبط با CSS و Java ، یک مرورگر محبوب بود. با این حال این نرم افزار امروزه محبوبیت خود را از دست داده و به کابوسی برای طراحان شده است، زیرا از استانداردهای مدرن جاوا اسکریپت پشتیبانی نمی کند.
برای استفاده از اینترنت اکسپلورر باید کد جاوا اسکریپت خود را در ES5 کامپایل کنید که اندازه پروژه شما را افزایش می دهد. حتی بدتر، شما نمی توانید از ویژگی های مدرن CSS استفاده کنید و این محدودیت، توانایی شما را در طراحی صحیح صفحه خود را محدود می کند.
در بوت استرپ 5، تیم طراحی تصمیم گرفت، پشتیبانی از IE را کنار بگذارد و بیشتر روی کلاسهای جدید و خصوصیات سفارشی CSS تمرکز کند. این کار توسعه دهندگان را قادر میسازد بدون نگرانی در مورد پشتیبانی مرورگر قدیمی و افزایش اندازه پروژه، روی طراحی قوی تر تمرکز کنند. در نسخه 4 بوت استرپ فقط متغیرهای root برای رنگ ها و فونت ها وجود داشت. اکنون تیم بوت استرپ گزینه های بیشتری را نیز اضافه کرده است.
تغییر واحد اندازه گیری
CSS انواع مختلفی از واحد های اندازه گیری های مانند px ، rem ، em ،٪ ، vw و vh را ارائه می دهد. px از قبل به طور گسترده ای مورد استفاده قرار گرفته است و به عنوان واحد اندازه گیری مطلق شناخته می شود. واحد اندازه گیری px با تغییر در اندازه های صفحات نمایش تغییر نمی کند و برای طراحی واکنش گرای وب مناسب نیست.
بوت استرپ از واحد px برای پهنای gutter خود استفاده کرده است و اکنون در نسخه 5 این واحد به به rem یا “root em” تغییر یافته است. rem اندازه فونت عنصر ریشه را محاسبه می کند و اندازه را بسته به آن عنصر اصلی تنظیم می کند. (برای بیشتر مرورگرها این مقدار برابر با 16 پیکسل است).
بهبود سیستم گرید
در نسخه 4 از بوت استرپ ما در حال حاضر یک سیستم گرید 12 ستونی عالی داریم. اکنون وقت آن است که به گرید ‘xxl’ برای صفحه هایی با عرض بیش از 1400 پیکسل نیز خوش آمد بگوییم که انعطاف پذیری کار شما را بسیار افزایش میدهد. کلاسهای Gutter با ابزارهای ‘g-*’ جایگزین شده اند. می توانید از “gx- *” یا “gy- *” برای ایجاد فاصله میان ستون ها و سطر ها استفاده کنید . برای کسب اطلاعات بیشتر لطفا اینجا را ببینید.
بروزرسانی کلاس ها
در نسخه 4 بوت استرپ بیش از 1500 کلاس CSS وجود دارد. برخی از این کلاس ها در نسخه جدید بوت استرپ وجود ندارد و برخی دیگر نیز حفظ شده اند.
برخی از کلاسهای CSS که از بوت استرپ نسخه 5 حذف شده اند، عبارت اند از:
- * form-row
- * form-inline
- * list-inline
- * card-deck
- Some CSS classes added to Bootstrap are:
- * g-*, gx-*, gy-*
- * rows-cols-auto
کتابخانه جدید آیکون های SVG
در بوت استرپ نسخه 4، هیچ کتابخانه ای برای آیکون ها وجود نداشت، بنابراین توسعه دهندگان باید یک ارائه دهنده آیکون رایگان مانند Font Awesome را پیدا میکردند یا از آیکون های سفارشی خود استفاده میکردند. در Bootstrap 5 ، یک کتابخانه کاملاً جدید آیکون SVG وجود دارد. می توانید از این کتابخانه استفاده کرده و آیکون هایی را به پروژه خود اضافه کنید.
API های کاربردی
در نسخه 4، می توانید صفحه مورد نظر خود را با کلاسهای سراسری ‘$ enable- *’ کنترل کرده و شخصی سازی کنید، و در نسخه 5 با رویکردی مبتنی بر API کار ساده تر است. توسعه دهندگان یک زبان و نحوی در Sass ایجاد کردند تا ما بتوانیم ابزارهای خود را ایجاد کنیم. حتی می توانید با استفاده از این روش مبتنی بر API برنامه های کمکی را اصلاح یا حذف کنید.
بهبود در مستندات
یکی از موارد جالب در مورد مستندات وب سایت بوت استرپ این است که آنها تولید کننده استاتیک مستندات وب سایت خود را از Jekyll به Hugo تغییر داده اند. به گفته آنها ، جکیل نیاز به نصب روبی دارد و این کار باعث کندی وب سایت شده بود، بنابراین آنها تصمیم گرفتند از Hugo استفاده کنند. در کل بهبود قابل توجهی در این نسل از مستندات بوت استرپ به چشم میخورد.