بوت استرپ (Bootstrap) را میتوان یکی از بهترین فریم ورک front-end دانست که توانسته محبوبیت زیادی بین طراحان سایت داشته باشد. با استفاده از بوت استرپ دیگر نیاز به نوشتن کدهای طولانی CSS ندارید. نسخه جدید آن Bootstrap5 است که در در 16 ژوئن 2020 منتشر شد. در ادامه قصد داریم به تفاوت بوت استرپ 4 و 5 بپردازیم و با ویژگی‌های جدید آن آشنا شویم.
صرفه جویی در زمان، طراحی واکنش گرا، ساده، منبع باز و همچنین رایگان بودن آن از مزایای بوت استرپ محسوب میشود. اولین نسخه بوت استرپ در سال 2011 منتشر شد و به سرعت مورد استقبال طراحان سایت قرار گرفت. زیرا همانطور که گفته شد این فریم ورک توسعه front-end الگوها و مولفه‌های مبتنی بر CSS و javascript را برای ساختن رابط‌های کاربری جذاب ارائه میداد. همچنین بوت استرپ بر توسعه به سمت موبایل فرندلی و front-end وب ریسپانسیو تاکید زیادی داشت.
چرا از بوت استرپ استفاده کنیم؟
حتی اگر بهترین سایت را از نظر زبان برنامه نویسی داشته باشید ولی ظاهر مناسبی نداشته باشد هیچ ارزشی نخواهد داشت. بوت استرپ بهترین زبان برای طراحی ظاهر سایت است. همچنین با استفاده از بوت استرپ میتوانید در کمترین زمان و به راحتی سایت ریسپانسیو طراحی کنید. حتی اگر از وردپرس یا دیگر سیستم‌های مدیریت محتوا استفاده میکنید، از بوت استرپ برای بهینه سازی قالب سایت کمک بگیرید.
تغییرات بوت استرپ 4 نسبت به بوت استرپ 5
یکی از مهمترین تغییراتی که بین این دو نسخه بوت استرپ بوجود آمد، حذف جی کوئری است. حذف کردن این مورد از بوت استرپ خبر خوشی برای تمام طراحان سایت بود. زیرا اکثر طراحان سایت از کند لود شدن سایت خودشان شاکی بودند.
شاید برایتان جالب باشد: دلایل افت رتبه در موتورهای جستجو
حتی برخی از آنها میگفتند که جی کوئری به دلیل حجم بالایی که دارد سرعت سایت را کاهش داده و دیگر از بوت استرپ استفاده نمیکنیم. بنابراین سازندگان بوت استرپ تصمیم گرفتند این مشکل را در نسخه 5 حذف کنند تا مخاطبان خود را از دست ندهد.
1. راست چین کردن
بوت استرپ 5 به طور رسمی این قابلیت را ارائه داد که طراحان سایت فارسی زبان هم بتوانند به راحتی سایت را راست چین کنند. در نسخه‌های قبل باید در کد CSS جهت متن را مشخص کرد. همچنین باید گفت که قابلیت راست چین برای نسخه‌های پایین هم وجود داشت ولی به صورت رسمی برای خود بوت استرپ نبود.
2. گرید بندی
یکی دیگر از تفاوت بوت استرپ 4 و 5 سیستم گرید بندی است. در بوت استرپ 4 کلاس XXL وجود نداشته و بزرگترین سایز آن xl بود. اما در نسخه جدید با اضافه کردن XXL میتوانید برای سایزهای بسیار بزرگ سایتتان را ریسپانسیو (واکنش گرا) کنید.
3. صفت دیتا
برای استفاده از دیتا در بوت استرپ 5 از دو حرف bs استفاده میشود. برای مثال نحوه نوشتن دیتا به صورت data-bs-toggle میباشد. در صورتی که در نسخه 4 data-toggle مینوشتند.
بوت استرپ 5 از مرورگر IE و Legacy Edge پشتیبانی نمیکند. اگر کاربری سایت شما را با این مرورگرها باز کنند، سایت به صورت ریساپنسیو نشده نمایش داده میشود.
از دیگر تغییرات بوت استرپ 5 میتوان به رنگ‌ها اشاره کرد. در بوت استرپ 4 محدودیت رنگی وجود داشت که این مشکل در نسخه 5 اصلاح یافت. همچنین در بوت استرپ 4 ظاهر دکمه‌های رادیویی یاچک باکس‌ها در هر سیستم عامل و مرورگر متفاوت بود. اما سازندگان بوت استرپ توانستد این مشکل را برطرف کنند تا در هر مرورگر ظاهری یکسان داشته باشند.
کلاس‌های جدیدی که به بوت استرپ 5 اضافه شده است:
- gx-*(classes control the horizontal/column gutter width)
- gy-*(classes control the vertical/row gutter width)
- g-*(classes control the horizontal & vertical gutter width)
4. rows-cols-auto
بوت استرپ 5 این قابلیت را دارد که سایز فونت‌ها را ریسپانسیو کند. این فریم ورک به طور خودکار سایز فونت یا عنصر تایپوگرافی را با توجه به اندازه نمای کاربر از طریق موتور RFS ریسپانسیو میکند. اگر نمیدانید RFS چیست باید بدانید که یک موتور تغییر اندازه دهنده واحد میباشد که برای تغییر اندازه قلم طراحی شده است.
