دوره آموزش بوت استرپ 4

بازدیدها : 584

بوت استرپ محبوب ترین چارچوب طراحی صفحات وب به شمار می رورد. به کمک آن می توان صفحات وب استاندارد، زیبا و واکنش گرا یا ریسپانسیو طراحی کرد. در 40 جلسه به آموزش کامل بوت استرپ پرداخته ایم.

بوت استرپ مجموعه اى از کدهاى نوشته شده و قابل استفاده ى مجدد به زبان هاى HTML , CSS , Javascript مى باشد که به توسعه دهندگان وب کمک مى کند تا صفحات وب واکنش گرا را سریع تر و زیبا تر تولید کنند و طراحان را از نوشتن کدهاى فراوان CSS بى نیاز مى کند.

بوت استرپ متن باز بوده و توسط شرکت Twietter توسعه مى یابد. صفحات وب واکنش گرا صفحاتى هستند که در رسانه هاى مختلف مانند موبایل، تپلت، مانیتور و صفحات نمایش بزرگ به خوبى و بدون به هم ریختگى نمایش داده مى شوند. به عبارتى نحوه نمایش صفحه بر اساس نوع  رسانه تغییر مى کند. این تغییرات شامل لایه بندى صفحه، اندازه تصاویر و ... مى باشد. دیدگاه Mobile first به این اصل استوار است که امروزه  گوشى هاى هوشمند اصلى ترین صفحه نمایش کاربران براى بازدید از صفحات وب مى باشد.

جهت آشنایی با این دوره آموزشی حتما ویدئوی معرفی را مشاهده نمایید .

 سرفصل های دوره آموزشی بوت استرپ 4 

صفحاتی که واکنش گرا نباشند جایگاهی بین طراحان، کاربران و موتورهای جستجو ندارند. بنابراین اگر تصمیم دارید طراحی وب را به صورت حرفه ای شروع کنید بعد از یادگیری html و css توصیه می کنم حتما بوت استرپ را شروع کنید. در این دوره آموزش بوت استرپ 4 در 40 فیلم آموزشی مطالب زیر را آموزش می دهیم:

• بوت استرپ چیست؟

• نصب بوت استرپ

• لایه بندی در بوت استرپ

• تایپوگرافی

• کلاس های کمکی

• کامپوننت ها

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

کد کارگاه های هر جلسه  نیز به صورت فایل فشرده قابل دانلود می باشد .

پیش نیازها

محتواهای درسی

• - بخش اول : بوت استرپ چیست ؟

• 1 - بوت استرپ چیست؟

  پخش ویدئو

  2 - نصب بوت استرپ

  پخش ویدئو

• - بخش دوم : لایه بندی در بوت استرپ

• 3 - Container ها ونقاط شکست

  4 - گرید سیستم - 1

  5 - گرید سیستم - 2

  6 - گرید سیستم - 3

  7 - گرید سیستم - 4

• - بخش سوم : تایپوگرافی

• 8 - تایپوگرافی

  9 - لیست ها

  10 - کدها

• - بخش چهارم : تصاویر و رنگ ها

• 11 - تصاویر

  12 - رنگ ها در بوت استرپ

• - بخش پنجم : جداول

• 13 - جداول

• - بخش ششم : کلاس های کمکی

• 14 - کلاس های کمکی text

  15 - box model و کلاس های کمکی spacing

  16 - کلاس های کمکی sizing

  17 - کلاس های کمکی border

  18 - کلاس های کمکی display

  19 - کلاس های کمکی Flexbox - جلسه 1

  پخش ویدئو

  20 - کلاس های کمکی Flexbox - جلسه 2

  21 - کلاس های کمکی Flexbox - جلسه 3

  22 - کلاس های کمکی Flexbox - جلسه 4

  23 - کلاس های کمکی float

  24 - کلاس های کمکی overflow, visibility, shadow

• - بخش هفتم : کامپوننت ها

• 25 - دکمه ها (Button)

  26 - منوی آبشاری (Drop down)

  27 - نشان ها Badge و Alert

  پخش ویدئو

  28 - لیست ها (list group)

  29 - card ها - جلسه اول

  30 - card ها - جلسه دوم

  31 - فرم ها (form) - جلسه اول

  32 - فرم ها (form) - جلسه دوم

  33 - منوها (Navs)

  34 - منوهای افقی (Navbar)

  35 - media object

  36 - اسلایدشو ها (carousel)

  37 - منوی آبشاری (collapse)

  38 - دیالوگ ها (modal-Accordion)

  39 - کامپوننت ها tooltip - popover - spinner

  40 - کامپوننت ها breadcrumb - Jumbotron - pagination

• - کارگاه

• کارگاه های ضمیمه