بوت استرپ

دسته بندی: برنامه نویس یار

بروزرسانی شده در 3 اسفند 1400

فریم ورک بوت استرپ چیست؟

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

تعریف بوت استرپ به زبان ساده

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

منشا کلمه بوت استرپ چیست؟

مستقل از مباحث توسعه وب و موارد مرتبط با آن، کلمه Bootstrap در لغت به معنی «خود راه انداز» است. از سوی دیگر، کلمه Bootstrapping یعنی فرآیندی که به صورت مستقل و بدون استفاده از عوامل خارجی به کار خود ادامه می‌دهد. در علم کامپیوتر، از مفهوم بوت استرپ با نام Booting یاد می‌شود که به فرآیند راه‌اندازی سیستم و بارگذاری اطلاعات اولیه نرم‌افزار در حافظه کامپیوتر اشاره دارد. به زبانه کوچکی که معمولاً در انتهای کفش تعبیه شده است نیز Bootstrap گفته می‌شود. در پاسخ به سوال «بوت استرپ چیست» به این نکته اشاره شد که Bootstrap برای برنامه نویسی وب به صورت واکنش‌گرا استفاده می‌شود. در اینجا این سوال به وجود می‌آید که توسعه وب واکنش‌گرا چیست؟ بنابراین در ادامه این مقاله، به این موضوع پرداخته شده است.

توسعه وب واکنش گرا چیست؟

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

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

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

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

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

• جاوا اسکریپت: جاوا اسکریپت (JavaScript) یا همان JS، یک زبان سطح بالای تفسیری (Interpreted) است که با استفاده از آن می‌توان صفحات وب تعامل‌پذیر ساخت. امروزه اکثر وب‌سایت‌ها از این زبان برنامه نویسی به همراه HTML و CSS به عنوان سه فناوری اساسی تشکیل‌دهنده وب استفاده می‌کنند.
• HTML :HTML برگرفته از عبارت «Hypertext Markup Language» است و به عنوان زبان نشانه‌گذاری استفاده می‌شود. معمولا صفحات وب شامل متن‌ها، عکس‌ها و بخش‌های مختلفی هستند که می‌توان با کمک تگ‌ها و کدهای HTML یک ساختار مشخص برای این صفحات وب ایجاد کرد.
• CSS : CSS از عبارت «استایل‌شیت‌های آبشاری» (Cascading Style Sheets) برگرفته شده است و با استفاده از آن می‌توان ظاهر مناسبی برای صفحه‌های وب ایجاد کرد. در واقع صفحه‌آرایی، استایل‌دهی و زیباسازی صفحات وب به عنوان کاربردهای CSS به حساب می‌آیند.

ویژگی های بوت استرپ

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

همچنین، بوت استرپ حاوی چندین کامپوننت جاوا اسکریپت در قالب افزونه‌های jQuery است که با استفاده از آن‌ها، المان‌های رابط کاربری همچون کادرهای محاوره‌ای (Dialog Boxes)، راهنمای یک خطی (Tooltip) و اسلایدهای Carousel فراهم می‌شوند. هر کدام از اجزای Bootstrap شامل یک ساختار HTML، تعریف‌ها (Declarations) و همچنین گاهی همراه با کدهای جاوا اسکریپت هستند. علاوه بر این، اجزای بوت استرپ قابلیت‌های برخی از المان‌های رابط‌ کاربری موجود را نیز گسترش می‌دهند و یکی از مثال‌های آن، تکمیل خودکار تابع برای فیلدهای ورودی است.

چرا Layout Components یکی از مهم‌ترین اجزا Bootstrap است؟

با توجه به اینکه اجزای مربوط به طرح (Layout) روی تمام صفحات وب اثر می‌گذارند، این اجزا یکی از برجسته‌ترین اجزای Bootstrap به حساب می‌آیند. جز اصلی Layout با نام «Container» یعنی نگه‌دارنده یا محفظه شناخته می‌شود و علت این نام‌گذاری این است که تمام دیگر المان‌های صفحات وب، داخل Container قرار می‌گیرند. توسعه‌دهندگان برای صفحات وب می‌توانند از کانتینرهای عرض ثابت (Fixed-Width) یا عرض متغیر (Fluid-Width) استفاده کنند. در صورتی که از Containerهای عرض متغیر استفاده شود، محتوای صفحات وب تمام عرض آن را پر می‌کند. از سوی دیگر، با انتخاب Containerهای عرض ثابت، توسعه‌دهندگان می‌توانند با توجه به اندازه صفحه نمایش، از میان پنج اندازه ثابت یکی از آن‌ها را انتخاب کنند.

در ادامه، هر یک از این اندازه‌های ثابت، فهرست شده‌اند:

