بوت استرپ چیست

بوت استرپ چیست و چرا باید از بوت استرپ استفاده کنید ؟ بوت استرپ از جهت رسپانسیو کردن ( ایجاد طراحی واکنشگرا برای قالب سایت ) حائز اهمیت می‌شود . با اینکه بوت استرپ یک فریمورک ( Framework ) است و قبل از پیدایش بوت استرپ نیز امکان واکنشگرا کردن سایت‌ها توسط دستورات مدیا ( media ) در CSS وجود داشت اما درحال حاضر باتوجه به وجود Framework هایی همچون بوت استرپ و TailwindCss که از محبوب‌ترین فریمورک‌های طراحی هستند ، برای رسپانسیو کردن قالب وب سایت‌ها مسیر هموارتری داریم .

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

همانطور که ممکن است اطلاع داشته باشید ، از زبان طراحی CSS جهت طرح بندی ( Layout ) و همچنین نمایش ساختار نهایی در طراحی صفحات سایت استفاده می کنیم . زبان طراحی CSS امکانات فوق العاده‌ای را در اختیار طراح قرار می‌دهد . لذا می توانید با کدنویسی توسط CSS تمامی بخش‌های یک سایت را از نظر نمایشی کنترل کنید و این امری واضح است .

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

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

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

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

بوت استرپ چه اندازه شما را در طراحی حرفه‌ای خواهد کرد ؟

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

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

اگر تصمیم بر این باشد که تمامی این دستورات را با media بنویسیم نیاز به میزان زیادی کد داریم . دراین حالت وجود کدهایی که به طراح کمک کند تا این پروسه را راحت‌تر انجام دهد بیشتر احساس می‌شود . اما چقدر خوب بود اگر می‌توانستیم تنها با اعمال کردن نام یک کلاس ( class ) به تگ‌های HTML داخل صفحه ، حالت‌های نمایشی مختلف برای نمایش مناسب المان‌های سایت ، نه تنها در یک دستگاه بلکه تمامی دستگاه‌ها را بخوبی تنظیم کنیم ! در بوت استرپ و سایر فریمورک‌های طراحی مربوط به CSS ، دقیقا همین امر محقق شده است .

فریمورک بوت استرپ از دو فایل اصلی که یک فایل Css برای اعمال کلاس‌های این فریمورک است و یک فایل Js ( جاوا اسکریپتی ) که به مظور فعال کردن المانهایی همچون اسلایدر ، تب و … است تشکیل شده است .

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

تیم بوت استرپ به هرنوعی سعی دارد تا پروسه طراحی سایت را برای طراحان ساده‌تر کند . یکی از ویژگی‌هایی که در نسخه 3 بوت استرپ بسیار مسبب محبوبیت شد ، آیکون‌هایی بودند که با نام Glyphicon توسط بوت استرپ ارائه شده بودند . این آیکون‌ها تعداد زیادی نداشتند اما با این وجود باتوجه به سالی که نسخه 3 بوت استرپ ارائه شده بود ، بسیار تاثیرگذار محسوب می‌شدند .

از آنجایی که در آن زمان تعداد مراجع ارائه کننده فونت آیکون همچون Fontawesome و … زیاد نبودند ، این آیکون‌ها یک ویژگی شاخص بودند . بوت استرپ در نسخه 4 این آیکون‌ها را حذف کرد اما تغییرات قابل توجهی را در ساختار هسته خود همچون افزودن Flex و Grid انجام داد . در نسخه 5 مجدد آیکون‌هایی را با ساختاری بهتر و تعدد بسیار بیشتر تحت عنوان Bootstrap icons ارائه کرد . این آیکون‌ها سبب شدند تا درگیری طراح نسبت به گشتن و پیداکردن کتابخانه آیکون مجزا بسیار کمتر شده و سرعت کار افزایش پیدا کند .

