قیمت این دوره: 250,000 162,500 تومان
  • مدرس دوره : علی صالحی
  • تعداد ویدیوها : 29 ویدیو
  • مدت زمان دوره : 5:38:00
  • سطح دوره : پیشرفته
  • وضعیت دوره : به اتمام رسیده
  • تاریخ آخرین بروزرسانی : 1403/08/09
ثبتـــ نام در این دوره ثبت نام در دوره
آموزش BootStrap ورژن 5.1.3 (همراه با پروژه عملی پیشرفته)

آموزش BootStrap ورژن 5.1.3 (همراه با پروژه عملی پیشرفته)

یک فریمورک محبوب و رایگان برای توسعه وب است که به ویژه برای طراحی رابط کاربری واکنش‌گرا (Responsive) استفاده می‌شود. این فریمورک که توسط توییتر ایجاد شده، به توسعه‌دهندگان کمک می‌کند تا بدون نیاز به نوشتن کدهای زیاد CSS و جاوا اسکریپت، وب‌سایت‌ها و برنامه‌های وب سریع و کارآمدی بسازند.

ویژگی‌ها و امکانات بوت‌استرپ:

 

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

        بوت‌استرپ از یک سیستم شبکه‌بندی (Grid) قدرتمند و انعطاف‌پذیر بهره می‌برد که امکان طراحی صفحات وب با ساختار واکنش‌گرا را فراهم می‌کند. این بدان معناست که وب‌سایت‌ها به طور خودکار با اندازه صفحه‌نمایش‌های مختلف (موبایل، تبلت، دسکتاپ) سازگار می‌شوند.

 

    پیش‌ساخته بودن المان‌ها:

        بوت‌استرپ دارای مجموعه‌ای از المان‌های رابط کاربری آماده مانند دکمه‌ها، فرم‌ها، نوارها، مودال‌ها، کارت‌ها، جداول و ... است. این المان‌ها به طور استاندارد با طراحی زیبا و کاربرپسند ارائه می‌شوند.

 

    پشتیبانی از جاوا اسکریپت:

        بوت‌استرپ شامل پلاگین‌های جاوا اسکریپت مانند اسلایدرها، مودال‌ها، منوهای دراپ‌دان، تب‌ها و سایر عناصر تعاملی است که به کمک کتابخانه jQuery کار می‌کنند.

 

    سفارشی‌سازی آسان:

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

 

    سازگاری با مرورگرها:

        بوت‌استرپ با اکثر مرورگرهای مدرن سازگار است و مشکلات سازگاری مرورگرهای مختلف را تا حد زیادی رفع می‌کند.

 

ساختار اصلی بوت‌استرپ:

 

    Grid System: بوت‌استرپ از یک سیستم 12 ستونه استفاده می‌کند که به شما این امکان را می‌دهد تا چیدمان‌های پیچیده و منظم برای صفحات وب بسازید. از کلاس‌هایی مانند col-md-6، col-lg-4 و... برای تعیین عرض ستون‌ها در اندازه‌های مختلف نمایشگر استفاده می‌شود.

 

    CSS و کامپوننت‌ها: شامل استایل‌ها و کلاس‌های از پیش تعریف‌شده برای المان‌هایی مانند دکمه‌ها (btn)، فرم‌ها (form-control)، جداول (table) و...

 

    JavaScript Components: شامل پلاگین‌هایی برای المان‌های تعاملی مانند نوارهای پیشرفت (Progress Bars)، مودال‌ها (Modals)، دراپ‌دان‌ها (Dropdowns) و...

 

جمع‌بندی:

 

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

 

سرفصل های دوره

نصب بوت استرپ v5.1.3
سیستم گرید بوت استرپ
Utility Classes
Display-Shadow-Visible
Text Utility
Flex-Utility
Typography
جدول ها (Tables)
Badge & Breadcrumb
دکمه ها Buttons))
کارت ها (Cards)
کامپوننت لیست
کاروسل (Carousel)
Dropdowns
Modals
Progress & Spinner
فرم ها (Forms)
Toast
Collapse
Navigation
Navigation-bar
پروژه عملی (صفحه لندینگ فروشگاه)


