همه چیز درباره Bootstrap

بوت استرپ چیست؟
بوت استرپ یک فریمورک ( چهار چوب ) رایگان و متن باز است که در سال 2011 میلادی طراحی شده است. در واقع بوت استرپ مجموعه ای از توابع و دستورات Html ، CSSو JavaScript می باشد که امکاناتی از جمله فرم ها، دکمه ها و المان های مختلف را در اختیار برنامه نویس قرار می دهد.
بوت استرپ در ابتدا توسط مارک اتو و جیکوب تورنتون دو برنامه نویس و توسعه دهنده و از کارمندان سابق شرکت twitter با نام twitter blueprint معرفی شد که در نهایت نام Bootstrap برای آن در نظر گرفته شد.

از راست به چپ-جیکوب تورنتون و مارک اتو خالقان بوت استرپ 
 

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

فریمورک چیست؟

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

بوت استرپ تا کنون در چه نسخه هایی معرفی شده است؟
تاکنون که در حال تهیه این مقاله در سال 2022 هستیم، آخرین نسخه ای که از بوت استرپ ارائه شده است،نسخه 5 می باشد که در این نسخه وابستگی به JQuery از بین رفته و بصورت آماده می توان از آن استفاده کرد. همچنین برخی کلاس ها بروز رسانی شده اند و حجم کدنویسی CSS کمتر شده و قابلیت سازگاری با مرورگرهای مختلف به آن افزوده شده،Api در آن بهبود یافته و البته مهمترین تغییر آن اضافه شدن قابلیت راست چین بودن یا همان rtl می باشد.

چرا بوت استرپ از محبوبیت بالایی برخوردار است؟
بوت استرپ در واقع یک فریمورک زبان CSS محسوب می شود ولی در طراحی بخش های کوچکی از آن از دستورات جاوا اسکریپت نیز استفاده شده است.
در واقع بوت استرپ برنامه نویس را از نوشتن تعداد زیادی کد CSS بی نیاز می کند که این امر باعث می شود تا برنامه نویس زمان بیشتری را برای طراحی صفحات وب داشته باشد.
جالب است بدانید که بوت استرپ با جی کوئری سازگاری دارد و از آن پشتیبانی می کند. بنابراین با بوت استرپ می توان از برخی پلاگین های جی کوئری استفاده نمود. 
با توجه به متن باز بودن بوت استرپ و وجود آن در مخزن آنلاین github می توان در نظر داشت که بوت استرپ مورد توجه جامعه برنامه نویسان و توسعه دهندگان می باشد که این امر موجب می شود تا به توسعه بوت استرپ سرعت بیشتری داده شود.
بوت استرپ در وب سایت هایی نظیر ناسا و فیفا مورد استفاده قرار گرفته است تا قدرت بالای خود را به طراحان و توسعه دهندگان و حتی کاربران وب سایت ها نشان دهد.
طی یک نظر سنجی که در آوریل 2022 صورت گرفته است بوت استرپ یازدهمین پروژه محبوب github معرفی شده است که نشان دهنده اهمیت و محبوبیت بالای این فریمورک می باشد.
 

مزایای بوت استرپ چیست؟

-استفاده آسان
استفاده از بوت استرپ در صورت دانش کافی از Html و CSS بسیار آسان هست و هر کسی که دانشی کافی از این دو داشته باشد به راحتی می تواند از بوت استرپ در پروژه های خود استفاده کند.

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

-قابل استفاده در وردپرس
بیشتر تم های و قالب های موجود در وردپرس با استفاده از بوت استرپ طراحی شده اند.
 

معایب بوت استرپ چیست؟

با وجود داشتن مزایای زیاد بوت استرپ معایبی را هم دارد که به نسبت مزایای آن کمتر هستند و یا از اهمیت کمتری برخوردار هستند.

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

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

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

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

رقیب های بوت استرپ چه فریم ورک هایی هستند؟
بوت استرپ در کنار فریم ورک هایی نظیر foundation و tailwind که دو فریم ورک مشابه و البته پر استفاده و محبوب برنامه نویسان فرانت اند محسوب می شود اما با این وجود بوت استرپ از محبوبیت بالاتری برخوردار هست و برنامه نویسان بدلیل قدرتمند تر بودن بوت استرپ در واکنش گرایی صفحات وب یا همان رسپانسیو بودن(Responsive) و همچنین قدرت بیشتر بوت استرپ در زیباسازی ظاهر وب سایت،بوت استرپ را به دو فریم ورک رقیب خود یعنی foundation و tailwind ترجیح می دهند.
 

