اگر در حوزه طراحی وب فعالیت می کنید، احتمالاً نام بوت استرپ را شنیده اید. اگر هنوز نمی دانید بوت استرپ چیست یا فقط می خواهید یک آموزش بوت استرپ برای شروع بوت استرپ پیدا کنید، به جای مناسبی آمده اید.
در این مقاله قصد داریم بوت استرپ را به شما معرفی کرده و کاربرد ها، بازار کار، پیش نیاز ها و ... را در مورد بوت استرپ بررسی کنیم.
" فریمورک" یکی از اصطلاحاتی است که در حوزه طراحی وب وجود دارد.
بوت استرپ یک فریمورک است و قبل از این که وارد خود بوت استرپ شویم، بهتر است مفهوم فریمورک را درک کنید.
فریمورک و لغت به معنی "چارچوب" است و در اصطلاح برنامه نویسی مجموعه ای از کد های از پیش نوشته شده است که توسط یک شخص یا یک تیم برنامه نویسی نوشته شده و در اختیار عموم برنامه نویسان قرار داده شده است.
مثل همین بوت استرپ که توسط تیمی نوشته شده و الان در اختیار ما قرار داده شده و می توانیم از آن استفاده کنیم.
فریمورک ها با هدف راحتی توسعه و افزایش سرعت کد نویسی ارائه می شوند.
به عنوان مثال اگر شما بخواهید قابلیتی که بوت استرپ در اختیار شما قرار می گذارد را خودتان از صفر پیاده سازی کنید، هم زمان زیادی از شما می گیرد و هم حوصلتان را سر می برد.
خب گفتیم بوت استرپ یک فریمورک است و مفهوم فریمورک را هم متوجه شدیم. اما برخی از دوستان بر این باورند که بوت استرپ فریمورک نیست، بلکه یک لایبرری (کتابخانه) است. البته این موضوع را در ادامه همین مقاله شفاف سازی می کنیم و برای همین موضوع بهتر است که علاوه بر مفهوم فریمورک، مفهوم لایبرری و همچنین تفاوت فریمورک و لایبرری را بدانید.
لایبرری هم دقیقا مثل فریمورک مجموعه ای از کد های از پیش نوشته شده است که برای راحتی کار در اختیار شما قرار می گیرد.
شاید برایتان سوال باشد که تفاوت فریمورک و لایبرری چیست؟
1. هر دو با هدف راحتی کد نویسی و افزایش سرعت توسعه ارائه می شوند.
2. در یک پروژه به طور همزمان می توان از چند لایبرری استفاده کرد اما نمی توان از چند فریمورک استفاده کرد.
3. فریمورک می تواند مجموعه ای از لایبرری ها باشد و برای تشکیل شدن از چندین لایبرری استفاده کند اما یک لایبرری نمی تواند از یک فریمورک استفاده کند.
4. در مورد فریمورک، فریمورک رهبر شماست اما هنگام استفاده از لایبرری، این شما هستید که رهبر هستید.
ممکن است درک این جمله در نگاه اول سخت باشد.
زمانی که شما از فریمورک استفاده می کنید، این فریمورک است که جریان کد و نحوه پردازش و .... را تعیین می کند.
فریمورک فقط بستری برای کد نویسی به شما می دهد که کد نویسی شما آسان تر شود و این فریمورک است که تصمیم می گیرد کد های چطور و کجا اجرا شوند، نه شما.
اما هنگام استفاده از لایبرری این شما هستید که تعیین می کنید که چه زمانی و در کجا از چه ماژولی استفاده کنید.
برای درک بهتر عکس زیر را مشاهده کنید:
خب رسیدیم به اصل ماجرا.
همان طور که در قسمت مفهوم فریمورک توضیح داده شد، بوت استرپ در حالت کلی یک فریمورک محسوب می شود. چون داخل مجموعه بوت استرپ از لایبرری دیگری به اسم جی کوئری استفاده شده است.(البته این فقط یکی از دلایل است که به همین اکتفا می کنیم)
اما استفاده از جی کوئری یا جاوا اسکریپت برای برخی از کامپوننت های بوت استرپ (در قسمت بعدی مفهوم کامپوننت رو هم بهتون توضیح میدم) نیاز است؛ مثل کامپوننت Carousel.
و اما ممکن است شما اصلا به کامپوننت هایی که در آن ها جاوا اسکریپت یا جی کوئری استفاده شده است هیچ نیازی نداشته باشید و در نتیجه فایل های مربوط به جاوا اسکریپت بوت استرپ را به پروژه خودتان لینک نکنید و فقط از چندین قابلیت بوت استرپ که فقط با Css نوشته شده اند استفاده کنید. در این صورت می توان بوت استرپ را یک لایبرری تلقی کرد.
پس در کل می توان به این شکل نتیجه گیری کرد که فریمورک یا لایبرری بودن بوت استرپ به نحوه استفاده شما از آن دارد اما در حالت کلی یه فریمورک است.
علاوه بر این دلایل، داکیومنت رسمی بوت استرپ نیز این تکنولوژی را فریمورک نامیده است.
خود کلمه Bootstrap به معنی "خود راه انداز" است و بحث Bootstraping به معنی پیاده سازی یک عملکرد کاملا مستقل و بدون دخالت عوامل خارجی است. همان طور که تا اینجا متوجه شدید، بوت استرپ یک فریمورک است که برای افزایش سرعت کد نویسی شما ارائه شده است.
طبق گفته داکیومنت خود بوت استرپ، بوت استرپ در ابتدا توسط یک طراح و توسعه دهنده در توییتر ایجاد شده است اما بعد ها به یکی از محبوب ترین فریم ورک های فرانت اند و پروژه های اپن سورس (متن باز) در جهان تبدیل شد.
بوت استرپ در اواسط سال 2010 توسط Mdo و Fat در توییتر ایجاد شد. قبل از اینکه این فریمورک به یک فریمورک منبع باز تبدیل شود، به Twitter Design معروف بود.
بوت استرپ برای اولین بار در روز جمعه ، 19 آگوست 2011 به طور رسمی منتشر شد.
هدف بوت استرپ از آپدیت هایی که ارائه می دهد این است که با دستیبابی به ویژگی های جدید تر Css، وابستگی های کمتر و فناوری های جدید در مرورگر های مدرن به جامعه توسعه وب کمک کند و سرعت توسعه دهندگان و طراحی وب را افزایش دهند.
در ادامه مقاله بوت استرپ چیست به بحث کامپوننت می رسیم
اگر خیلی ساده بگویم، کامپوننت در حوزه وب به معنی قسمتی از وب سایت است. به عنوان مثال هر کدام از قسمت های یک وب سایت مثل Header، فوتر، منو و ... را می توان یک کامپوننت در نظر گرفت.
ممکن است برای شما سوال باشد که شکستن وب سایت به کامپوننت های کوچک چه مزیتی دارد؟
اگر بخواهم مثالی واضح تر بزنم می توان گفت که یک سایت فروشگاهی را در نظر بگیرید که چندین باکس محصول دارد. قطعا تمامی ظاهر و استایل محصولات یکسان است و تنها چیزی که بین آن ها متفاوت است، اطلاعات هر محصول (هر باکس) است؛ مثل عکس محصول، توضیحات محصول، قیمت و ... .
فرض کنید برای طراحی هر باکس محصول 100 خط کد نیاز باشد و ما 10 محصول در وب سایت داشته باشیم. اگر بخواهیم برای هر باکس محصول 100 خط کد بنویسیم، مجموع کد های کل باکس ها می شود 1000 خط و این کار اصولی و بهینه ای نیست.
در همچین حالتی هر باکس محصول را یک کامپوننت در نظر می گیریم و از همان یک کامپوننت که نوشته ایم 10 بار استفاده می کنیم. از مزایای کد نویسی کامپوننت بیس علاوه بر کاهش حجم سورس کد می توان به افزایش خوانایی کد، راحتی در دیباگ، سهولت در تست نویسی و ... اشاره کرد.
بوت استرپ چیست و چرا باید از آن استفاده کرد؟
بوت استرپ یک فریمورک است که از چندین فایل CSS و جاوا اسکریپت تشکیل شده است. این فریمورک (همچنین به عنوان "کتابخانه" شناخته می شود و این موضوع که بوت استرپ فریمورک است یا کتابخانه، به استفاده شما بستگی دارد) توسعه وب سایت ها را سریعتر و آسان تر می کند.
بوت استرپ به ایجاد وب سایت هایی کمک می کند که ...
سرعت توسعه:
بیش از هر چیز، بوت استرپ ظاهری یکسان و یکنواخت ارائه می دهد. شما در مدت زمان خیلی کم با تلاش بسیار کم، می توانید از بوت استرپ برای ایجاد یک وب سایت کاملا ریسپانسیو، زیبا به صورت دلخواه در حد قابل قبول برای بازار کار طراحی کنید.
ریسپانسیو:
شاید مفهوم کلمه ریسپانسیو را ندانید. اگر شما یک وب سایتی در لپتاپ خودتان طراحی کرده و آن را در یک دستگاه دیگر مثل تبلت اجرا کنید، قطعا استایل ها و ظاهر سایت شما به هم ریخته و خراب می شوند.
شما باید سایتتان را به گونه ای طراحی کنید که تقریبا در تمامی دستگاه ها مثل لپتاپ، موبایل، تبلت و ... ظاهر خود را حفظ کرده و به درستی نمایش داده شود. به همچین سایتی ریسپانسین گفته می شود.
سایت های ایجاد شده با Bootstrap به گونه ای طراحی می شوند که در هر دستگاهی از جمله دسکتاپ، لپ تاپ، تبلت و گوشی های هوشمند به خوبی دیده شده و عملکرد خوبی دارند.
بوت استرپ "Mobile First" است، به این معنی که طراحی وب سایت برای دستگاه های موبایل کوچکتر قبل از طراحی برای صفحه نمایش های بزرگتر در نظر گرفته شده است.
در بخش ریسپانسیو سازی بوت استرپ پاسخگویی براساس عرض صفحه است نه ارتفاع؛ به این معنی که تغییر استایل و ظاهر وب سایت شما بر اسای عرض نمایشگر دستگاه کاربر انجام می شود، نه ارتفاع آن. این به این دلیل است که بوت استرپ ازCSS Media Query براساس عرض استفاده می کند.
سازگار: بوت استرپ یک فریمورک آزمایش شده و کامل است که کاملاً بر اساس استاندارد ها و انطباق بین مرورگرها است. سایت هایی که به درستی از آن چه بوت استرپ ارائه می دهد استفاده می کنند نیز از این سازگاری بهره مند می شوند. وب سایت هایی که با بوت استرپ ریسپانسیو شده اند و در آن ها از کامپوننت های بوت استرپ استفاده شده است، در تمامی مرورگر ها به یک شکل نمایش داده می شوند.
البته طبق داکیومنت خود بوت استرپ، در ورژن 5 بوت استرپ از مرورگر Internet Explorer پشتیبانی نخواهد شد.
اگر هنوز هم در مورد بوت استرپ ابهامی دارید، نگران نباشید! بیایید به یک نمونه ساده از بوت استرپ نگاه کنیم.
به عنوان مثال خروجی کد زیر را تصور کنید:
<div>
<h1>Hello World</h1>
<p>There's Bootstrap 4 here.</p>
</div>
همان طور که می دانید خروجی کد بالا یک تگ h1 و یک تگ p است که به صورت پیش فرض در سمت چپ صفحه شما قرار دارند.
حالا یک class از کلاس های بوت استرپ را به تگ div نسبت می دهیم:
<div class="text-center">
<h1>Hello World</h1>
<p>There's Bootstrap 4 here.</p>
</div>
همان طور که مشاهده می کنید یک کلاس به اسم text-center به تگ div نسبت داده ایم. با اجرای این کد مشاهده خواهید کرد که محتوای تگ های h1 و p وسط چین شده اند!
بدون این که حتی یک خط کد Cssبنویسید، توانستید متن خود را وسط چین کنید.
کلاس text-center یکی از کلاس هایی است که داخل بوت استرپ تعریف شده و این کلاس را بوت استرپ در اختیار شما قرار می دهد.
به همین راحتی بوت استرپ سرعت توسعه شما را به شدت افزایش می دهد.
این یک مثال ساده برای درک بوت استرپ بود.
فرض کنید از بوت استرپ استفاده نمی کنید. باید برای وب سایت هایی با صفحات پیچیده کلاس های Css را تغییر بدید، چندین کلاس Css بنویسید و ...
اما مشکل اینجاست؛ خروجی کلاس هایی که شما پیاده سازی کردید، در تمامی مرورگر ها به یک شکل نخواهند بود و شما باید زمان زیادی برای پشتیبانی مرورگر ها صرف کنید.
از طرفی دیگر بحث ریسپانسیو کردن وب سایت است که اگر بخواهید با Css خالی این کار را انجام دهید، باید زمان بسیار بسیار زیادی برای این کار صرف کنید. علاوه بر وقت باید اعصاب خوبی نیز داشته باشید.
برای همین موارد است که بوت استرپ به این اندازه محبوب شده و یکی از معیار های اصلی فرانت اند در استخدام در شرکت های طراحی وب می باشد.
بوت استرپ فریمورکی است که با عمدتا با Css و اندکی با جاوا اسکریپت نوشته شده است.
شما قبل از شروع به یادگیری بوت استرپ باید Css را به خوبی بلد باشید.
خیلی از دوستان Css به نادیده می گیرند و به محض یادگیری چند Property ساده و بدون این که قالبی طراحی کنند وارد بوت استرپ می شوند و بعد از مدت کوتاهی به این نتایجی مثل "بوت استرپ چقدر سخت است" یا "من برای این کار ساخته نشده ام" می رسند.
پس پیشنهاد می کنم تا زمانی که فقط با Html و Css چندین قالب شیک و قابل قبولِ بازار کار طراحی نکردید به هیچ وجه وارد بوت استرپ نشوید.
خب این از Css، الان می رسیم به جاوا اسکریپت.
آیا واقعا بلد بودن جاوا اسکریپت قبل از شروع بوت استرپ ضروری است؟
همان طور که در اوایل مقاله توضیح داده شد، جاوا اسکریپت فقط در برخی از کامپوننت های بوت استرپ استفاده شده است و شما برای استفاده از این کامپوننت ها هیچ نیازی به جاوا اسکریپت ندارید اما اگر بخواهید این کامپوننت ها را کاستومایز (سفارشی سازی) کنید و تغییراتی در آن ها ایجاد کنید، باید جاوا اسکریپت بلد باشید و مسلما هر اندازه که جاوا اسکریپت را بهتر بلد باشید و بیشتر با آن کار کرده باشید به همان اندازه دستتان در کاستومایز کردن این دسته از کامپوننت ها باز تر است و به راحتی می توانید طرح مورد نظرتان را پیاده سازی کنید.
از چه منبعی یاد بگیرم؟
قبل از معرفی منبع برای بوت استرپ باید خدمتتان عرض کنم که کامل ترین منبع برای هر زبان برنامه نویسی، فریمورک، پلاگین، لایبرری و ... فقط و فقط داکیومنت خود آن تکنولوژی است.
بنا به همین موضوع کامل ترین منبع که با جزئیات کامل آموزش داده شده است، داکیومنت خود بوت استرپ است که از طریق آدرس https://getbootstrap.com میتوانید به آن دسترسی داشته و یاد بگیرید.
اما داکیومنت بوت استرپ به زبان انگلیسی می باشد و دوستانی که زبان انگلیسی را خوب بلد نیستند نمی توانند ارتباط خوبی با داکیومنت برقرار کنند. برای همین موضوع دوره های فارسی نیز برای بوت استرپ وجود دارند.
وب سایت سبزلرن یک دوره آموزش جامع بوت استرپ به صورت پروژه محور دارد که می توانید برای یادگیری در این دوره شرکت کنید.
اما این نکته را هم به یاد داشته باشید که هر منبع آموزشی را که برای یادگیری انتخاب کردید، به هیچ وقت از داکیومنت غافل نشده و حتما از داکیومنت هم استفاده کنید.
به روش های مختلفی می توان بوت استرپ را به پروژه خود اضافه کرده و از آن استفاده کرد که اینجا فقط دو مورد از روش های استفاده را مورد بررسی قرار می دهیم.
روش اول استفاده از فایل است. همان طور که فایل های style.css را به صفحه خود لینک می کردید، فایل های بوت استرپ را دانلود کرده و فایل هایشان را کنار فایل های پروژه قرار می دهید و به صفحات وب سایتتان لینک می کنید و به راحتی آن را استفاده می کنید.
روش بعدی استفاده از CDN است. CDN یک لینک اینترنتی برای همان فایل های بوت استرپ است که شما به جای آدرس لوکال، آدرس اینترنتی آن را به پروژه خود لینک می کنید و در هر بار مراجعه کاربر به سایت به جای این که بوت استرپ از هاست شما لود شود، از آدرس اینترنتی دانلود می شود.
برای اطلاعات بیشتر مقاله نصب بوت استرپ 4 را بخوانید
تقریبا تمامی مرورگر های مدرن مثل کروم، اپرا، فایرفاکس و ... از بوت استرپ پشتیبانی می کنند.
البته طبق آخرین آپدیتی که بوت استرپ ارائه کرد پشتیبانی از مرورگر IEرا حذف کرد.
شاید برایتان سوال باشد که دلیل این همه آپدیت چیست؟
اصلا جدا از بوت استرپ، یک فریمورک چرا آپدیت ارائه می دهد؟
خب برای رسیدن به پاسخ این سوال باید تغییرات موجود در ورژن های مختلف بوت استرپ را نسبت به همدیگر بررسی کرد.
هر فریمورک در هر بار آپدیت سعی می کند نسبت به ورژن قبلی خود قابلیت های بهتر و جدید تری ارائه دهد.
در همین راستا بوت استرپ در ورژن 4 خود از لایبرری جی کوئری استفاده می کرد اما در ورژن 5 با هدف کاهش حجم و افزایش پرفورمنس وب سایت حذف کرد.
از دیگر تغییرات بوت استرپ در آپدیت شدن به ورژن 4 می توان به کد نویسی Sassدر هسته بوت استرپ اشاره کرد. در کل هر فریمورک در هر آپدیت با حذف کردن امکاناتی از ورژن قبلی و اضافه کردن امکاناتی به ورژن جدید سعی می کند به پرفورمنس بهتری برسد.
به هیچ وجه نمی توان بازار کار را فقط برای بوت استرپ تعریف کرد و در مورد بازار کار بوت استرپ صحبت کرد.
چون فقط با بوت استرپ نمی توان سایت تقریبا کامل و قابل قبولِ بازار کار را پیاده سازی کرد.
اینطور می توان گفت که تقریبا هیچ شرکتی شما را فقط برای بوت استرپ استخدام نمی کند و بعد از بوت استرپ باید گام های بعدی توسعه وب را نیز یاد بگیرید تا موقعیت های شغلی زیادی را برای انتخاب داشته باشید.
البته علاوه بر استخدام شدن راه های دیگری نیز برای کسب درآمد وجود دارند.
به عنوان مثال شما می توانید قالب های استاتیک مختلفی را با طراحی کرده و در سایت های فروش قالب مثل ژاکت و راستچین قرار داده و از فروش آن ها کسب درآمد کنید.
همچنین می توانید در به صورت حضوری یا مجازی به تدریس بوت استرپ بپردازید و روش دیگری که برای کسب درآمد وجود دارد فریلنسری است. شما می توانید با فعالیت در شبکه های مجازی و سایت های فریلنسری ایرانی و خارجی مثل پارس کدرز، کارلنسر، فریلنسر و ... پروژه های مختلفی را دریافت کرده و از انجام آن ها کسب درآمد کنید.
جواب این سوال مثبت است و فریمورک های دیگری نیز وجود دارند که برای ریسپانسیو سازی صفحات وب استفاده می شوند و دقیقا مثل بوت استرپ کامپوننت ها و امکانات کاربردی در اختیار شما قرار می دهند.
شما باید با توجه به معیار های خودتان انتخاب کنید. هیچ کدام از فریمورک های رقیب عالی یا مضخرف نیستند و هر کدام از آن ها بر اساس معیاری نسبت به رقیب خود بالا تر یا پایین تر هستند.
شما می توانید به جای بوت استرپ از فریمورک هایی مثل فاندیشن، تیلویند، بولما و ... استفاده کنید اما اگر معیار شما محبوبیت، بازار کار و جامعه آماری است، پیشنهاد می کنم بوت استرپ را برای گرید بندری انتخاب کنید.
در این مقاله سعی کردم در مورد بوت استرپ چیست صحبت کنم و اطلاعاتی در مورد این فریمورک محبوب به شما ارائه دهم.
تنها پیشنهادی که در مورد شروع بوت استرپ دارم این است که قبل از این که بخواید وارد بوت استرپ شوید، Css را به خوبی یاد بگیرید و با Html و Cssچندین قالب شیک، جذاب و قابل قبول برای بازار کار طراحی کنید و زمانی که مطمئن شدید روی Css تسلط دارید و همچنین جاوا اسکریپت را یاد گرفتید وارد بوت استرپ شوید.(در مورد اندازه نیاز جاوا اسکریپت برای شروع بوت استرپ بالا تر توضیح داده شده است.)
امیدوارم این مقاله برای شما مفید واقع شده باشد.
تا یک مقاله دیگر خدانگهدار.
