ویژگی های جذاب در بوت استرپ 5

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

بوت استرپ در نسخه 2 ، که بسیار قدیمی بوده و اکنون به کل منسوخ شده است ، با به کارگیری خاصیت Media در زبان طراحی Css ، حالت های واکنشگرایی را تا حد زیادی در آن زمان برای سایت ها تامین نمود . در آن هنگام که هدف اصلی فقط نمایش تقریبا درست المان ها در دستگاه هایی مثل موبایل و تبلت بود ، بوت استرپ کاری بسیار بزرگ کرده بود . اما کم کم که وب سایت ها رشد کردند و نیاز بیشتری احساس شد ، بوت استرپ نیز کم کم نیاز به رشد را احساس کرد .

بوت استرپ نسخه 2 و 3

بوت استرپ نسخه 2 ، با اینکه از دستورات Media استفاده کرده بود اما یک مشکل بزرگ داشت و آن هم استفاده از واحد های ثایت پیکسل برای اندازه بود که این مورد باعث عدم تغییر اندازه ها در برخی عرض ها شده بود . به همین خاطر بوت استرپ یک جهش از نسخه 2 به نسخه 3 نمود . همانطور که ممکن است بدانید نسخه هر نرم افزار یا کتابخانه ، دارای 3 شماره به شکل 0.0.0 می باشد . اگر یک نرم افزار برای مثال در اولین نسخه بصورت 1.0.0 ارائه شود و در نسخه بعدی بصورت 1.0.4 ارائه شود و رقم سوم آن دچار تغییر شود ، این تغییر به معنی رفعا باگ در برنامه یا کتابخانه است . اگر رقم دوم تغییر کند یعنی برای مثال نسخه جدید بصورت 1.3.0 عرضه شود ، یعنی تغییرات جزئی در برنامه صورت گرفته است . اما اگر اولین رقم تغییر کند یعنی نسخه جدید بصورت 2.0.0 عرضه شود ، یعنی تغیرات اساسی و کلی در برنامه یا کتابخانه صورت گرفته است .

بوت استرپ زمانی که از نسخه 2 به نسخه 3 مهاجرت نمود ، مشخص بود که تغییر بسیار بزرگی اجرا شده است . در نسخه سوم تکنولوژی قرارگیری المان ها بر روی همان Float بود اما واحد های اندازه گیری از پیکسل به درصد ( % ) تغییر کردند و به این ترتیب یک مشکل بزرگ از میان برداشته شد و المان ها طبق درصد های قرار داده شده ، در تمامی عرض های تعیین شده بخوبی نمایش داده می شدند . بوت استرپ نسخه 3 تا سال های زیادی برای طراحان وب کاربردی بود چرا که در زمان خود یک تحول محسوب می شد و نسبت به نسخه دوم المان های کاربردی بسیار زیادی نیز داشت .

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

بوت استرپ 4 ، شروع انعطاف در طراحی

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

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

با توجه به اینکه Flex در نسخه 4 قرار گرفته بود یک طراحی بسیار منعطف تر با سرعت بیشتر را تامین می نمود . در این بین علاوه بر Flex ، بوت استرپ کلاس های Media را نیز بسیار توسعه داد ، به نوعی که طراح می توانست به کمک دستورات مدیا ، المان هایی همچون Padding و Margin را کنترل کند . ترکیب این ویژگی ها درکنار هم یک انعطاف و سرعت بسیار خارق العاده را در اختیار طراح قرار میداد . اضاف شدن کلاس ها رنگ بیشتر و تنظیم رنگ های بهتر نیز باعث شد تا ظاهر کار نسبت به نسخه 3 بسیار شکیل تر باشد .

علاوه بر این ویژگی ها ، بوت استرپ بر روی تنظیم اندازه های نمایشگر نیز بسیار کار کرده بود . در نسخه 3 تنها 4 عرض برای نمایشگر های مختلف در نظر گرفته شده بود . یعنی حالت موبایل ،  تبلت ، نمایشگر های خانگی و نمایشگر های بزرگ . یک مشکل بسیار بزرگ در بوت استرپ نسخه 3 زیاد بودن عرض مربوط به موبایل ها بود . به این شکل که از عرض 0 تا 768 پیکسل برای عرض های موبایل محسوب میشد و طراحان محبور بودند از عرض 768 پیکسل به سمت پایین را برای موبایل مد نظر داشته باشند .

در نسخه 4 ، هم حالت های عمودی و هم حالت های افقی موبایل ها مد نظر گرفته شد و عرض 768 پیکسل به عرض 576 کاهش یافت و این یعنی تضمین نمایش اصولی در تمامی دستگاه های موبایل در حالت های عمودی یا افقی . به همین ترتیب عرض های مربوط به تبلت نیز بهبود یافت و همچنین نمایشگر های بسیار بزرگ . این تنظیم عرض ها باعث شد تا قالب هایی که طراحی می شوند با حالت های نمایشی بسیار مناسبی دیزاین شوند . گرافیک کار نیر بسیار بهتر شده بود . دکمه ها ، اسلایدر ها ، منوها و … همگی با ظاهری بهتر عرضه شدند . مواردی همچون Toast ، Spinner و پس زمینه های gradient از جمله سایر ویژگی هایی بودند که در نسخه 4 بیشتر به چشم آمدند .

