بوت استرپ bootstrap یک فریم ورک جلویی front-end می باشد که به توسعه دهندگان وب کمک می کند تا بتوانند در رویه ی طراحی و توسعه ی وب به کار خود سرعت بخشند .
بخش دهم – طراحی وب واکنش گرا ، بوت استرپ Bootstrap چیست؟
بوت استرپ bootstrap یک فریم ورک جلویی front-end می باشد که به توسعه دهندگان وب کمک می کند تا بتوانند در رویه ی طراحی و توسعه ی وب به کار خود سرعت بخشند . توسعه دهندگانی که از هسته ی سمت سرور مانند PHP و Java به سمت طراحی front-end رو می آورند معمولن درک استفاده از CSS و Javascript برای آن ها دشوار خواهد بود . بهرحال با استفاده از بوت استرپ bootstrap تمرکز آن ها تنها بروی آماده سازی کدهای HTML خواهد بود .
بوت استرپ bootstrap نه تنها برای توسعه دهندگان تازه کار مفید است ، بلکه در ادامه به شما نشان خواهیم داد که چقدر برای کدنویسان حرفه ای نیز می تواند مطلوب و مفید واقع شود .
چرا وجود دارد؟
تصور کنید که شما مجبور به طراحی یک وب سایت با المان هایی مانند یک منوی جذاب ، دکمه های زیبا ، توپوگرافی عالی ، جانگهدارها برای متن و تصویر ، یک اسلاید بزرگ ، و بسیاری چیزهای دیگر هستید و هنوز هم یک طراح و توسعه دهنده ی front-end قوی نیستید . آنگاه چه احساسی خواهید داشت !؟
حال فرض کنید که تمامی این موارد نامبرده و ویژگی ها از قبل برای شما کدنویسی شده باشد و شما تنها با استفاده از چند خط کوتاه HTML بتوانید از آن ها در وب خود استفاده نمایید . این کدهای آماده با ویژگی های خاص bootstrap است .
در یک پکیج بوت استرپ bootstrap تمام موارد مورد نیاز از جمله کدهای CSS و جاوااسکریپت javascript وجود دارد . بعنوان مثال استفاده از کلاس CSS بنام btn در یک تگ لینک <a></a> آن را بصورت یک دکمه به نمایش خواهد آورد که در شکل زیر مشاهده می کنید . همچنین استفاده از کلاس btn-primary آن را بصورت یک دکمه ی آبی تیره در می آورد :
بوت استرپ bootstrap لینک ها ، تصاویر و توپوگرافی های زیادی دارد . یکی از مهمترین ویژگی ها در بوت استرپ bootstrap سیستم شبکه ای grid system آن است . شما نمی توانید بدون استفاده از سیستم شبکه ای آن یک وب سایت واکنش گرا و یا مناسب موبایل ها بسازید . در ادامه در مورد طراحی واکنش گرا و سیستم شبکه ای بیشتر بحث خواهیم کرد .
چگونه می تواند به ما کمک کند؟
همانطور که گفتیم بوت استرپ bootstrap یک سیستم بسیار مناسب برای مبتدیان می باشد اما تنها به آنها محدود نخواهد شد . حرفه ای ها می توانند از بوت استرپ bootstrap بعنوان مبنای ساختن چیزهای جدید استفاده کنند . بوت استرپ bootstrap به شما اجازه می دهد تا استایل های آن را با استفاده از سیستم های Less (http://lesscss.org/ ) و Sass (http://sass-lang.com ) خصوصی سازی کرده و تغییر دهید. توسعه دهندگانی که با این تکنولوژی آشنایی داشته باشند می تواند بطور کامل تنظیمات و پیش فرض های آن را تغییر دهند . راه های مختلفی برای شخصی سازی بوت استرپ bootstrap وجود دارد که در بخش های بعدی آموزش به آن ها خواهیم پرداخت .
نیاز به نمونه سازی های CSS
اصلی ترین دلیل برای داشتن یک فریم ورک خوب CSS این است که بتوان توسعه ی راحتی داشت . وظایف معمولی در طراحی وب سایت وجود دارد که هر کسی هنگام توسعه ی آن انجام می دهد . وظایفی مانند ریست تمیز در مرورگرها ، یک سیستم شبکه ای خوب برای لایه بندی وب سایت و تنظیم کردن قوانین تایپوگرافی که اگر قرار به تکرار آن در هر پروژه باشد خسته کننده و وقت گیر می شود . یک فریم ورک CSS خوب دسته ای از ابزار را فراهم می کند که این وظایف را انجام دهد .
برخی از ویژگی های شاخص یک فریم ورک CSS خوب شامل موارد زیر خواهد بود :
- توسعه ی سریع تر
- کدهای سازماندهی شده و قابل نگهداری
- به شما زمان بیشتری برای نوآوری می دهد تا اینکه آن زمان را صرف یک چرخه ی تکراری نکنید .
ریشه ی بوت استرپ Bootstrap
بوت استرپ bootstrap در سال 2011 توسط Mark Otto و Jacob Thornton ، دو توسعه دهنده در توئیتر نوشته شد . آن ها تمرکز و توجه خود رو روی مسئله ی استحکام کد و همچنین قابلیت نگهداری آن گذاشتند .
در زیر عبارتی از مارک را در مورد پیدایش بوت استرپ bootstrap می خوانید :
" گروه کوچکی از توسعه دهندگان و من گردهم آمدیم تا ابزاری داخلی جدیدی بسازیم و مجال کارهای بیشتری داشته باشیم . در هنگام پروسه ی کاری ما متوجه شدیم که ابزاری بهتر از آن ابزار داخلی ساختیم . ماه ها بعد ، ما آن را با عنوان اولین نسخه از بوت استرپ bootstrap تمام کردیم . که در واقع راهی برای مستند سازی و اشتراک الگوهای شرکت بود . "
بوت استرپ bootstrap 1.0.0 در سال 2011 تنها با CSS و HTML ارائه شد . هیچ کامپوننت جاوااسکریپتی تا نسخه ی 1.3.0 ارائه نشد ، این نسخه با IE7 و IE8 سازگار بود .
در سال 2012 یک بروزرسانی اساسی در بوت استرپ bootstrap 2.0.0 صورت گرفت . این نسخه بطور کامل بازنویسی شد و تبدیل به یک فریم ورک طراحی واکنش گرا گردید. کامپوننت های آن با تمامی دستگاه های موبایل ، تبلت ، دسکتاپ و ... سازگار شد و تعداد زیادی از پلاگین های javascript و css به پکیج آن اضافه گردید .
بعد از 15 بروزرسانی بزرگ دیگر ، بوت استرپ bootstrap 3 در سال 2013 یک انتشار مهم دیگر در این زمینه بود . و در واقع یک فریم ورک کاملن واکنش گرا و mobile first شد . در نسخه های قدیمی تر ، ساختن یک سایت واکنش گرا responsive در واقع انتخابی بود اما در ویرایش سوم در سال 2013 نام کلاس ها و همچنین ساختار پروژه تغییر کرد . آگاه باشید که نسخه ی سوم بوت استرپ bootstrap 3 قابلیت سازگاری با نسخه های پیشین را ندارد و شما نمی توانید با تعویض هسته ی مرکزی CSS و javascript به نسخه ی جدید مهاجرت کنید .
اگر شما می خواهید تغییرات نسخه های مختلف بوت استرپ bootstrap در طی این سال ها را ببینید می توانید به سایت GitHub مراجعه کنید و در آنجا علاوه بر دیدن فایل های مختلف از نسخه های مختلف ، تغییرات ایجاد شده در آن ها را نیز مشاهده کنید .
امروزه بوت استرپ تبدیل به یک تکنولوژی مطلوب در زمینه ی طراحی وب شده است . در واقع اگر شما یک توسعه دهنده ی full-stack باشید نیاز دارید تا آن را فراگیرید . در نمودار زیر شما تغییرات تعداد مشاغل در زمینه ی بوت استرپ bootstrap را در دنیا مشاهده می کنید .
رقابت بوت استرپ
فریم ورک های زیادی وجود دارند که در زمینه ی fron-end با بوت استرپ رقابت می کنند . برخی از آن ها عبارتند از :
- Zurb (http://foundation.zurb.com/ )
- Semantic UI (http://semantic-ui.com/ )
- Gumby Framework (http://gumbyframework.com/ )
- Pure by Yahoo (http://purecss.io/ )
چه کسانی از بوت استرپ bootstrap استفاده می کنند؟
برخی از سایت های real-life ی که با استفاده و کمک بوت استرپ bootstrap ساخته شده اند را در زیر مشاهده می کنید :
- Open Desk (https://www.opendesk.cc/ )
- Riot Designs (http://riotdesign.eu/en/ )
- 20Jeans (https://www.20jeans.com/ )
- Red Antler (http://redantler.com/ )
- Uberflip (www.uberflip.com )
شاد و سلامت باشید
محمد جعفری فوتمی