آموزش Bootstrap

هر فردی که به دنبال آموزش بوت استرپ است، بدون شک با زبان‌های برنامه‌نویسی HTML و CSS آشنایی کامل دارد. اما سوال اصلی اینجاست که بوت استرپ (Boostrap) چه کمکی به ما می‌کند و بهترین مسیر برای آموزش بوت استرپ کدام است؟

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

بوت استرپ (Bootstrap) چیست؟

بوت استرپ یا Boostrap یک فریم‌ورک پیشرفته و قدرتمند است که توسط کاربران سابق توییتر، آقایان Mark Otto و Jacob Thornton اختراع شد. در وب‌سایت رسمی بوت استرپ، درباره بوت استرپ اینگونه نوشته شده است:

بوت استرپ (Bootstrap) محبوب‌ترین فریم‌ورک HTML ،CSS و JS برای توسعه ریسپانسیو (واکنشگرا) وب‌سایت‌ها در بستر وب است.

اما در تعریف عامیانه:

بوت استرپ مجموعه‌ای از کدهای آماده‌ی HTML ،CSS و JS است که برای توسعه سمت کاربر (فرانتد) وب‌سایت‌ها بکار گرفته می‌شود و با استفاده از آن می‌توان صفحات رسپانسیو (واکنشگرا) را با سرعت بسیار بالا تولید کرد.

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

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

در واقع با آموزش بوت استرپ (Bootstrap) می‌توانید حجم و زمان کدنویسی CSS و JS خود را کاهش داده و برای طراحی ظاهر سایت وقت بیشتری بگذارید.

از طرف دیگر، بوت استرپ (Boostrap) یک فریم‌ورک رایگان است و تمام فایل‌های آن در وب‌سایت گیت‌هاب در دسترس عموم قرار دارند. در ادامه می‌خواهیم به بررسی برخی از فواید استفاده از بوت استرپ اشاره کنیم.

مزیت‌های بوت استرپ چیست و چرا از آن استفاده کنیم؟

استفاده از Grid ریسپانسیو در بوت استرپ

اگر شما تاکنون بدون استفاده از بوت استرپ کدنویسی کرده باشید، متوجه خواهید شد که همیشه زمان زیادی را برای چارچوب‌بندی، اندازه‌گیری و ساختارچینی المان‌ها صرف کرده‌اید. اما با آموزش بوت استرپ (Bootstrap) می‌توانید به سادگی Container یا همان چارچوب اصلی یک صفحه را ایجاد کنید و برای هر باکس یا جعبه در قالب خود، ابعاد از پیش تعریف شده‌ای مانند Extra Small ،Small ،Medium ،Large و Extra Large در نظر بگیرید.

تصاویر رسپانسیو در بوت استرپ

با آموزش بوت استرپ می‌توانید تصاویر موجود در قالب یا وب‌سایت خود را به صورت خودکار، متناسب با اندازه صفحه تغییر دهید. یعنی یک تصویر اگر در یک صفحه 1200px پیکسلی قرار بگیرد، سایز خود را متناسب با اندازه 1200px تغییر می‌دهد. این درحالیست که اگر صفحه به اندازه 800px پیکسل تغییر کند، ابعاد تصویر نیز مطابق آن تغییر اندازه می‌دهد. تمام این امکانات تنها با افزودن کلاس .img-responsive به المان تصویر امکانپذیر است. به عبارت دیگر به جای ده‌ها خط کدنویسی CSS، کافیست از یک کلاس آماده و از پیش تعریف شده استفاده کنید. دستورهای دیگری مانند .img-circle یا .img-rounded وجود دارند که ظاهر تصاویر را تغییر می‌دهند.

کامپوننت‌ها در بوت استرپ

فریم‌ورک بوت استرپ از اجزای مختلفی تشکیل شده است. این جداسازی اجزاء، دسترسی به سایر بخش‌های این فریم‌ورک را ساده‌تر می‌کند. هر جزء در بوت استرپ یک کامپوننت (Component) نامیده می‌شود. مثلا برای پیاده‌سازی یک منوی آبشاری، کافیست از ساختار و کلاس‌های کامپوننت Dropdown استفاده کنید. این کامپوننت‌ها به شما کمک می‌کنند تا نه تنها طراحی چشم‌نوازی داشته باشید، بلکه در صفحه نمایش‌ها با ابعاد مختلف، ظاهر قالب شما عالی به نظر برسد.

جی کوئری در بوت استرپ