علاوه بر این بوت استرپ بسیاری از دستورات پرکاربرد همچون Padding , Margin , Display , Width , Height و تمامی دستورات اساسی را به شکل کلاس های قابل کنترل تبدیل کرد تا حداقل کدنویسی در داخل فایل Style.Css انجام شود . همین موراد باعث شدند تا سبک کد نویسی در نسخه 4 تغییر یافته و سرعت به شدت بالایی به پروژه ها تزریق شود . تغییر واحد ها از پیکسل به واحد Rem نیز از جمله تغییرات مسبب انعطاف بود . این موارد مهم ترین و اساسی ترین ویژگی هایی بودند که در نسخه 4 ارائه شدند و نسب به تغییرات بوت استرپ در نسخه 2 به نسخه 3 ، بسیار بیشتر مورد توجه قرار گرفتند . اما اکنون زمان رسیدن به نسخه 5 است .

مهاجرت به بوت استرپ 5 ، تیر خلاص برای همه طراحان

زمان آن رسید که بوت استرپ یک نسخه دیگر جهش نموده و به نسخه 5 برسد . همانطور که توضیح داده شد اگر نسخه اصلی یک کتابخانه تغییر کند به این معنی است که تحولات بسیار زیادی در آن انجام شده است .

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

در نسخه 5 ، برای اولین بار نسخه راست چین شده در داخل قالب قرار گرفت و این یک خبر خوب برای طراحان ایرانی بود . ویژگی دوم بعدی اضافه شدن فونت آیکون ها یا به عبارتی بازگشت فونت آیکون ها با نامی دیگر و ظاهری بهتر بود .

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

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

اما در نسخه بوت استرپ 5 ، هیچ نیازی به همکاری کتابخانه jQuery نیست و می توانیم تنها با قرار دادن بوت استرپ جی کوئری ، المان های مورد نیاز را فعال کنیم . این سه مورد ، از اصلی ترین ویژگی هایی هستند که در نسخه 5 بوت استرپ بیشتر جذاب بودند .

اما مطمئنا تغییرات جذاب صرفا همین موارد نبود . در نسخه 5 نیز تکنولوژی نمایش بر اساس Flex و همچنین Css Grid استوار شده بود که بازهم انعطاف را برای هر دو قسمت افزایش میداد . بهبود عرض های نمایشی بازهم در بوت استرپ 5 بخوبی نمایان شدند و انعطاف در عرض های بزرگتر باز بهتر شد .

المان هایی که بصورت کلاس بندی جهت انعطاف در نسخه 4 قرار داده شده بودند در نسخه 5 نیز به مراتب بهتر شدند و همان سرعت بالای کدنویسی در نسخه 5 بازهم بیشتر شد .

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

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

بوت استرپ از نسخه 3 ، توجه بسیار زیادی به دو قسمت جداول و فرم ها داشت . هم بخش جدول ها و هم بخش فرم ها در بوت استرپ 4 ( که به نوعی تحول ظاهری و گرافیکی نیز نام دارد ) بسیار شکیل تر از نسخه 3 شدند . در نسخه 5 تقریبا همین ساختار با کمی تغییر در ظاهر بخش هایی مثل چک باکس و رادیو باتن ها و همچنین اضافه شدن قسمت Floating Label تکمیل شد .

قسمت های دیگری نیز همچون Modal های فول اسکرین و اسلایدر dark نیز تغییرات این نسخه نسبت به نسخه 4 بود .

شروع یادگیری بوت استرپ 5

اگر قصد داریم تا یادگیری بوت استرپ را شروع کنیم مطنئنا باید بروز کار کنیم و از آموزش های روز استفاده کنیم . مطمئنا یادگیری بوت استرپ نسخه 2 در حال حاضر غیر ممکن است چرا که کلا داکیومنت آن در سایت خود بوت استرپ برداشته شده و عملا به درد نخواهد خورد . اما در مورد نسخه 3 میتوان گفت اگر شما زمان کافی برای یادگیری داشتید و قصد دارید تا یک متخصص در زمینه طراحی باشد می توانید از نسخه 3 بوت استرپ یادگیری را آغاز نمائید . اما یادگیری بوت استرپ 3 چه کمکی به یادگیری نسخه های بعدی خواهد کرد ؟؟؟

ممکن است شما برای مثال مدت زمان یک ماه را به یادگیری بوت استرپ 3 اختصاص دهید . یه این دلیل که بوت استرپ نسخه 4 تکمیل شده نسخه 3 می باشد ، لذا شما ساختار پایه بوت استرپ را قبلا آموزش دیدید و اکنون در نسخه 4 با دیدن تغییرات و درک آنها ، می توانید به راحتی و در کمتر از یک هفته به نسخه 4 مسلط شوید . اما اگر هم از نسخه 4 شروع به یادگیری نمائید مطئنا باید ساختار را از پایه یاد گرفت .

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

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