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

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

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

شروع کار با بوت استرپ

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

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

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

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

این فریمورک دربردارنده صدها عنصر مختلف است که می‌تواند در وب سایت شما مورد استفاده قرار بگیرد. ضمن اینکه تمامی این عناصر، کاملا واکنش‌گرا (responsive) هستند. از جمله این عناصر می‌توان به یک سیستم گرید، دکمه‌ها، فرم‌ها، پنل‌ها، ناوبری و عناصر بسیار دیگری اشاره نمود.

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

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

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

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

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

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

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

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

نحوه شروع کار با بوت استرپ به چه صورت می‌باشد؟

می توانید بوت استرپ را از طریق یک CDN (شبکه ی تحویل محتوا) به سایت خود اضافه کنید. در این روش به جای دانلود کردن فایل های بوت استرپ، سایت شما این فایل‌ها را از سایت MaxCDN دریافت می‌کند. این سایت حاوی آخرین نسخه css، کتابخانه جی‌کوئری و فایل‌های جاوا‌اسکریپت بوت استرپ می‌باشد.

اولین کاری که باید انجام دهید این است که بعد از دانلود و اکسترکت کردن بوت استرپ در ریشه سایت خود، کد زیر را به بخش هد <head> وب سایتتان اضافه کنید.

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

در مرحله بعد، باید کد زیر را به انتهای کد های وبسایتتان یعنی در بخش فوتر و قبل از بسته شدن تگ <body> اضافه کنید.

مجددا اگر با جاوا اسکریپت و جی کوئری کار کرده باشید می‌دانید که اسکریپت بالا هم برای اضافه کردن یک فایل جاوااسکریپت به کار میرود.

هر دو فایل bootstrap.min.css و bootstrap.min.js کامپایل شده و اندازه بسیار کمی دارند لذا منجر به صرفه جویی در پهنای باند شما می‌شوند.

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

صفحه بعد >>