دوره آموزشی Bootstrap

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

بخش 1: آشنایی با Bootstrap و نصب آن

1. مقدمه‌ای بر Bootstrap:
   • معرفی فریم‌ورک Bootstrap و تاریخچه آن
   • تفاوت Bootstrap با سایر فریم‌ورک‌های CSS
   • چرا باید از Bootstrap استفاده کنیم؟
2. نصب و راه‌اندازی Bootstrap:
   • نصب از طریق CDN
   • نصب Bootstrap از طریق NPM
   • دانلود و نصب Bootstrap به‌صورت محلی
3. ساختار فولدرها و فایل‌ها در Bootstrap:
   • آشنایی با پوشه‌ها و فایل‌های اصلی Bootstrap
   • استفاده از فایل‌های CSS و JavaScript در پروژه‌ها

بخش 2: طراحی و استفاده از شبکه‌های (Grid) در Bootstrap

1. مفهوم سیستم شبکه (Grid System):
   • آشنایی با ساختار 12 ستونه شبکه Bootstrap
   • تنظیم عرض ستون‌ها با استفاده از کلاس‌های grid
2. ستون‌ها و ردیف‌ها (Rows and Columns):
   • استفاده از کلاس‌های .row و .col
   • ساختار بندی محتوا با استفاده از grid
3. طراحی واکنش‌گرا با grid:
   • ایجاد صفحات واکنش‌گرا با تنظیم ستون‌ها برای دستگاه‌های مختلف
   • تنظیم اندازه ستون‌ها برای موبایل، تبلت و دسکتاپ

بخش 3: استایل‌دهی به اجزاء با کلاس‌های آماده Bootstrap

1. استفاده از کلاس‌های متن (Typography):
   • استفاده از کلاس‌های متنی مانند text-center, text-left, text-right
   • تنظیم سایز و نوع فونت
   • کلاس‌های برای برجسته کردن متن (Bold، Italic)
2. استایل‌دهی به پس‌زمینه‌ها و رنگ‌ها:
   • تغییر رنگ پس‌زمینه با کلاس‌های bg-*
   • استفاده از کلاس‌های text-* برای رنگ متن
3. تنظیمات حاشیه‌ها و فواصل:
   • استفاده از کلاس‌های .m-* و .p-* برای تنظیم حاشیه و فاصله
   • ایجاد فضای خالی با کلاس‌های mt-, mb-, ml-, mr-
4. استایل‌دهی به تصاویر:
   • استفاده از کلاس‌های .img-fluid برای تصاویر واکنش‌گرا
   • تنظیم استایل‌های مختلف برای تصاویر با کلاس‌های .rounded و .img-thumbnail

بخش 4: اجزای پیش‌ساخته در Bootstrap

1. کار با دکمه‌ها (Buttons):
   • استفاده از کلاس‌های دکمه‌ای مانند btn, btn-primary, btn-success
   • دکمه‌های اندازه و نوع مختلف
   • دکمه‌های دایره‌ای و شفاف
2. استفاده از ناوبری (Navbar):
   • ساخت منوهای ناوبری واکنش‌گرا
   • استفاده از کلاس‌های navbar, navbar-expand, navbar-light, navbar-dark
   • پیاده‌سازی منوی کشویی با استفاده از dropdown
3. کار با کارت‌ها (Cards):
   • استفاده از کلاس‌های card برای ایجاد کارت‌ها
   • ترکیب تصاویر، متن و دکمه‌ها در کارت‌ها
4. ساخت پنل‌ها (Alerts) و هشدارها:
   • استفاده از کلاس‌های alert, alert-warning, alert-danger
   • هشدارهای قابل بسته شدن با دکمه
5. آشنایی با جداول (Tables):
   • طراحی جداول واکنش‌گرا
   • استفاده از کلاس‌های table, table-bordered, table-striped

بخش 5: تعاملات و عناصر پیشرفته در Bootstrap

1. مدال‌ها (Modals):
   • ایجاد پنجره‌های مودال با استفاده از کلاس‌های Bootstrap
   • کنترل نمایش و پنهان شدن مدال‌ها
2. تولید تولتیپ‌ها (Tooltips) و پوپ‌آپ‌ها (Popovers):
   • استفاده از توالی‌ها برای نمایش توضیحات با کمک tooltip
   • افزودن توضیحات بیشتر با popover
3. پیش‌نمایش و فعال‌سازی آکوردئون‌ها (Accordion):
   • ساخت منوی آکوردئون برای جمع و باز کردن محتوای درون صفحه
4. استفاده از فهرست‌های فعال (List Groups):
   • استفاده از لیست‌ها برای ایجاد فهرست‌های مرتب و غیر مرتب
   • افزودن آیکون‌ها و لینک‌ها به لیست‌ها

بخش 6: فرم‌ها و ورودی‌ها در Bootstrap

1. طراحی و استایل‌دهی فرم‌ها:
   • ساخت فرم‌های ساده و پیچیده با استفاده از کلاس‌های Bootstrap
   • استفاده از کلاس‌های form-control, form-group, form-check
2. کار با ورودی‌ها و انتخاب‌گرها:
   • استفاده از ورودی‌های متنی، انتخاب‌گر تاریخ و گزینه‌ها
   • افزودن اعتبارسنجی به فرم‌ها با استفاده از کلاس‌های پیش‌فرض
3. استایل‌دهی به دکمه‌های رادیویی و چک‌باکس‌ها:
   • استفاده از کلاس‌های radio, checkbox, switch

بخش 7: استفاده از JavaScript و افزونه‌های Bootstrap

1. آشنایی با افزونه‌های جاوااسکریپتی Bootstrap:
   • استفاده از کلاس‌های جاوااسکریپتی مانند carousel, tooltip, popover
   • معرفی توابعی مثل collapse, modal, alert
2. استفاده از آیکون‌های Bootstrap:
   • معرفی و نصب Bootstrap Icons
   • استفاده از آیکون‌ها در پروژه‌ها

بخش 8: طراحی واکنش‌گرا (Responsive Design) با Bootstrap

1. ایجاد طراحی‌های واکنش‌گرا با استفاده از Media Queries:
   • آشنایی با کلاس‌های مخصوص اندازه‌های صفحه نمایش مختلف
   • استفاده از کلاس‌های col-*, col-sm-*, col-md-*, col-lg-*
2. تست طراحی واکنش‌گرا و تنظیمات مخصوص موبایل:
   • استفاده از قابلیت‌های Bootstrap برای طراحی صفحات برای موبایل، تبلت و دسکتاپ

بخش 9: بهینه‌سازی عملکرد و نحوه سفارشی‌سازی Bootstrap

1. سفارشی‌سازی و تغییرات در Bootstrap:
   • استفاده از متغیرهای SASS برای سفارشی‌سازی رنگ‌ها، فونت‌ها و اندازه‌ها
   • حذف بخش‌های اضافی و کاهش حجم فایل CSS
2. بهینه‌سازی عملکرد سایت‌های طراحی شده با Bootstrap:
   • فشرده‌سازی و بهینه‌سازی فایل‌های CSS و JavaScript

پایان دوره

1. پروژه عملی:
   • پیاده‌سازی یک پروژه عملی برای طراحی یک وب‌سایت واکنش‌گرا و مدرن با استفاده از Bootstrap
2. ارائه گواهی پایان دوره:
   • ارزیابی نهایی و اعطای گواهی پایان دوره به شرکت‌کنندگان

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