کاربرد بوت استرپ در کجاست؟
بیشترین و مهمترین کاربرد بوت استرپ در واکنش گرایی صفحات(Responsive) می باشد اما کابرد دیگری که بوت استرپ دارد تبدیل فایل psd به یک ui زیبا و استاتیک است.در واقع بوت استرپ فایل psd را تبدیل به یک ui یا رابط کاربری جذاب و زیبا می کند.

واکنش گرایی صفحات(Responsive) یعنی چه؟
با توسعه دستگاه های مختلف از جلمه موبایل،تبلت و سایر دستگاه ها واکنش گرایی صفحات وب به امری مهم و حائز اهمیت تبدیل شده است.اگر یک سایت را در حالت نرمال در نظر بگیریم که سایت روی کامپیوتر بارگذاری شود،با اندازه نرمال و پیش فرض صفحه وب می توان از سایت استفاده نمود ولی فرض کنیم کاربر اندازه مرورگر خود را تغییر دهد یا اینکه از سایر دستگاه ها برای بارگذاری سایت استفاده کند مثلا موبایل یا تبلت.در این صورت اندازه تعریف شده برای صفحه ی وب با اندازه صفحه دستگاه های مختلف سازگاری ندارد و سایت یا بارگذاری نمی شود یا اگر بارگذاری شود با اندازه صفحه دستگاه مورد نظر کاربر مطابقت ندارد.اینجاست که بوت استرپ قدرت بالای خود در واکنش گرایی صفحات وب را نشان می دهد و باعث می شود تا سایت رسپانسیو یا واکنش گرا شود.بدین معنا که کاربر با تغییر اندازه مرورگر در سیستم خود یا استفاده از موبایل یا تبلت،میزان اندازه صفحه وب سایت نیز با میزان اندازه صفحه آن سیستم یا موبایل یا تبلت مطابقت پیدا می کند تا مشکلی در نمایش صفحه وب وجود نداشته باشد.به این عمل رسپانسیو سازی می گویند.

بوت استرپ چه امکاناتی را در اختیار برنامه نویس قرار می دهد؟
 

Navbar
اگر شما هم از آن دسته افرادی هستید که می خواهید یک نوار پیمایشی در بالای صفحه خود استفاده کنید ( در واقع منظور همان منو وب سایت است که در قسمت بالای یک وب سایت است ) مانند اکثر سایت های دنیای وب که کاملا رسپانسیو باشد می توانید از این ابزار استفاده کنید.

Button
بی شک ساختن دکمه با CSS امری ممکن ولی خیلی زمان بر می باشد ولی چنانچه می خواهید دکمه های رنگی آماده ای با طرح های زیبا داشته باشید این قابلیت به شما این امکان را می دهد.

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

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

Media Object
از امکانات پر استفاده و تکراری در وب می باشد که برای ساختن بخش هایی مانند نظرات،کامنت ها و... استفاده می شود.

Progress
اگر می خواهید روند موفقیت یا پیشرفت یک عملیات در سایت خود را نمایش دهید می توانید از این قابلیت استفاده کنید.

Badge
مانند Button ها با این تفاوت که Label ها را بصورت آماده در اختیارتان قرار می دهد.

چگونه می توان از بوت استرپ در پروژه های خود استفاده نمود؟
برای استفاده از بوت استرپ بطور کلی دو روش وجود دارد:
-روش اول این است که از طریق یک سند cdn، بوت استرپ را به پروژه خود معرفی و اضافه کرد.
-روش دوم این است که وارد سایت رسمی بوت استرپ شده و بوت استرپ را دانلود و به پروژه خود اضافه کرد.

پیش نیازهای یادگیری بوت استرپ چیست؟ 
همانطور که قبلا گفته ایم بوت استرپ یک فریم ورک CSS محسوب می شود.بنابراین یادگیری Html و CSS حداقل پیش نیاز یادگیری بوت استرپ می باشد ولی برخی از برنامه نویسان برای حرفه ای تر شدن یادگیری Html و CSS و البته کمی JavaScript را ملاک پیش نیاز بودن بوت استرپ می دانند.
با این تفاسیر به نظر می رسد که پیش نیاز یادگیری بوت استرپ بستگی به نحوه تدریس مدرس دارد.اگر از جاوا اسکریپت استفاده شود علاوه بر Html و CSS باید تسلط نسبی به جاوا اسکریپت داشت و اگر از جاوا اسکریپت در بوت استرپ استفاده نشود یادگیری Html  و CSS برای پیش نیاز بوت استرپ کافی است.

برای یادگیری HTML و CSS میتوانید وارد لینک ای زیر شده و این دو زبان را از سطح صفر و مقدماتی تا پیشرفته به صورت کامل و پروژه محور یاد بگیرید:
دوره جامع آموزش HTML5
دوره جامع آموزش CSS3

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

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

منبع : وب سایت آموزش برنامه نویسی آرتور

گردآورنده : یاسر شریعتی