پیش نیاز های دوره :

  1. html , css

فهرستـــ ویدیوها

مدت زمان دوره 5:38:00
  • با مشاهده آنلاین جلسات در سایت ، هزینه اینترنت شما به صورت نیم بها محاسبه خواهد شد.

1
  • معرفی قالب پروژه (همراه با نصب فریمورک)

00:10:38

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

2
  • سیستم گرید بوت استرپ

00:18:42

در این قسمت به معرفی سیستم گرید بوت استرپ ، که مهمترین ویژگی این فریمورک برای طراحی ریسپانسیو هست ، میپردازیم

3
  • Utility Classes

00:14:18

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

4
  • Display & Shadow & Visible

00:04:53

در این قسمت به معرفی کلاس های display , shadow , visible میپردازیم

5
  • Text Utility

00:11:36

در این قسمت به معرفی کلاس های مربوط به متن (Text) میپردازیم .

6
  • ساختار Flex در سیستم گرید بوت استرپ

00:06:13

در این قسمت ساختار Flex در سیستم گرید بوت استرپ را مورد بررسی قرار دادیم .

7
  • Flex Utility

00:07:23

در این قسمت به معرفی Flex Utility پرداختیم .

8
  • Typography

00:05:37

در این قسمت به معرفی Typography پرداختیم .

9
  • جداول (Tables)

00:08:32

در این قسمت ، به معرفی جدول ها در بوت استرپ پرداختیم .

10
  • Badge & Breadcrumb

00:04:23

در این قسمت به معرفی کلاس های Badge و Breadcrumb میپردازیم .

11
  • دکمه ها (Buttons)

00:05:42

در این قسمت ، کلاس های مربوط به دکمه ها را مورد بررسی قرار دادیم .

12
  • کارت ها (Cards)

00:09:58

در این قسمت به معرفی کارت ها میپردازیم .

13
  • کامپوننت لیست

00:16:22

در این قسمت به معرفی کامپوننت لیست میپردازیم .

14
  • کاروسل (Carousel)

00:16:48

در این قسمت ، کاروسل ها را مورد بررسی قرار دادیم .

15
  • Dropdown

00:06:35

در این قسمت ، Dropdown را مورد بررسی قرار دادیم .

16
  • Modals

00:11:05

در این قسمت به معرفی modal ها پرداختیم .

17
  • Progress & Spinner

00:04:45

در این قسمت به معرفی Progress و Spinner ها پرداختیم .

18
  • فرم ها (Forms)

00:14:58

در این قسمت ، کلاس های مربوط به فرم ها را مورد بررسی قرار دادیم .

19
  • Toast

00:17:57

در این قسمت Toast ها در بوت استرپ را مورد بررسی قرار دادیم .

20
  • Collapse

00:08:59

در این قسمت به معرفی Collapse ها میپردازیم .

21
  • Navigation

00:05:40

در این قسمت به معرفی Navigation میپردازیم .

22
  • Navigation Bar

00:16:32

در این قسمت به معرفی Navigation Bar میپردازیم .

23
  • پروژه عملی فروشگاه ساعت (طراحی بخش هدر)

00:22:05

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

24
  • پیاده سازی بخش Banner (کاروسل)

00:21:39

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

25
  • اضافه کردن بخش Feature فروشگاه

00:08:51

در این قسمت ، خدمات و ویژگی های فروشگاه را با استفاده از کارت ها پیاده سازی خواهیم کرد .

26
  • پیاده سازی محصولات

00:24:41

در این قسمت ، بخش محصولات را پیاده سازی خواهیم کرد .

27
  • پیاده سازی بخش درباره ما

00:10:19

در این قسمت ، بخش درباره ما را پیاده سازی خواهیم کرد .

28
  • پیاده سازی بخش وبلاگ

00:08:42

در این قسمت ، بخش وبلاگ را پیاده سازی خواهیم کرد .

29
  • پیاده سازی بخش فوتر (قسمت آخر)

00:14:51

در این قسمت بخش فوتر وبسایت را پیاده سازی خواهیم کرد .

دوره های دیگر مدرس

مشاهده همه دوره ها

نظرات کاربران در رابطه با این دوره

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