همچنین در نسخه 5 بوت استرپ ، حتی نیازمندی به جی کوئری نیز جهت اجرای فایل JS اصلی بوت استرپ از میان برداشته شده است . می‌توانید درصورت استفاده نکردن از دستورات اختصاصی یا سایر کتابخانه‌های جی کوئری ، تنها با افزودن یک فایل با پسوند js از بوت استرپ ، المان‌هایی همچون اسلایدر و آکاردئون و … را براحتی داشته باشید .

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

فریمورک بوت استرپ را کافیست با مراجعه به سایت GetBootstrap دانلود نموده و از داخل آن دو فایل اشاره شده در بالا را داخل پروژه خود قرار دهید و سپس آنها را به صفحات وب خود معرفی کنید تا بتوانید از دستوراتی که داخل فایل Css و JS این فریمورک تنظیم شده است استفاده کنید .

<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>

همانطور که در نمونه کد بالا نمایش داده شده است ، می‌توانید دو فابل مربوط به فریمورک بوت استرپ را داخل فایل‌های HTML سایت خود اضافه نمائید .

پس از اضافه شدن کلیت Bootstrap به سایت ، کار بسیار راحت‌تر می‌شود . اگر فایل Css مربوط به این فریمورک که نام آن bootstrap.css یا bootstrap.min.css است را باز کنید ، خواهید دید که همانند فایل‌های Css که خودتان تاکنون کد می‌زدید ، تعداد زیادی کلاس وجود دارد که این کلاس‌ها از قبل برای شما آماده شده و شما کافیست نحوه استفاده از هریک را یاد گرفته و در محل‌های مورد نیاز ، از کلاس مناسب برای تگ HTML استفاده کنید . برای مثال :

<div class="bg-dark border rounded p-5 w-100"></div>

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

مدت زمان لازم برای یادگیری بوت استرپ

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

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

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

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

در انتهای مقاله بد نیست تا به چند سئوال مهم در مورد این فریمورک پاسخ دهیم !

سوالات متداول در رابطه با فریمورک Bootstrap

_____ شاید برخی دوستان از ما سوال کنند که بوت استرپ از کجا آمد ؟

احتمال دارد داخل برخی وب سایت‌ها در کنار نام بوت استرپ کلمه توئیتر را نیز مشاهده نمائید . این نام به این دلیل است که سیستم بوت استرپ در ابتدا برای وب سایت توئیتر طراحی شده بود . در سال 2011 بوت استرپ به شکل رسمی و بصورت متن باز در اختیار دیگر طراحان نیز قرار گرفت تا این طراحان وب سایت هم بتوانند از این سیستم قدرتمند استفاده کنند .

این فریم ورک در نسخه های 2 ، برای اندازه‌های خود در سیستم Layout با واحد پیکسل کار می‌کرد که این سیستم واقعا مشکل ساز بود . در نسخه های 3 بوت استرپ ، اندازه‌ها تماما به صورت درصدی تغییر کرد که هم اکنون و در نسخه فعلی نیز به شکل درصدی است .

بدین معنی که اندازه تمامی المان‌های داخل صفحه با درصد خاصی نسبت به عرض صفحه تنظیم می‌شوند . نسخه 3 بوت استرپ از Float ها استفاده می‌کرد اما از نسخه 4 به بعد ، بوت استرپ سیستم Flex را پیاده کرد تا هرچه بهتر در این زمینه بتوان با سیستم ستون بندی در صفحات کار کرد .

_____ یکی دیگر ازسوالات ممکن است این باشد که اگر بوت استرپ رایگان است پس درآمد آنها از کجاست ؟

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

_____ یکی دیگر از سولات ممکن است این باشد که آیا بدون یادگیری زبان طراحی Css ، می‌توان بوت استرپ را یاد گرفت ؟

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

_____ آیا باید Bootstrap را نصب کرد ؟ روش نصب خاصی دارد ؟

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

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

امید قدیمی هستم ، 8 سال است که در زمینه طراحی و برنامه نویسی وب سایت فعالیت می کنم . توسعه دهنده فرانت اند ، طراح و برنامه نویس انواع وب سایت های وردپرسی ، فعال در زمینه تولید محتوا و سئو وب سایت

اشتراک گذاری محتوا