اگه در حال یادگیری طراحی سایت هستی، حتما بارها و بارها اسم بوت استرپ به گوشت (??) خورده. از اونجایی که این یه بحث پرکاربرد برای هر طراح سایتی هست، تصمیم دارم توی این پست آموزشی به طور کامل بررسیش کنم و بهتون بگم چطور می‌تونید ازش استفاده کنید، پس با من همراه باشید?.
سلام دوستان!! امیدوارم خوب باشید و پر انرژی?. یه چند روزی بود که توی نوشتن آموزش‌های جدید تنبلی می‌کردم، البته تنبلی که نه، درواقع خیلی مشغول بودم و وقت نمیشد بنویسم اما امروز نشستم تا یه پست آموزشی خوب و کامل و جامع درباره یه فریمورک معروف و خوش آوازه، آماده کنم. پس تا آخر این پست با من همراه باشید?.
بوت استرپ چیه؟!
قبل از اینکه بخوام بگم بوت استرپ چه توانایی‌هایی داره و چه کارایی میشه باهاش انجام داد، بهتره که اول خیلی سریع و خلاصه بگیم بوت استرپ چیه. نمیخوام با توضیحات پیچیده و قلمبه سلمبه درگیرتون کنم. بنابراین با یه مثال خیلی ساده بهتون توضیح میدم.
وقتی درحال طراحی یه صفحه وب هستید، المان‌های زیادی توی صفحه هستن که به کدهای Css مثل: رنگ، سایز فونت، رنگ پس زمینه و… نیاز دارن. استایل‌هایی که یک المان قبول میکنه با المان دیگه فرق داره. مثلا استایل‌های یه دکمه با استایل‌های یه عکس متفاوته.
بوت استرپ درواقع چیزی نیست به جز یه فایل Css و یه فایل JS (جاوا اسکریپت) که یه سری کدهای Css و JS توی اون هست و اگه شما این فایل‌ها رو کنار پروژه‌تون قرار بدید نیاز نیست زحمت نوشتن کدهای Css و JS رو به خودتون بدید. مثلا دکمه ok توی اکثر سایت ها سبز رنگه و سایز مشخصی داره. به جای اینکه خودتون زحمت بکشید و این استایل ها رو به دکمه اعمال کنید می‌تونید از استایل‌های آماده کمک بگیرید و زحمت خودتون رو کم کنید. به همین راحتی?.
چرا بوت استرپ؟!
تا اینجای کار متوجه شدیم بوت استرپ چیه و به چه دردی میخوره؟. سوال بعدی اینه که چرا از این فریمورک استفاده کنیم و آیا جایگزینی برای اون وجود داره؟
در جواب باید بگم بوت استرپ به این دلیل استفاده میشه که کار ما رو به عنوان طراح سایت خیلی کم میکنه. به جای اینکه خودتون وقت بذارید و کلی استایل Css بنویسید می‌تونید از استایل‌های آماده و از قبل نوشته شده استفاده کنید. دلیل دیگه امکانات زیادی هست که این فریمورک در اختیارتون میذاره. برای مثال طراحی یه سایت ریسپانسیو به کمک بوت استرپ به مراتب راحت تر از اینه که به کمک مدیا کوئری سایتتون رو ریسپانسیو کنید. درواقع خیلی از کدهای آماده این فریمورک رو اگر بخوایم خودمون از صفر پیاده‌سازی کنیم، کارمون سخت میشه. علاوه بر همه اینها، بوت استرپ توسط طراحای سایت زیادی در سراسر دنیا استفاده میشه. بنابراین وقتی ما از بوت استرپ استفاده می‌کنیم یه سری استانداردها که در سایت‌های زیادی درحال استفاده هست رو رعایت می‌کنیم و این مقبولیت طرح ما رو افزایش میده.
در رابطه با جایگزین بوت استرپ هم باید بگم، البته که جایگزین‌هایی وجود داره اما از اونجا که مقبولیت بوت استرپ زیاده و طراحای زیادی ازش استفاده میکنن، جامعه آماری بزرگتری داره. این موضوع باعث میشه که یادگیری و کمک گرفتن از طراحای دیگه و همچنین تعامل با طراحی دیران برای ما راحت تر بشه.
چطور استفاده کنم؟
برای استفاده از این فریمورک کافیه وارد این سایت بشید. بعد از ورود به این سایت چنین صفحه‌ای می‌بینید.
اگه توی این صفحه روی دانلود کلیک کنید می‌تونید فایل‌های Css و JS رو دانلود کنید. حالا می‌تونید به راحتی فایل Css و JS رو به پروژه‌تون لینک کنید. اگه طریقه لینک کردن فایل Css و JS به پروژه رو بلد نیستید، می‌تونید این آموزش رو ببینید. وقتی فایل‌ها به پروژه اضافه شدن، کافیه از کلاس مربوط به هر المان، استفاده کنید.
برای مثال اگه بخوایم یه دکمه رو به کمک بوت استرپ استایل دهی کنیم، داریم:
<button type="button" class="btn btn-success">Success</button>خروجی این تکه کد یه دکمه با شکل و شمایل زیر هست:
? نکته مهم: یکی از نکته‌های مهمی که باید بدونید اینه که حتما اون فایلی رو به پروژه لینک کنید که توی اسمش min- داره. این فایل فشرده است و باعث میشه سرعت سایتتون بالاتر بره.
? نکته مهم 2: شما می‌تونید بدون دانلود فایل‌های Css و JS بوت استرپ و تنها با لینک دادن به این فایل‌ها در سایت اصلی، از بوت استرپ توی پروژه‌هاتون استفاده کنید (اصطلاحا از cdn استفاده کنید). اما این کار انتخاب چندان مناسبی نیست و بهتره که حتما فایل‌ها رو دانلود و به پروژه‌تون لینک کنید. اما چرا؟
جواب اینه که وقتی فریمورک بوت استرپ به روزرسانی میشه ممکنه تغییراتی در استایل‌ها یا کدهای جاوا اسکریپت بده. دراینصورت اگه شما به سایت اصلی وصل باشید (روش cdn)، اونوقت سایت شما هم اتوماتیک تغییر میکنه. این تغییرات ممکنه باعث به هم ریختگی ظاهر و عملکرد سایتتون بشه. به همین دلیل بهتره همیشه از همین روشی که اینجا گفتم، یعنی دانلود فایل‌ها و لینک کردن اونا به پروژه‌تون استفاده کنید.
سخن آخر:
توی این مطلب bootstrap و نحوه استفاده از اون رو توضیح دادم. مسلما که این فریمورک خیلی فراتر از اینهاست و میشه خیلی مفصل‌تر اون رو آموزش داد. توی پست‌های آموزشی بعدی سعی میکنم بیشتر با این فریمورک آشناتون کنم. امیدوارم این مطلب براتون مفید بوده باشه و به کارتون بیاد?.
