آموزش جامع بوت استرپ 5 (Bootstrap) پروژه عملی

قبلا تا حدودی شما را با فریم ورک بوت استرپ آشنا کردیم. در این مقاله قصد داریم بوت‌ استرپ 5 را به شما معرفی کنیم. با ما همراه باشید.

 

تاریخچه بوت استرپ 5

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

 

زمان انتشار بوت استرپ نسخه 5

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

 

نحوه‌ی دسترسی به بوت استرپ 5

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

 

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

پر واضح است که در کل برای یادگیری بوت استرپ باید بر دو زبان اصلی HTML و CSS کاملا تسلط داشته باشید. چرا که مبنای طراحی اکثریت فریم ورک‌ها این دو زبان می‌باشد. با ساختار صفحات وب، تگ‎‌ها ، عناصر html، دستورات و قوانین css حتما آشنا باشید. سومین موردی که حتما باید به آن تسلط کافی داشته باشید زبان جاوا اسکریپت است چرا که برخی المان های آن مانند اسلایدر و منو و... توسط این زبان نوشته شده‌اند. اما برای یادگیری نسخه‌ی پنجم باید بگویم اگر با نسخه‌های قدیمی مخصوصا نسخه‌ی چهارم کارکرده باشید یادگیری این نسخه راحت خواهد بود. حتی خیلی از افراد با یک‌ مثال که خود مجموعه بوت استرپ در بخش Examples قرار می‌دهد به راحتی می‌توانند به ویژگی‌ها و تغییرات جدید پی ببرند.

 

ویژگی‌های متفاوت بوت استرپ 5

1. دارای کلاس‌های جدید شبکه‌بندی

نسخه‌های قبلی کلاس‌های شبکه‌بندی تا مدیا کوئری لارج (lg) یعنی عرض 1024 پیکسل ساپورت می‌کردند. اما در آخرین ورژن یک کلاس شبکه‌بندی جدید به عنوان col-xxl  تحولی را در عرض شبکه‌بندی‌ها ایجاد کرد. به گونه‌ای که نمایشگرهای بزرگ تر از 1400 پیکسل را هم ساپورت می‌کنند.

برخی از کلاسهای اضافه شده در این نسخه عبارتند از:

• gx-*(classes control the horizontal/column gutter width)
• gy-*(classes control the vertical/row gutter width)
• g-*(classes control the horizontal & vertical gutter width)
• rows-cols-auto

2. طیف گسترده‌تر رنگ‌ها در بوت استرپ 5

دو کلاس خیلی مهم در این زمینه به کلاس‌های نسخه‌ی چهارم اضافه شدند که شامل دو کلاس bg-opacity و bg-gradient می‌باشند. ما در نسخه‌های قبلی بسیار محدود بودیم و در این نسخه‌ از طی رنگ گسترده‌تری برخوردار هستیم.

3. استفاده کتابخانه  Sass:

Sass مخفف واژه Syntactically Awesome StyleSheets می‌باشد. قبل از اینکه اشاره کنم در نسخه‌ی پنجم چه کاری را انجام می‌دهد بهتر است علت ارائه‌ی آن را توضیح دهم. Css یکی از ساده‌ترین زبان‌های برنامه‌نویس است. اما روزانه با تحولاتی که برای این زبان رغم می‌خورد پیچیده‌تر و برزگ‌تر می‌شود. در نتیجه استفاده از آن سخت‌تر و پردازش کدها بسیار زمان می‌برد.  در این راستا Sass طراحی شد تا امکانات جدیدی مانند متغییرها، چیدمان تگ‌ها، ترکیب کدها و ویژگی‌های دیگری از یک زبان برنامه‌نویسی را به Css اضافه کند. این کتابخانه که از شاخه‌ای از سی اس اس است بز مبنای جاوا اسکریپت طراحی شده است. کاربرد این کتابخانه این است که به راحتی می‌توانیم بر مبنای چیزی که احتیاج داریم متغیر تعریف کنیم. در نتیجه کدهای بهتری می‌توانیم ارائه دهیم. در این نسخه از Sass استفاده شده که به راحتی می‌توانیم تغییرات خودمان را به بوت‌استرپ اضافه کنیم.

4. حذف JQuery در بوت استرپ 5

جی کوئری یک کتابخانه از جاوا اسکریپت است که برای توسعه‌ی سریع وب ارائه شد. در این راستا 4 اقدام مهم انجام می‌دهد. اسناد HTML را می‌سنجد. به رویدادها رسیدگی می‌کند. و متحرک‌سازی و تعاملات  (AJAX) را به عهده دارد. این کتابخانه  به گونه‌ای طراحی شد تا روشی را که با آن جاوا اسکریپت را می نویسند تغییر دهد. اما برای عمکرد سریع‌تر  جی کوئری  از فریم ورک ورک بوت‌استرپ 5 حذف شد. vanilla js به عنوان جایگزین ارائه شد که بسیار نزدیک به هسته‌ی اصلی جاوا اسکریپت می‌یاشد. همچنین دست توسعه‌دهندگان بوت‌استرپ برای قابلیت‌های به روزتر و مدرن‌تر باز‌تر خواهد بود. بعضی افراد که به این کتاخانه تسلط کافی ندارند می‌توانند همچنان از جی کوئری استفاده کنند. اما باید بگویم که این نسخه با وانیلا سازگاری بیشتری دارد.

5. بوت‌ استرپ 5 از اینترنت اکسپلور پشتیبانی نمی‌کند.

در نسخه‌ی پنجم بر خلاف نسخه‌ی چهارم از ورژن 10 و 11 مرورگرهای اینترنتی اینترنت اکسپلور  ساپورت نشده است که این یک مزیت بسیار خوبی است. در نسخه‌ی چهارم به علت استفاده از اینترنت اکسپلور  کدها حجم بیشتری داشتند و توسعه‌دهندگان بسیار محدود بودند. اما در نسخه‌ی پنجم دست شما را برای استایل‌دهی شخصی باز کرده است. از این رو می توانید تنوع بیشتری را در این ورژن از این فریم ورک محبوب تجربه کنید.

6. بروز کردن فرم کنترل‌ها

همان طور که اشاره شد دست طراح در این نسخه بسیار باز است. او می‌تواند با طراحی دلخواه خود سایت را بیشتر شخصی‌سازی کند.

7. توسعه‌ی بیشتر Navbar  و فرم‌ها

یکی از کامپوننت‌های جذاب بوت استرپ، Navbar می‌باشد و بهتر از همه اینکه منو بار و فرم‌ها در بوت استرپ در نسخه‌ی پنج بهبود یافته است. در نتیجه کاربر دسترسی بیشتری خواهد داشت.

8. ارائه‌ی نسخه جدید و کامل از آیکن‌ها

SVG یا همان Scalable Vector Graphics کمک می‌کند تا همه‌ی فایل‌ها از جمله آیکون‌ها، لوگوها و ترسیمات در سایت به بهترین، زیباترین، و با کیفیت‌ترین حالت ممکن قابل مشاهده باشند. بر این اساس در سایت فقط یک راه وجود دارد که از این کتابخانه استفاده کنیم. نسخه‌ی پنجم این کتابخانه را در اختیار ما قرار داده است. به کمک این ابزار می‌توانیم با حجم مناسب و کیفیت و تنوع مناسب در سایت هر فایلی را ارائه دهیم.

 

در پایان

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