• کوچک‌تر از ۵۷۶ پیکسل
• ۵۷۶ تا ۷۶۸ پیکسل
• ۷۶۸ تا ۹۹۲ پیکسل
• ۹۹۲ تا ۱۲۰۰ پیکسل
• بزرگ‌تر از ۱۲۰۰ پیکسل

مزایای استفاده از Bootstrap

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

• کاهش خطاهای مربوط به مرورگر
• ارائه یک فریم ورک سازگار با قابلیت پشتیبانی از اکثر مرورگرها و همچنین رفع سازش‌پذیری CSS
• قابلیت سفارشی‌سازی و دارای حجم کم
• ایجاد ساختار و ظاهر واکنش‌گرا
• ارائه چندین افزونه جاوا اسکریپت با به کارگیری jQuery
• پشتیبانی و مستندات مناسب
• امکان دسترسی به قالب‌ها، تم‌های (Themes) وردپرس و افزونه‌ها به صورت حرفه‌ای و رایگان
• سیستم ستون‌بندی (Grid System) مطلوب

معایب Bootstrap

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

jQuery

jQuery یکی از کتابخانه‌های کلیدی جاوا اسکریپت به حساب می‌آید. اما، پشتیبانی از jQuery در نسخه‌ پنجم بوت استرپ متوقف شده است که این مسئله لزوماً یک نقطه قوت محسوب نمی‌شود. می‌توان عدم انطباق و ناسازگاری HTML را نیز از دیگر معایب بوت استرپ برشمرد. تا این بخش از مقاله «فریم ورک بوت استرپ چیست ؟» این فریم ورک، ویژگی‌ها و همچنین مزایا و معایب استفاده از آن شرح داده شده است. حال در بخش بعدی، برخی از دوره‌های آموزشی مرتبط با برنامه نویسی وب به صورت مختصر معرفی می‌شوند. این دوره‌ها برای افرادی مناسب است که قصد دارند برنامه نویسی وب را به صورت جامع و در عین حال به زبان ساده فرا بگیرند.

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

بوت استرپ پرطرفدارترین فریم ورک برای ایجاد Layoutها به حساب می‌آید. عملکرد CSS در این فریم ورک جذاب، به صورت واکنش‌گرا است. به گونه‌ای که به راحتی با تلفن همراه، تبلت و کامپیوتر تطبیق پیدا می‌کند. فریم ورک Bootstrap از طراحی First-Mobile پشتیبانی می‌کند و با انواع مرورگرها مثل فایرفاکس، کروم، Opera و سایر موارد سازگاری دارد. فریم ورک بوت استرپ به خوبی پشتیبانی می‌شود و افراد می‌توانند با مشارکت همگانی در خصوص استفاده از Bootstrap با یکدیگر تعامل داشته باشند.

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

چگونه از Bootstrap استفاده کنیم ؟

با مراجعه به سایت رسمی Bootstrap می‌توان آخرین نسخه آن را دانلود کرد. در هنگام دانلود بوت استرپ چند گزینه پیش رو است:

• دانلود فایل بوت استرپ: در این حالت CSS، جاوا اسکریپت و فونت‌ها کامپایل و کوچک‌سازی شده‌اند، اما این گزینه شامل هیچگونه سند یا فایل منبع اصلی نیست.
• دانلود سورس کد: فایل‌های منبع پیش‌پردازنده Less، جاوا اسکریپت و فونت‌ها به همراه اسناد در این روش وجود دارند. در این گزینه به کامپایلر پیش‌پردازنده Less و برخی تنظیمات دیگر نیاز است.
• دانلود نسخه Sass: بوت استرپ از پیش‌پردازنده Less به Sass منتقل شده است تا به راحتی در پروژه‌های Rails ،Compass یا پروژه‌های مختص به Sass قرار بگیرند. Sass یک زبان اسکریپت‌نویسی پیش‌پردازنده است که به کدهای CSS تفسیر و کامپایل می‌شود. Sass تعمیمی از CSS به حساب می‌آید که با کمک آن می‌توان فرآیند استایل‌دهی را راحت‌تر و با سرعت بیشتری انجام داد.

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

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

چگونه Bootstrap را دانلود کنیم ؟

دانلود بوت استرپ به دو صورت امکان‌پذیر است که در روش اول از فایل‌ها و دایرکتوری‌های بوت استرپ پیش کامپایل شده (Precompiled Bootstrap) و در روش دوم، از کد منبع بوت استرپ (Bootstrap Source Code) استفاده می‌شود. در هر یک از روش‌ها، منابع رایج به صورت منطقی گروه‌بندی و همچنین نسخه‌های کوچک‌شده و کامپایل شده ارائه شده‌اند. در ادامه، هر یک از این روش‌ها شرح داده می‌شوند.