Bootstrap برای مدت طولانی محبوب‌ترین فریم‌ورک CSS برای طراحی ریسپانسیو یا واکنش‌گرا در توسعه وب و موبایل بوده ‌است. همان‌طور که در وب‌سایت w3schools اشاره شده است، ” Bootstrap شامل الگوی‌های طراحی مبتنی بر HTML و CSS برای تایپوگرافی، دکمه‌ها، جداول، Navigation، تصاویر و غیره است.” اخیرا کتابخانه‌های بسیاری بر اساس Bootstrap ساخته شده‌اند.

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

سیستم اصلاح‌شده‌ی Grid

سیستم Grid یکی از جذابیت‌های اصلی فریم‌ورک Bootstrap است که در جدید‌ترین نسخه، تیم Bootstrap قابلیت‌های سیستم Grid آن را افزایش داده‌اند.

• یک لایه Grid جدید با عنوان Extra extra large) xxl) اضافه شده ‌است.
• کلاس‌های .gutter با .g* ها جایگزین شده‌اند.
• کلاس‌های فاصله‌گذاری عمودی اضافه شده ‌است.
• ستون‌ها از حالت پیش‌فرض position : relative خارج شده‌اند.
• گزینه‌های طرح‌بندی فرم‌ها با سیستم Grid جدید جایگزین شده است.

فرم‌های به روز‌رسانی شده

در Bootstrap5، بخش فرم‌ها به عنوان یک بخش جداگانه ارائه شده‌ است. به گفته توسعه دهندگان Bootstrap این کار برای نشان ‌دادن توجه ویژه به استایل‌های فرم‌ها انجام شده ‌است. این مورد تنها تغییر انجام ‌شده در مورد فرم‌ها نیست.

در این نسخه از Bootstrap، تمام کلاس‌های form-control کاهش داده شده و مجددا طراحی کرده‌اند. در نسخه‌های قبلی، مجموعه گسترده‌ای از from-control های سفارشی در کنار کلاس‌های پیش‌فرض‌ ارائه‌ شده توسط هر مرورگر وجود داشت که در این نسخه تمام form-control ها کاملا سفارشی شده‌اند.

به صورت مشابه، تغییراتی در دکمه‌های radio در این نسخه وجود دارد. هر یک از انواع ورودی فرم از جمله checkbox ،radio ،select ،file ،range و غیره شامل یک ظاهر سفارشی برای یکسان‌ کردن استایل و رفتار کلاس‌های form-control در سیستم ‌عامل و مرورگر هستند.

این form-control های جدید تماما براساس form-control های کاملا استاندارد ایجاد شده‌اند و نیازی به علامت‌گذاری‌های اضافی ندارند. تنها استفاده از form-control ها و label ها کافی خواهد‌بود.

تمامی این تغییرات را می‌توانید با مراجعه به این لینک به ‌طور کامل مطالعه کنید.

سفارشی سازی (Customizing Docs)

همان ‌طور که در ابتدای مقاله اشاره شد، با گسترش و پیشرفت Bootstrap، تعداد زیادی کتابخانه‌ی جدید ایجاد شده اند. در نسخه پنجم با بخش سفارشی‌سازی (Customizing) جدید، Bootstrap بیش از هر زمان دیگری از گسترش Bootstrap و ایجاد کتابخانه‌های جدید با استفاده از آن، پشتیبانی می‌کند. برای دسترسی به بخش سفارشی سازی می‌توانید به این لینک مراجعه کنید.

این  بخش جدید گسترش ‌یافته از صفحه Theme متعلق به Bootstrap4 است و  شامل قطعه کد و محتوای بیشتری برای ایجاد فایل‌های Sass می‌باشد.

[button class=”github-btn” href=”http://frontcast.ir/learning-sass”]ویدیوی آموزشی: یادگیری Sass[/button]

خصوصیات سفارشی CSS

در نسخه‌های قبلی، خصوصیات سفارشی CSS فقط در مجموعه محدودی از متغیر‌های root برای رنگ‌ها و قلم‌ها گنجانده شده ‌بودند. اما در نسخه پنجم، در کامپوننت‌ها و گزینه‌های Layout نیز می‌توان از سفارشی‌سازی خصوصیات استفاده کرد. مثالی که در داکیومنت این نسخه از Bootstrap ارائه شده‌است، در نظر بگیرید:

.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...
}

در این مثال، کامپوننت .table با استفاده از چند متغیر محلی برای ایجاد استایل‌هایی چون striped، hoverable و active تغییر داده شده‌است. برای مطالعه جزئیات در مورد جداول می‌توانید به این لینک مراجعه کنید.

حذف jQuery

بر اساس مستندات Bootstrap، حذف jQuery از این فریم‌ورک یکی از مهم‌ترین تغییرات نسخه جدید می‌باشد. در نتیجه حجم پروژه از نسخه قبلی بسیار کمتر خواهد بود.

نتیجه‌گیری

علاوه بر تغییراتی که اشاره کردیم، تغییرات و ویژگی‌های دیگری نیز در Bootstrap5 ایجاد شده‌است:

• عدم پشتیبانی از اینترنت اکسپلورر ۱۰ و ۱۱
• بهبود مستندات 
• فونت ریسپانسیو جدید
• سرویس‌های جدید و مفید

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

[button class=”github-btn” href=”http://frontcast.ir/course/css”]دوره جامع CSS[/button]