اگر آموزش بوت استرپ را دنبال کنید، متوجه خواهید شد که این فریم‌ورک با جاوا اسکریپت (JS) ارتباط خوبی برقرار کرده است. از طرفی افزودن کتابخانه JQuery و پلاگین‌های آن به این فریم‌ورک باعث شده تا توسعه‌دهندگان برای ارتقاء سطح کاربری قالب خود، مشکلی نداشته باشند. ابزارهایی مانند صفحه‌های پاپ‌آپ (Popups)، اسلایدر تصاویر و Transitions (انیمیشن‌ها) که به جی کوئری و جاوا اسکریپت وابسته هستند، به راحتی توسط بوت استرپ ایجاد می‌شوند.

مستندات بسیار قدرتمند در بوت استرپ

وقتی به وب‌سایت رسمی بوت استرپ مراجعه می‌کنید، در منوی بالایی یک عنوان با نام Documentation وجود دارد که راهنمایی قدرتمند برای تمام بخش‌های بوت استرپ است. در این مستندات، جزء‌ به‌ جزء بخش‌ها و کدهای بوت استرپ به همراه مثال‌های کاربردی و عملی، توضیح داده شده است. زبان انگلیسی بسیار ساده و قابل فهم باعث شده تا بوت استرپ به عنوان یکی از ساده‌ترین فریم‌ورک‌های HTML و CSS معرفی شود.

شخصی‌سازی بوت استرپ

با نگاهی به جدول موجود در وب‌سایت گیت هاب، حجم فشرده نشده (uncompressed) فریم‌ورک بوت استرپ (نسخه 4.0.0) حدود ۱۸۷ کیلوبایت و حجم فشرده شده (Minified) آن ۱۴۷ کیلوبایت است. با توجه به سرعت اینترنت در داخل ایران و محدودیت‌های حجم ترافیک، کاربران دوست دارند که با سریع‌ترین شرایط وب‌سایت را بارگذاری کنند. پس استفاده کامل از بوت استرپ همواره به عنوان یک چالش بزرگ است. برای حل این مشکل، بوت استرپ ابزاری برای شخصی‌سازی قرار داده است که توسعه‌دهندگان متناسب با نیاز قالب، امکانات موردنظر خود را انتخاب کرده و سپس فشرده‌سازی را انجام دهند. به عبارت دیگر شما متناسب با امکاناتی که از بوت استرپ انتظار دارید، فشرده‌سازی فریم‌ورک را اجرا می‌کنید.

انجمن گسترده بوت استرپ

قالب‌ها و اپلیکیشن‌های بسیار زیادی با بوت استرپ پیاده‌سازی شده‌اند که اکثر آن‌ها به صورت رایگان و Open Source در اختیار کاربران قرار گرفته است. همین امر موجب شده تا جامعه توسعه‌دهندگان بوت استرپ روز به روز بزرگتر شود. یعنی شما می‌توانید علاوه بر بررسی ایده‌های سایر توسعه‌دهندگان، از الگوهای طراحی آنها نیز بهره ببرید.

هر فریم‌ورک و زبان برنامه‌نویسی در کنار مزایا، معایبی هم دارد که این موضوع برای بوت استرپ نیز صادق است.

چرا نباید از بوت استرپ استفاده کنیم؟

سکه دو رو دارد! بوت استرپ علی‌رغم محبوبیت‌های بسیار زیادی که کسب کرده است، منتقدان دقیقی دارد که مو را از ماست جدا می‌کنند!

بوت استرپ گیج کننده است!

قبل از اینکه این فریم‌ورک را به صورت کامل یاد بگیرید، نمی‌توانید با سینتکس‌های آن ارتباط خوبی برقرار کنید. به فرض مثال وقتی از سیستم grid استفاده می‌کنید، معنی عبارت col-md-4 را متوجه نمی‌شوید. کلاس col-md-4 به صورت مشخص بیان می‌کند که اگر صفحه شما ۱۲ قسمت باشد، ۴ قسمت آن را تا زمانیکه صفحه نمایش بزرگتر از ۹۹۲ پیکسل است، به خود اختصاص بدهد. این تفسیر کمی طولانی و گاهی گیج‌کننده است. البته دقت داشته باشید که با تمرین و به مرور زمان تمام این مباحث برای شما ساده و قابل درک می‌شوند.

فایل‌های بوت استرپ حجیم هستند!

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

بوت استرپ روند توسعه دانش فردی را کند می‌کند!

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