مقدمات بوت استرپ (بوت استرپ چیست؟)

در این مجموعه آموزشی قصد داریم [h=1]طراحی سایت[/h] به وسیله بوت استرپ را آموزش بدیم. علاوه بر این [h=1]طراحی واکنش گرا[/h] یا Responsive Design هم مورد بحث و بررسی قرار میگیره. این مجموعه آموزشی با 1- مقدماتی در باره بوت استرپ شروع میشود ، که خود شامل چند بخشه. بعد از پایان مقدمات بوت استرپ سراغ 2- کار با بوت استرپ با استفاده از کلاسهای CSS میریم. بعد از آشنایی با کلاس های CSS استفاده شده در بوت استرپ و همچنین طراحی واکنش گرا آموزش را با بحث و گفتگو در باره 3- کامپوننت های بوت استرپ برای طراحی سایت واکنش گرا پیش میبریم. سعی میکنیم اکثر کامپوننت های مورد استفاده در بوت استرپ رو با یک مثال به صورت کامل توضیح بدیم. در بخش 4- در مورد پلاگین های بوت استرپ صحبت خواهیم کرد. و در آخر یک مثال کامل از طراحی سایت و طراحی واکنش گرا با استفاده از بوتسترپ را تقدیم میکنیم. امیدوارم مفید باشه و مورد استفاده همه قرار بگیره. [h=2]قبل از یادگیری بوت استرپ به چه چیزهایی نیاز دارم؟[/h] قبل از اینکه بخواهید کار با فریم وورک بوت استرپ را یاد بگیرید باید مفاهیم پایه موارد زیر را فراگرفته باشید :

• HTML
• CSS
• JavaScript/Jquery

اگر با مقدمات مفاهیم عنوان شده در بالا کار نکرده اید ؛ پیشنهاد میکنیم قبل از یادگیری و بکارگیری بوتسترپ این مفاهیم را فراگیرید.
[h=2]بوت استرپ چیست؟[/h]

• بوت استرپ یک مجموعه رایگان از ابزار مورد نیازی برای طراحی و ایجاد وبسایت ها و وب اپلیکیشن ها است.
• بوت استرپ شامل قالب های طراحی HTML و مبتنی بر CSS است که میتواند برای متن ها ، فرم ها ، عکس ها ، دکمه ها ، منو ها ، اسلایدرها و کامپوننت های دیگر استفاده شود.
• بوت استرپ دارای افزونه های جاوااسکرپیتی است که به راحتی میتوانید آنها را استفاده کنید و با سفارشی سازی آنها به طراحی خود جلوه دهید.
• بوت استرپ یک ابزار رایگان است که میتوانید از لینک زیر دانلود کنید. http://getbootstrap.com

[h=2]تاریخچه بوت استرپ :[/h] بوت استرپ به وسیله دو نفر از کارمندان توئیتر(Mark Otto و Jacob Thornton) برای ایجاد سازگاری بین ابزار مختلف استفاده شده در سایت توئیتر نوشته شده است. توئیتر قبل از بوت استرپ؛ از کتابخانه ها و ابزار زیادی استفاده کرده بود که هر کدام از آنها باعث ایجاد ناسازگاری می شدند و هزینه نگهداری بالا میرفت. به دلیل استقبال زیاد از بوت استرپ این محصول در سال 2011 به صورت کدباز در اختیار همه قرار گرفت.
[h=2]چرا از بوت استرپ استفاده کنیم؟(مزایای بوت استرپ چیست؟)[/h]

• رویکرد Mobile First : در طراحی بوت استرپ از رویکرد طراحی Mobile First ( موبایل در اولویت) استفاده میکند. اگر با این واژه آشنا نیستید اجازه دهید یک تعریف کلی از این واژه داشته باشیم : در این رویکرد عنوان میشود قبل از اینکه بخواهید یک وب سایت یا وب اپلیکیشن را برای سیستم های دسکتاپ طراحی کنید باید آنرا برای دستگاههای موبایل طراحی کنید. در باره رویکرد Mobile First گفته های زیادی وجود داره ولی در اینجا چون مورد بحث ما نیست ، اگر دوستان درخواست کردند یک مقاله جدا رو به توضیحات بیشتر در این زمینه اختصاص میدیم. برای درک بهتر تصویر زیر مربوط به طراحی افرادی است که وب سایت خود را با محوریت Desktop طراحی میکنند:

اما در رویکرد Mobile First ما چون با اولویت موبایل شروع به طراحی سایت خودمون میکنیم تصویر زیر رو داریم:

• پشتیبانی مرورگر ها : بوت استرپ توسط اکثر مرورگرهای محبوب پشتیبانی میشود.

• راحتی استفاده : با داشتن دانش جزئی در باره CSS و HTMLمیتوانید از بوتسترپ استفاده کنید. همچنین مستندسازی های بسیار جامعی در باره بوت استرپ در سایت رسمی این فریم وورک وجود دارد که میتوانید از آنها به عنوان راهنمایی برای طراحی سایت استفاده کنید.
• طراحی واکنش گرا : بوت استرپ دارای ابزاری است که میتواند به طراحی واکنش گرا برای دستگاههای مختلف کمک کند. بوت استرپ به صورت پیش فرض دارای کلاسهایی است که برای چهار نوع صفحه نمایش با ابعاد مختلف راهکارهایی را دارد.

[h=2]بسته دانلود شده بوت استرپ شامل چه چیزهایی است؟[/h]

• چهارچوب بندی (Scaffolding) : بوت استرپ یک ساختار اولیه فراهم میکند که شامل سیستم شبکه بندی ، استایل لینک ها ، پس زمینه ها و.... است. تمام این موارد در آینده به صورت مفصل توضیح داده خواهد شد.
• CSS : بوت استرپ شامل کلاسهای CSS از پیش تعریف شده است که میتواند به کار شما سرعت ببخشد.
• کامپوننت ها : بوت استرپ دارای یک سری کامپوننت های قابل استفاده مجدد است که برای ایجاد فونتهای زیبا ، منو ها ، پیغام های خطا و... استفاده میشود.
• پلاگین های جاوا اسکریپت : بوت استرپ شامل پلاگین های Jquery است که میتوانید همه آنها را در وب سایت خود استفاده کنید یا هر یک از انها را به صورت سفارشی مورد استفاده قرار دهید.
• قابلیت سفارشی سازی: با استفاده از کدمنبع که بوت استرپ در اختیار شما قرار میدهد میتوانید آنها را ویرایش و به صورت سفارشی شده استفاده کنید.

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