معرفی بوت استرپ ۴ و امکانات جدید

پس از نزدیک به 2 سال توسعه و کدنویسی، نسخه 4 بوت استرپ توسط مارک اتو و جیکوب تورنتون منتشر شد. نسخه ای که به خصوص در سایت ریسپانسیو دستخوش تغییرات اساسی شده است. سایز ریسپانسیو بوت استرپ 4 دستخوش تغییرات اساسی شده و محدوده 0 تا 576 پیکسل برای تلفن های همراه به آن اضافه شده است که مشکلات بسیاری از طراحان وب را حل می کند.

اگر با این فریم ورک و قابلیت های آن آشنایی ندارید، پیشنهاد می کنیم مقاله بوت استرپ چیست در سئو مکانیک را مطالعه کنید و سپس به خواندن این مقاله ادامه دهید.

نسخه های قبلی بوت استرپ را بررسی کنید

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

در نسخه دوم طراحی کاملا ریسپانسیو پیاده سازی شد اما در این نسخه تمامی کدها پیکسلی بودند و در واقع سایت های طراحی شده به جای ریسپانسیو ریسپانسیو بودند. برای درک بهتر این موضوع به مقاله تفاوت طراحی وب سایت واکنش گرا و تطبیقی ​​مراجعه کنید. همچنین در نسخه دوم اینترنت اکسپلورر 7 دیگر توسط بوت استرپ پشتیبانی نمی شد.

انتشار بوت استرپ 3 با موج عظیمی از رضایت کاربران و رویکرد مثبت طراحان همراه بود و به قدری فراگیر شده که در حال حاضر 1.5 درصد از سایت های دنیا با این چارچوب طراحی می شوند. این اعداد زمانی جالب تر می شوند که به سایت های محبوب و محبوب نگاه کنید زیرا 13.5 درصد از سایت هایی با رتبه الکسا زیر 10000 از چارچوب بوت استرپ در طراحی خود استفاده می کنند.

در این نسخه طرح کاملا صاف شده و سایه ها از روی تمامی المان ها حذف شده است. ساختار رتبه بندی و پاسخگویی نیز به طور قابل توجهی بهبود یافته است. تقسیم صفحه به درصد انجام شد و تقریباً سایت شما نمایش خوبی در هر اندازه ای داشت. این نسخه اولین نسخه ای بود که 100% پاسخگو در نظر گرفته شد. نقطه ضعف اصلی بوت استرپ 3 فاصله بین نسخه های موبایل، تبلت و دسکتاپ است، زیرا در سایزهای زیر 768 پیکسل، سایت در همه دستگاه ها یکسان به نظر می رسد و طراحی موبایل و مینی تبلت شما شبیه به هم خواهد بود. چه اندازه عناصر در تبلت خیلی بزرگ باشد و چه در تلفن همراه خیلی کوچک، بسیاری از طراحان وب مجبور به نوشتن دستورات CSS اضافی برای نمایش مناسب در اندازه های زیر 500 پیکسل شده اند.

با ورود بوت استرپ 4، اینترنت اکسپلورر به طور کامل از لیست مرورگرهای سازگار با این فریمورک حذف شد زیرا این مرورگر از دستورات فلکس باکس پشتیبانی نمی کند و پلتفرم اصلی نسخه 4 بر اساس فلکس نوشته شده است. می توان گفت که نسخه جدید انعطاف پذیرتر از واکنش گرا است.

همچنین اندازه Media Queries در نسخه جدید به طور کامل تغییر کرده و به 576، 768، 992 و 1200 پیکسل تقسیم شده است. این تقسیم بندی جدید به شما کمک می کند تا مرز مشخصی بین موبایل، تبلت و دسکتاپ داشته باشید.

طراحی وب انعطاف پذیر چیست؟

عبارت Flexbox که مخفف Flexible Box است را می توان یکی از آخرین دستاوردهای کنسرسیوم وب جهانی دانست که به دستورات CSS3 اضافه شده است. این سیستم جدید به شما اجازه می دهد تا در استعمار محتوا انعطاف بیشتری داشته باشید. در بوت استرپ 3 ساختاری متشکل از 12 ستون داشتید که هر ستون با عرض یکسان و فاصله بین آنها 15 پیکسل بود، با ترکیب چند ستون می توانستید کادرهای مختلفی ایجاد کنید اما قادر به ایجاد 5 یا 7 عنصر با عرض یکسان در صفحه نبودید. به عنوان مثال، هنگام طراحی وب سایت کسب و کار و نمایش لوگوی مشتریان خود، همیشه باید از اعداد زوج برای مشتریان استفاده کنید.

اما طراحی انعطاف پذیر امکانات ایده آلی برای چیدمان ستون و چیدمان عناصر به شما می دهد. برخی از ویژگی های مهم فلکس عبارتند از:

1- تعداد عناصر در یک ردیف محدود نمی باشد و چیدمان بر اساس عرض هر کدام انجام می شود. ضمناً فاصله بین المان ها و عرض هر کدام در یک ردیف با توجه به عرض صفحه و تعداد آنها محاسبه می شود و عملاً نمایش صحیحی در هر اندازه ای خواهید داشت.

2- به راحتی می توانید چیدمان محتوا را تغییر دهید. چیدمان عناصر در جهت عمودی و محل قرارگیری آنها نسبت به یکدیگر به راحتی قابل انجام است.

3- فضای اختصاص داده شده به هر عنصر قابل تعیین است و فضای باقیمانده به طور مساوی بین سایر عناصر توزیع می شود.

اینها تنها چند نمونه از ویژگی های فلکس در طراحی وب است که همگی در بوت استرپ 4 به خوبی پیاده سازی شده اند. استفاده از این ساختار و شبکه جدید که نسخه دو بعدی فلکس به حساب می آید، امکان ایجاد سایت های پیچیده و مدرن تری را به شما می دهد.

با انتشار نسخه بتا و سپس نسخه نهایی بوت استرپ 4 در ماه های اخیر، تمامی پروژه های طراحی وب سایت در سئو مکانیک بر اساس این چارچوب و آخرین ویژگی های آن انجام می شود تا تجربه کاربری بهتری برای کاربران موبایل و تبلتی که به سایت دسترسی دارند ایجاد شود. با مراجعه به قسمت نمونه کار طراحی سایت می توانید تعدادی از آنها را مشاهده کنید.

اگر شما نیز از ویژگی های Bootstrap 4 یا Flex در پروژه های خود استفاده می کنید، تجربیات خود را با ما در میان بگذارید تا نقاط قوت و ضعف آن را بهتر درک کنیم.