آشنایی با برخی امکانات bootstrap4

اگه شماهم در حوزه وب فعال هستید حتما با نام فریمورک bootstrap آشنایی دارید و البته محبوبیتش در سال های گذشته اون رو فراگیرتر هم کرده ، خیلی  ها از bootstrap در پروژهاشون استفاده میکنند و کاملا هم از کار کردن با این فریمورک راضی هستند البته که دلیلی نمیشه همه باید از بوت استرپ استفاده کنند و این کاملا بستگی به پروژه شما داره ، در این نوشته نمیخوایم راجب به دلایل استفاده از اون و یا عدم استفاده از بوت استرپ صجبت کنیم ، این نوشته قراره قرار در مورد ویژگی های bootstrap4 براتون بگه و یک سری از اون هارو بررسی کنه .

این نسخه تغییرات اساسی در ریسپانسیو داشته و همچنین بازه بین 0 تا 576 پیکسل هم برای تلفن های همراه به اون اضافه شده که میتونه اتفاق خیلی خوبی باشه.

همچون نسخه قدیمی هسته این نسخه از بوت استرپ هم از سیستم grid استفاده شده .یک سری امکانات جدید برای نشانه گرفتن بهتر دستگاه های موبایل فراهم شده و تمامی mixin ها بهبود پیدا کردند.علاوه بر اون درجه بندی های قبلی در حال حاضر ما پنج BreakPoint  داریم ، دو BreakPoint  کوجک برای دستگاه هایی که حالت های نرمال رو پشتیبانی نمیکنند و برای تلفن های همراه در نقطه 544 پیکسل ، یک نقطه برای تبلت ها با حداقل اندازه 768 پیکسل ، یک نقطه برای کامپیوتر های رومیزی و یک نقطه هم برای کامپیوتر ها با صفحه نمایش 1200 پیکسل .این تقسیم بندی جدید این کمک رو میکنه که مرز مشخصی بین موبایل، تبلت و دسکتاپ داشته باشید .

فلکس باکس (Flexbox) یک مدل طراحی هست که این اجازه رو به ما میده تا ساختار پیچیده تری نسبت به سیستم شبکه ای تعریف کنید ، طراحان میتونند با استفاده از فلکس باکس لایه های قابل انعطاف  خیلی راحت درست کنند .در نسخه قبلی ما یک ساختار 12 ستونه داشتیم با فاصله 15 پیکسل که حالا با ترکیب این ستون تغییراتی ایجاد میشد اما نمیتونستیم مثلا 7 المان با عرض برابر ایجاد کنیم . طراحی انعطاف پذیر امکانات خوبی رو برای ستون بندی در اختیار ماقرار میده . مثلا دیگه المان ها در یک ردیف محدود نیست یعنی بر اساس عرض هر کدوم نحوه چیدمان انجام میشه . خیلی راحت میشه ترتیب چیدمان هارو تغییر داد و … .

این نسخه از بوت استرپ از حالت پیکسلی به rem مهاجرت کرده ، استفاده از پیکسل برای ریسپانسیو شدن یک سری مشگلات داشت . با تغییر انداره فونت ریسپانسیو بودن دچار بهم ریختگی می شد ، اما در حال حاضر سایت هایی که از بوت استرپ 4 استفاده میکنند مقیاس پذیری بیشتر دارند. همچنین در بوت استرپ4 رنگ اصلی از 2f79b9#  به 0072db # تغییر کرده و از Glyphicon  ها هم استفاده نمیشه .

یکی دیگه از تغییرات در این نسخه در قسمت navigation هست که خیلی ساده تر شده ، در بوت استرپ 3 از یک سری روش ها استفاده میشد که باعث میشد کلاس ها خیلی کثیف و بهم ریخته باشند . اما بوت استرپ 4 یک سری کلاس جدید با Navigation  داره که خیلی راحت تره . یکی دیگه از تغییرات بوت استرپ4 که میتونه خیلی جذاب باشه رنگ بندی کنترل فرم هست ، همچنین بوت استرپ با ارایه یک راه حل مشکل نمابش Checkbox  و RadioButton  سفارشی در مرورگرها رو برطرف کرده.

برعکس بوت استرپ3 در این نسخه نیاز دارید تا مشخص کنید این لیست برای صفحه بندی هست و عنصر های لینک با استفاده از عنصر صفحه شناخته میشن. همچنین در این نسخه به کلاس های  utility  یک سری ویژگی های جدید اضافه شده ، یکی از اون ها جهت دهی به متون هست ؛ مورد بعدی در زمینه ریسپانسیو بودن float ها هست ، به جای استفاده از pull-left and right  این نسخه از کلاس های ریسپانسیو float استفاده میکنه .

بوت استرپ حالا خیلی سریع کامپایل میشه و دلیل اون هم LibSass هست و بوت استرپ هم به جامعه SASS  پیوسته .

بوت استرپ 3 از normalize.css استفاده میکرده اما در نسخه جدید یک سری تغییرات به normalize.css اضافه شده که اسم اون رو reboot گذاشتند .

 دوست داشتید میتونید به 2 لینک زیر هم سری بزنید ، اگه تجربه کار با بوت استرپ 4 دارید خیلی خوبه که در قسمت نظرات این تجربه رو با دیگران به اشتراک بزارید .

لینک اول

لینک دوم