Bootstrap چیست؟ | راهنمای مبتدی

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

Bootstrap چیست؟

می‌دانیم که Bootstrap مفید است، اما برای چه استفاده می‌شود و چگونه به توسعه‌دهندگان وب کمک می‌کند؟ جعبه ابزار توسعه برنامه وب توسط کارمندان سابق توییتر، مارک اتو و جیکوب تورنتون (در عکس زیر) ایجاد شده است.

وب سایت رسمی Bootstrap این ابزار را این‌گونه تعریف می‌کند:

محبوب‌ترین فریم‌ورک HTML، CSS، و JS برای توسعه پروژه‌های Responsive و Mobile-first در وب.

در اینجا آن را ساده‌تر تعریف می‌کنیم:

Bootstrap مجموعه‌ای غول‌پیکر از بیت‌های کد مفید و قابل استفاده مجدد است که در HTML، CSS و جاوا اسکریپت نوشته شده اند. همچنین یک چارچوب توسعه frontend است که به توسعه‌دهندگان و طراحان این امکان را می‌دهد تا به سرعت وب سایت‌های کاملاً Responsive بسازند.

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

این ابزار همچنین رایگان است!

Bootstrap در حال حاضر در GitHub میزبانی شده است و می توان آن را به راحتی از سایت رسمی‌اش دانلود کرد.

اکنون که می‌دانیم این ابزار چیست، بیایید نگاهی دقیق‌تر به آن بیندازیم تا ببینیم آیا برای کار توسعه وب‌تان مفید است یا خیر.

• چرا Bootstrap توسط توسعه‌دهندگان وب مورد استفاده قرار می‌گیرد؟
• چرا ممکن است از Bootstrap اجتناب کنید؟
• جمع‌بندی

چرا Bootstrap توسط توسعه دهندگان وب مورد استفاده قرار می گیرد؟

بیایید مزایای این ابزار را به هشت قسمت تقسیم کنیم:

 Responsive grid

دیگر نیازی به صرف ساعت‌ها زمان برای کدنویسی شبکه نیست، چرا که Bootstrap با سیستم Grid از پیش تعریف شده خود ارائه می‌شود.

اکنون می توانید Container های خود را مستقیماً با محتوا پر کنید.

تعیین Breakpoint های سفارشی برای هر ستون با استفاده از Break های خیلی کوچک، کوچک، متوسط، بزرگ و فوق العاده بزرگ در آن‌ها، یک ضربه فوری است. همچنین می‌توانید به سادگی به تنظیمات پیش‌فرض پایبند باشید چرا که ممکن است همان‌ها نیازهای سایت شما را برآورده کند.

تصاویر Responsive

Bootstrap کد مخصوص به خود را برای تغییر اندازه خودکار تصاویر بر اساس اندازه فعلی صفحه ارائه می‌کند. فقط کلاس .img-responsive را به تصاویر خود اضافه کنید و قوانین CSS از پیش تعریف شده بقیه کارها را انجام می‌دهد.

پس اجازه دهید Bootstrap تصاویر خود را برای شما تغییر اندازه دهد!

این ابزار حتی می تواند شکل تصاویر شما را با اضافه کردن کلاس‌هایی مانند img-circle و img-rounded تغییر دهد، و این کار را بدون رفت و برگشت بین کد و نرم افزار طراحی شما انجام می‌دهد.

اجزای آن

Bootstrap با تعداد زیادی از اجزا (Components) ارائه می‌شود که به راحتی می‌توانید آن‌ها را در صفحه وب خود قرار دهید، از جمله:

• نوارهای ناوبری (Navigation bars)
• کشویی (Dropdowns)
• نوارهای پیشرفت (Progress bars)
• ریز عکس‌ها (Thumbnails)

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

برای دریافت یک لیست کامل‌تر از ویژگی‌های قابل افزودن، می‌توانید مستندات این اجزا را بررسی کنید.

 JavaScript

این توابع هنوز کافی نیستند؟ JQuery را امتحان کنید!

Bootstrap همچنین به توسعه‌دهندگان این امکان را می‌دهد که از بیش از دوازده پلاگین سفارشی JQuery استفاده کنند.

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

