آموزش بوت استرپ: گام های اول کار با فریم ورک توییتر

بوت استرپ یک فریم ورک front end است که توسعه دهندگان از آن، برای ایجاد انواع مختلف وب سایت ها، برای دستگاه های مختلف استفاده می کنند. این پروژه ی منبع باز، آرایه ای متنوع از قالب های طراحی را بر اساس زبان هایی مانند HTML، CSS و جاوا اسکریپت های اختیاری ارائه می دهد. توییتر، در ابتدا، بوت استرپ را برنامه ریزی کرد تا به عنوان یک ابزار داخلی، برای یکی کردن طرح ها استفاده شود. سپس، شبکه اجتماعی تصمیم گرفت فریم ورک را در پلت فرم منبع باز میزبانی، GitHub، منتشر کند؛ جایی که خیلی سریع، آن را تبدیل به یکی از محبوب ترین پروژه ها، با ایجاد هزاران انشعاب کرد.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت  را مشاهده کنید)

مزایای بوت استرپ

با استفاده از قالب های HTML و CSS، توسعه دهندگان با ایده هایی جالب برای وب سایت های جدید، دیگر نیازی به شروع برنامه نویس از ابتدا ندارند. محتوا ها به طور مستقیم، از کیت های ابزار / tool kits گرفته شده و به اسناد HTML اضافه شده اند، و نیاز به پیکربندی های خسته کننده ی CSS را برطرف می کنند. برخی از این موارد عبارتند از:

• دکمه ها / Buttons
• عناصر ناوبری / Navigational elements
• نمای کلی عکس بند انگشتی / Thumbnail overviews
• منو های کشویی / Dropdown menus
• پیام های هشدار دهنده / Warning messages
• میله های روند پیشرفت / Progress bars
• تعبیه ی ویدئوی واکنش گرا / Responsive video embedding

یکی دیگر از جنبه های مهم بوت استرپ، طرح بندی شبکه ای / grid است. این سیستم طرح بندی، با تقسیم طرح بندی به ۱۲ ستون، تعیین دقیق فاصله و موقعیت عناصر وب سایت را برای کاربران آسان تر می کند. بنابراین، در هنگام طراحی، هم برای استفاده در دسکتاپ، هم تلفن همراه و هم رایانه های شخصی با مانیتور های کوچک، کاربران برای تنظیم عناصر در شبکه های طرح بندی، می توانند برای انتخاب بین اندازه های مختلف صفحه تصمیم بگیرند. این انعطاف پذیری، بوت استرپ را برای طراحی وبِ واکنش گرا، بسیار مناسب می کند.

توسعه دهندگان با استفاده از افزونه های اختیاری جاوا اسکریپت، بر اساس فریم ورک جاوا اسکریپت جی کوئری، می توانند رابط کاربری اضافی (مثلا راهنمایی های ابزار یا پنجره های محاوره ای) را اضافه کنند یا قابلیت های عناصر کنترلی موجود مانند ویژگی های تکمیل خودکار برای باکس های ورودی را گسترش دهند. برای استفاده از بوت استرپ با جاوا اسکریپت، باید کتابخانه jQuery را به سند HTML خود اضافه کنید.

بوت استرپ: دانلود و مراحل اول

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

1. وب سایت رسمی getbootstrap.com را ببینید. پکیج بوت استرپ را دانلود کنید. که شامل هر دو فایل CSS و جاوا اسکریپت (یکی در فرم استاندارد، یکی در فرم حداقل) و همچنین فونت ها و تمِ بوت استرپ اختیاری است.
2. فایل را باز کنید و پوشه ی بوت استرپ را به دایرکتوری پروژه ی دلخواه خود بکشید.
3. این پوشه، حاوی ‘CSS’، ‘فونت ها’ و ‘JS’ است. در پوشه ی «فونت»، بیش از ۲۵۰ آیکون در فونت Glyphicons Halflings پیدا خواهید کرد که به صورت رایگان برای بوت استرپ ساخته شده است. فایل های موجود در پوشه ی “css” و “js” به صورت جداگانه در زیر شرح داده می شوند:

bootstrap.css: کد CSS در فرمِ قابل خواندن

bootstrap.min.css: کد CSS در شکلِ حداقل. در این حالت، محتوای غیر مرتبط برای تفسیر کد، مانند فضاها، حذف شده است.

bootstrap.css.map: شامل نقشه های سورس CSS است که در هنگام توسعه، به شما در پیدا کردن داده های سورس اصلی در فرمت LESS کمک می کند.

bootstrap-theme.css: فایل CSS از قالب اختیاری prepackaged است.

bootstrap-theme.min.css: کد قالب در فرمِ حداقل.

bootstrap-theme.css.map: نقشه ی سورس قالب.

bootstrap.js: کد جاوا اسکریپت در فرمِ قابل خواندن.

bootstrap.min.js: کد جاوا اسکریپت در فرمِ حداقل.

4. اگر می خواهید از عناصر جاوا اسکریپت استفاده کنید، پس کتابخانه ی اضافی جاوا اسکریپت، jQuery را از jquery.com دانلود کنید.
5. هنگامی که تمام اجزای آماده و شناسایی شدند، کار واقعی آغاز می شود. برای مثال، در این جا، یک صفحه ی خوش آمدید HTML ایجاد کرده ایم که بعدا آن را به یک قالب بوت استرپ تبدیل خواهیم کرد.
6. ویرایشگر کد مورد نظر خود مانند ++ Notepad را باز کنید و کدِ زیر را در یک سند خالی اضافه کنید:

متا تگ ‘viewpoint’، در بخشِ head area تضمین می کند که وب سایت به طور بهینه، در دستگاه های تلفن همراه نمایش داده شود.

7. پروژه را با عنوان ‘basic.html’ در دسک تاپ ذخیره کنید.
8. بوت استرپ جاوا اسکریپت و فایل های CSS را در کد HTML پیاده سازی کنید تا از این سند HTML معمولی، یک قالبِ بوت استرپ بسازید. برای این کار، مشخص کنید که پوشه در کدام دایرکتوری قرار دارد. توصیه می شود جاوا اسکریپت را به قسمت انتهاییِ body سند اضافه کنید، در غیر این صورت، می تواند زمان بارگذاری صفحه ی وب شما را افزایش دهد. کد شما باید به این صورت در آید:

9. در پایان، سند را با عنوان bootstrap-template.html ذخیره کنید. با دو بار کلیک کردن، می توانید HTML Bootstrap را در مرورگر مورد نظر خود باز کنید و در آن جا باید پیامی را ببینید که تحت عنوان (h1) نوشته شده است.
10. حالا شما می توانید قالب خود را به صورت رایگان طراحی کنید. کد های مختلف تایپوگرافی، دکمه ها و سیستم شبکه ای بوت استرپ و غیره را می توان در وب سایت رسمی آن یافت.

دانش HTML / CSS یک نیاز بسیار مهم است!

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

• صرفه جویی در زمان
• اساس و بنیاد بسیار خوب برای طراحی وب واکنش گرا
• به روز رسانی منظم و جامعه ی بزرگی از کاربران که می توانید از آن ها سوال بپرسید
• اسناد طبقه اول / First-class

در کنار این واقعیت که بوت استرپ، یک پروژه ی منبع باز است، عوامل ذکر شده در بالا، بار دیگر ثابت می کنند که چرا بوت استرپ یکی از محبوب ترین فریم ورک های طراحی وب است.