Bootstrap چیست و چه کاربردی دارد؟

چند سالی است که Bootstrap به ابزاری اساسی برای توسعه دهندگان frontend تبدیل شده است.

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

می دانیم که کارآمد است ، اما برای چه استفاده می شود و واقعاً چگونه به توسعه دهندگان وب کمک می کند؟

جعبه ابزار Bootstrap برای توسعه برنامه های وب توسط کارمندان سابق توییتر مارک اوتو و جیکوب تورنتون ایجاد شده است (در زیر).

وب سایت رسمی Bootstrap آن را چنین توصیف می کند:

"محبوب ترین چارچوب HTML ، CSS و JS برای توسعه پروژه های ریسپانسیو (responsive) ، اولویت-اول موبایل در وب."

معنای ساده تر آن این است:

Bootstrap مجموعه عظیمی از بلاک های کد مفید و قابل استفاده مجدد است که با HTML ، CSS و JavaScript نوشته شده است. این همچنین یک چارچوب (FrameWork) توسعه Front-end است که توسعه دهندگان و طراحان را قادر می سازد تا به سرعت وب سایت های کاملاً پاسخگو ایجاد کنند.

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

همچنین این Framework رایگان است!

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

1- چرا Bootstrap برای توسعه دهندگان وب کاربردی است ؟

بیایید مزایا را در 8 قسمت زیر توضیح دهیم :

1. چارچوب پاسخگوی آن (responsiveness)

دیگر ساعاتی برای کدنویسی چارچوب خود صرف نمی کنید - Bootstrap همراه با سیستم شبکه از پیش تعریف شده خاص خود آماده استفاده است.

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

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

2. تصاویر پاسخگو آن (Image responsiveness)

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

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

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

3. اجزای آن

بوت استرپ با تعداد کاملی از اجزای سازنده همراه است که می توانید به راحتی به صفحه وب خود بچسبانید ، از جمله:

• خطوط راهنمای وب سایت
• منوهای پایین رونده (drop downs)
• خطوط پیشروی در وب سایت
• عکس پیش نمایش (thumb nail)

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

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

4. بخشی از جاوا اسکریپت است

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

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

5. مستندات آن

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

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

6. قابلیت شخصی سازی آن

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

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

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

7. جامعه آن

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

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

8. الگوهای خارجی آن

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

در اینجا فقط چند مورد ذکر شده است:

• W3Schools Bootstrap templates
• Start Bootstrap templates
• Wrap Bootstrap templates

2- چرا ممکن است از Bootstrap خودداری کنید؟

تاکنون ، احتمالاً فکر می کنید که استفاده از آن امری واضح است. اما به یاد داشته باشید - هر سکه دو روی دارد. تقریباً مانند هر چیزی در زندگی ، حتی بوت استرپ نیز نقاط ضعفی دارد.

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

Syntax .1 آن گیج کننده است!

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

"صبر کنید - 4؟ این 4 از کجا آمده است ؟! »

بدون شک ، این چهار ممکن است شما را به این باور سوق دهد که ستون یک چهارم صفحه را اشغال می کند - نه یک سوم. گرچه این نحو منطقی است (بوت استرپ از یک سیستم 12 ستونی استفاده می کند و 4 یک سوم از 12 است) ، اما برای کسانی که تازه وارد کل فرآیند شده اند می تواند کمی گیج کننده باشد.

2. فایل های آن خیلی بزرگ است!

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

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

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

3. من را از یادگیری کدنویسی باز میدارد

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

3- نتیجه گیری نهایی

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

بوت استرپ بسیار محبوب است و برای ساخت برخی از وب سایت های مشهوری مورد استفاده قرار گرفته است. باور نمی کنید؟ وب سایت MongoDB ، وب سایت ناسا یا حتی FIFA را بررسی کنید.