مستندات (Documentation)

مستندات Bootstrap یکی از بهترین مواردی است که تا به حال دیده‌ایم. هر قطعه کد با جزئیات واضح در وب سایت آن‌ها توضیح داده شده است.

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

قابلیت شخصی سازی

یکی از انتقادات اصلی که به فریم‌ورک‌هایی مانند Bootstrap وارد است، اندازه آنها است. سنگین بودن آن‌ها می‌تواند باعث شود که اولین لودینگ برنامه شما کند شود. به عنوان مثال، نسخه فعلی فایل CSS Bootstrap، 119 کیلوبایت است. این ممکن است در مقایسه با فایل‌های تصویری و ویدئویی چندان بزرگ به نظر نرسد، برای یک فایل CSS، این حجم بسیار زیاد است!

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

سفارشی سازی در Bootstrap یک امر کلیدی است!

جامعه کاربری

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

Bootstrap یک صفحه توییتر فعال، یک وبلاگ Bootstrap و حتی یک اتاق اسلک اختصاصی دارد. و این حتی به تعداد توسعه دهندگانی که مایل به کمک به مشکلات فنی در Stack Overflow هستند، نمی رسد، جایی که همه سؤالات را می توان در برچسب bootstrap-4 یافت.

قالب‌های خارجی

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

در اینجا فقط چند مورد از آن‌ها را نام می‌بریم:

• 1- قالب‌های Bootstrap W3Schools

• 2- قالب‌های Start Bootstrap

• 3- قالب‌های Wrap Bootstrap

چرا ممکن است از Bootstrap اجتناب کنید؟

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

بیایید نگاهی گذرا به برخی از شکایات رایجی که ممکن است در مورد Bootstrap بشنوید بیاندازیم:

“Syntax آن گیج کننده است!”

قبل از اینکه با Bootstrap آشنا شوید، ممکن است Syntax آن برایتان گیج کننده باشد. به عنوان مثال، هنگام استفاده از سیستم Grid، برای ایجاد ستونی که یک سوم صفحه را اشغال می کند، باید کلاس .col-md-4 را به آن اضافه کنید.

“صبر کن – 4؟ این 4 از کجا اومده؟!“

بدون شک، عدد 4 ممکن است شما را به این باور برساند که این ستون یک چهارم صفحه را اشغال می کند – نه یک سوم. در حالی که Syntax بالا کاملاً درست و منطقی است (Bootstrap از یک سیستم 12 ستونی استفاده می کند و 4 یک سوم از 12 است)، این می‌تواند برای افراد مبتدی، تا حدی غیرمعمول باشد.

“فایل‌های آن خیلی بزرگ هستند!”

همانطور که قبلا ذکر شد، فایل‌های Bootstrap ممکن است کمی بزرگ باشند تا بتوانند تابع‌پذیری مستقیم ارائه شده توسط فریم‌ورک آن را پوشش دهند. این می‌تواند منجر به افزایش زمان لودینگ برای وب سایت‌ها، به ویژه در شبکه‌های کندتر شود.

شناسایی و رفع این مشکل، ممکن است برای مبتدیان دشوار باشد. با این حال، همان‌طور که در بالا ذکر شد، ابزار سفارشی سازی در وب سایت Bootstrap می‌تواند به حذف هرگونه کد غیر ضروری، برای عملکردهایی که هرگز استفاده نمی‌کنید، کمک کند.

بنابراین آن را به روش خود انجام دهید – فقط قطعات مورد نیاز خود را انتخاب کنید و بقیه را رها کنید. (البته هر چه بیشتر در مورد کدنویسی بدانید این کار آسان‌تر می شود!)

“این باعث می‌شود که من نتوانم کدنویسی یاد بگیرم!”

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

جمع‌بندی

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

Bootstrap بسیار محبوب است و برای ساخت برخی از وب سایت‌های عالی استفاده شده است. باور نمی کنید؟ وب سایت MongoDB، وب سایت ناسا یا حتی فیفا را بررسی کنید.

منبع: careerfoundry