آشنایی با فریم ورک بوتسترپ و مزایا و معایبش

سلام دوستان .

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

Bootstrap چیست؟

به بیان ساده بوتسترپ مجموعه از ابزار های رایگان که شامل کد های آماده برای طراحی صفحات وب است که این کد ها شامل کد های html , css , js میباشد که برای تولید و نمایش فرم ها، دکمه ها، تب ها، ستون ها و اسلایدر ها و سایر المان های مورد نیاز طراحی وب به کار میرود و روند و سرعت طراحی وب رو با توجه به کد های آماده و از پیش نوشته شده ای که دارد ۲٫۳ برابر بیشتر میکند .

Bootstrap اول توسط مارک اتو و جاکوب تورنتون برای ایجاد چارچوب های ظاهری در توییتر طراحی شد و در اگوست سال ۲۰۱۱، توییتر Bootstrap رو بصورت open source (متن باز) و رایگان در اختیار دیگران قراردادند و در فوریه ۲۰۱۲ به محبوب ترین پروژه در سایت Github تبدیل شده بود.

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

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

– صرفه جویی در وقت

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

– قابلیت سفارشی شدن

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

– توجه به طراحی

LESS

در حقیقت LESS در محافل برنامه نویسی تبدیل به بحثی داغ شده است. با افزودن آن به پلتفرم بوت استرپ، شما می توانید از mixin های LESS و تغییرات CSS برای سفارشی سازی grid فریم ورک بوت استرپ استفاده کنید. این حقیقت که تغییرات هر بار پس از شیفت شدن یک متغییر به صورت خودکار اعمال می شود نیز تغییری نخواهد کرد. بوت استرپ از برخی از محبوب ترین امکانات CSS استفاده می کند و آن ها را به صورت واکنش یکسان در همه ی مرورگرها نشان می دهد.

جاوا اسکریپت

بوت استرپ مجهز به کتابخانه های جاوا اسکریپت می باشد فراتر از مباحث ساختاری و سبک های پایه می باشد. جاوا اسکریپت اغلب بخش جدا نشدنی یک طراحی وب است و برنامه نویسان مجبور به کنار هم قرار دادن تمام المان ها برای مشاهده ی فرم نهایی هستند. با بوت استرپ، برنامه نویس می تواند به راحتی پنجره ی مودال مربوط به alert ها، tooltipe ها، scrollspy، Popover، Button، Typehead و غیره را تغییر دهد. بهترین قسمت بوت استرپ این است که شما را قادر می سازد که از نوشتن کامل script بگذرید.

– انسجام

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

– به روز رسانی

jQuery UI را به عنوان یک مثال در نظر بگیرید: به روز رسانی ها دو بار در سال برای کاربران اعمال می شود. از سوی دیگر، بوتسترپ همواره در حال به روز رسانی بوده و بر اساس الگویی منظم و دائمی رو به بهبود و پیشرفت است. به محض این که برنامه نویسان وب با مشکلی مواجه می شوند، تیم بوت استرپ به دنبال حل ان مشکل هستند.

– یکپارچگی

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

– پاسخگو بودن (Responsiveness)

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

– سازگاری آتی

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

– رقابتی بودن

بوت استرپ در نوع خود بی نظیر نیست. این فریم ورک با JQuery UI و HTML5 Boilerplate رقابت کرده است اما رقیب واقعی آن Zurb Foundation می باشد. بوت استرپ ۲ دارای مجموعه ابزاری می باشد که Foundation نمی تواند با آن رقابت کند. پلاگین ها، تم ها، ویژگی های فراوان و کدهای ثالث در حال حاضر می توانند در بوت استرپ به کار روند که در حال حاضر در Foundation این امکان وجود ندارد.

– مستندات فراوان

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

– مخصوص حرفه ای ها

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

به یاد داشته باشید که برای کار با بوت استرپ نیاز به آشنایی با HTML و CSS دارید. مستندات مربوط به بوت استرپ به شما کمک می کنند که با موارد مختلفی نظیر Base CSS، JS Plugin و غیره آشنا شوید.

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

Bootstrap توییتر سنگین است ، البته قابلیت اصلاح دارد برای سبک شدن 

Bootstrap توییتر شامل CSS با حجم ۱۲۶KB و جاوا اسکریپت با حجم ۲۹KB است. اگر بخواهید از تمام ویژگی های خوبی که در Bootstrap گنجانده شده است استفاده کنید، باید فکر زمان بارگذاری را هم کرده باشید. البته برای بعضی از افراد این مسئله خیلی مشکل ایجاد نمی کند اما در مناطقی که سرعت اینترنت پایین است این مسئله یک مشکل اساسی محسوب می شود. بنابراین بازار هدف خود را در نظر داشته باشید. Bootstrap توییتر به شما کمک می کند که وب سایتی جذاب، واکنش گرا ایجاد کنید که همه ی امکانات را دارا باشد اما برخی از کاربران که با موبایل خود به وب سایت شام مراجعه می کنند نمی توانند به راحتی وب سایت را مشاهده کرده و از آن صرف نظر می کنند.

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

– شباهت وب سایت ها به یکدیگر

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

معایب دیگر استفاده از Bootstrap توییتر

بازدیدکنندگان وب سایت شما را جدی نمی گیرند

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

البته این قانون در ایران کاربردی ندارد 

Bootstrap باعث بیکار شدن طراحان وب و برنامه نویسان سمت کلاینت می شود؟

این ترس که فریم ورک هایی مانند Bootstrap قدرت ارائه و خودنمایی را به برنامه نویسان وب می دهد و نقش طراحان وب و برنامه نویسان سمت کلاینت کمرنگ و بلا استفاده می شود، یکی از مشکلات عجیبی است که Bootstrap ایجاد می کند. Bootstrap عالی و کامل است اما نباید آن را با یک theme اشتباه گرفت. Theme های فراوانی برای Bootstrap وجود دارد که بدون شک توسط طراحان وب ایجاد شده است. Bootstrap بیشتر شبیه راهی سریع برای برنامه نویسان است که پروتوتایپ یا نمونه اولیه یک وب سایت یا اپلیکیشن را برای ساختار MPV ایجاد کنند.

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