00:00 / 00:00
1.8x
1.4x
1.0x
0.7x
HD SD
HD
SD
ثبت‌نام رایگان
  • دسترسی به 35 جلسه نمونه از دوره
  • دسترسی به 35 جلسه نمونه از دوره
  • عضویت در تالار گفت‌وگوی دوره
  • اضافه شدن دوره به پروفایل
دسترسی کامل به محتوا
  • دسترسی کامل و نامحدود به محتوای دوره
  • تمام قابلیت‌‌های پلن رایگان
    +
  • دسترسی کامل و نامحدود به محتوا
99,000 تومان
00:00 / 00:00
1.8x
1.4x
1.0x
0.7x
HD SD
HD
SD

آموزش بوت استرپ 4 (Bootstrap)

دوره‌های مکتب‌پلاس
13 ساعت
100٪ (21 رای)

کاربرد دوره آموزش بوت استرپ Bootstrap) 4) چیست؟

بوت استرپ محبوب‌ترین و قدرتمندترین فریم‌ورک فرانت‌اند (HTML و CSS و JavaScript) برای توسعه سریع‌تر و آسان‌تر وب‌های رسپانسیو یا واکنش‌گرا است. این فریم‌ورک برای ایجاد مؤلفه‌های رابط کاربری رایج مانند فرم‌ها (Forms)، دکمه‌ها (Buttons)، پیمایش‌ها (Navigation)، نوارهای کشویی، هشدارها، حالت‌ها، مدال‌ها (modal)، تب‌ها (Tabs) و غیره استفاده می‌شود.

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

  • صرفه‌جویی در وقت: با استفاده از الگوها و کلاس‌های از پیش تعریف شده بوت استرپ می‌توانید در وقت و تلاش خود صرفه‌جویی کرده و بر سایر کارهای توسعه تمرکز کنید.
  • ویژگی‌های رسپانسیو: با کمک بوت استرپ می‌توانید به راحتی وب‌سایت‌های رسپانسیو بسازید که در دستگاه‌های مختلف با ظاهری مناسب نمایش داده شوند.
  • طراحی سازگار: تمام مؤلفه‌های بوت استرپ از طریق یک کتابخانه مرکزی، تمپلیت‌ها و سبک‌های یکسانی را به اشتراک می‌گذارند؛ بنابراین طراحی و طرح‌بندی صفحات وب شما کاملاً سازگار خواهد بود.
  • استفاده آسان: گذراندن دوره‌های آموزش بوت استرپ و استفاده از آن بسیار آسان است. هرکسی که دانش اولیه کار با HTML و CSS و JavaScript را داشته باشد، می‌تواند توسعه سایت با بوت استرپ را هم یاد بگیرد.
  • سازگار با مرورگرها: بوت استرپ سازگار با مرورگرهای وب از جمله FireFox، Chrome، Internet Explorer، Safari و غیره ایجاد شده است.
  • متن باز یا اوپن سورس (Open Source): دانلود و استفاده از بوت استرپ کاملاً رایگان است.

اگر می‌خواهید از مزایای بوت استرپ بهره‌مند شوید و سایت‌هایی با امکانات فراوان بسازید، دوره آموزش Bootstrap 4 مکتب‌خونه را از دست ندهید.

تمام پروژه‌های دوره آموزش بوت استرپ 4 بر اساس بوت استرپ نسخه چهار انجام شده است. تفاوت خاصی بین ورژن‌های بوت استرپ وجود ندارد و شما می‌توانید با فراگیری این دوره با هرکدام از این ورژن‌ها کار کنید.

 

هدف از یادگیری دوره آموزش بوت استرپ Bootstrap) 4)  چیست؟

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

 

دوره آموزش بوت استرپ bootstrap) 4) مناسب چه کسانی است؟

  • کسانی که با HTML و CSS آشنایی دارند و می‌خواهند مهارت‌های خود را ارتقا دهند.
  • کسانی که قصد دارند تمام مهارت‌های لازم برای طراحی سایت را فرا بگیرند.
  • کسانی که دوست دارند از عناصر و تصاویر زیبا و متحرک برای سایت خود استفاده کنند.

 

بعد از فراگیری دوره آموزش بوت استرپ Bootstrap 4 چه مهارت‌هایی کسب خواهید کرد؟

  • آشنایی کامل با تمام قسمت‌های بوت استرپ
  • تایپوگرافی در بوت استرپ
  • قرار دادن عناصر زیبا و استاندارد روی سایت
  • مشاهده انجام پروژه‌های متنوع و متعدد مانند Single Page، Coming Soon، Admin Panel و Portfolio Page
  • طراحی سایت‌های زیبا و متفاوت با استفاده از بوت استرپ در کنار Sass
  • ساخت صفحات لندینگ با انیمیشن

 

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

فصل اول: آشنایی با Bootstrap 4
00:33 ساعت
00:33
Combined Shape Created with Sketch. 3 جلسه
نمایش جلسات فصل  

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

معرفی Bootstrap
"09:29
بررسی وب سایت Bootstrap
"11:28
Template Starter
"12:57
فصل دوم: Typography
01:11 ساعت
01:11
Combined Shape Created with Sketch. 6 جلسه
نمایش جلسات فصل  

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

مقدمات Typography
"18:44
Text-align و Display
"11:13
Float و Position
"08:08
Colors و Background
"10:21
Spacing
"12:55
Sizing
"09:44
فصل سوم: CSS Components
02:03 ساعت
02:03
Combined Shape Created with Sketch. 11 جلسه
نمایش جلسات فصل  

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

Button
"24:14
Navbar
"17:25
List-group و Badge
"07:30
Form
"13:59
Input-groups
"08:33
Alerts و Progoress
"08:23
Tables و Pagination
"12:45
Cards
"12:38
Media-object
"05:14
Jumbotron
"04:14
Spinner و Shadows
"08:35
فصل چهارم: Grid System FlexBox
00:51 ساعت
00:51
Combined Shape Created with Sketch. 4 جلسه
نمایش جلسات فصل  

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

Grid System
"24:46
Grid-alignment
"10:07
FlexBox
"10:41
Auto margin و Wrapping
"06:05
فصل پنجم: Javascript Widgets
01:04 ساعت
01:04
Combined Shape Created with Sketch. 7 جلسه
نمایش جلسات فصل  

کلاس‌ها و ابزارهای زیادی در بوت استرپ وجود دارد که می‌توانید با استفاده از کدهای جاوا آن‌ها را فراخوانی کنید. در این فصل javascript widgetهایی که برای توسعه یک وب‌سایت رسپانسیو و کاربردی لازم است را به خوبی فرا می‌گیرید.

Carousel
"13:49
Collapse و Accordion
"05:51
Tooltip
"10:31
Popovers
"08:51
Toast
"12:06
Scrollspy
"07:30
Modal
"06:14
فصل ششم: پروژه اول - ساخت وب‌سایت با بوت استرپ و ریسپانسیو
00:53 ساعت
00:53
Combined Shape Created with Sketch. 4 جلسه
نمایش جلسات فصل  

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

ساخت وب‌سایت با بوت استرپ و ریسپانسیو - بخش اول
"15:19
ساخت وب‌سایت با بوت استرپ و ریسپانسیو - بخش دوم
"14:53
ساخت وب‌سایت با بوت استرپ و ریسپانسیو - بخش سوم
"16:43
ساخت وب‌سایت با بوت استرپ و ریسپانسیو - بخش چهارم
"06:10
فصل هفتم: پروژه دوم - پیاده‌سازی Navbar Collapse
00:41 ساعت
00:41
Combined Shape Created with Sketch. 2 جلسه
نمایش جلسات فصل  

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

پروژه پیاده‌سازی navbar collapse - بخش اول
"23:09
پروژه پیاده‌سازی navbar collapse - بخش دوم
"18:43
فصل هشتم: پروژه سوم با Sass
00:52 ساعت
00:52
Combined Shape Created with Sketch. 4 جلسه
نمایش جلسات فصل  

بوت استرپ 4 از SASS استفاده می‌کند، بنابراین اگر تمایل به پیشرفت در حوزه فرانت‌اند دارید، حتماً کار با SASS را یاد بگیرید. در این فصل با استفاده از این ابزار قوی می‌توانیم پرایمر کالر، پرایمر تکست و تمام موارد پرایمری سایت را تغییر داده و شخصی‌سازی کنیم.

پروژه سوم با SASS - بخش اول
"17:11
پروژه سوم با SASS - بخش دوم
"14:23
پروژه سوم با SASS - بخش سوم
"10:28
پروژه سوم با SASS - بخش چهارم
"10:56
فصل نهم: پروژه چهارم - کار با Indicatorها و فایل SPG
00:48 ساعت
00:48
Combined Shape Created with Sketch. 3 جلسه
نمایش جلسات فصل  

در این پروژه امکانات و ویژگی‌های جدیدی از بوت‌استرپ 4 را مورد بررسی قرار می‌دهیم و آن‌ها را در سایت خود پیاده‌سازی می‌کنیم. ابتدا یک navbar می‌سازیم و کرسر (cursor) به آن اضافه می‌کنیم تا کاربر بتواند بین عکس‌ها یا نوشته‌های آن جابه‌جا شود. در این فصل همچنین کار با indicatorها و فایل SPG را به شما آموزش می‌دهیم

پروژه کار با indicatorها و فایل SPG - بخش اول
"14:34
پروژه کار با indicatorها و فایل SPG - بخش دوم
"19:43
پروژه کار با indicatorها و فایل SPG - بخش سوم
"14:18
فصل دهم: پروژه پنجم SPA به همراه انیمیشن
01:07 ساعت
01:07
Combined Shape Created with Sketch. 4 جلسه
نمایش جلسات فصل  

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

پروژه SPA به همراه انیمیشن - بخش اول
"21:04
پروژه SPA به همراه انیمیشن - بخش دوم
"15:50
پروژه SPA به همراه انیمیشن - بخش سوم
"18:09
پروژه SPA به همراه انیمیشن - بخش چهارم
"12:46
فصل یازدهم: پروژه ششم صفحه Coming soon
00:27 ساعت
00:27
Combined Shape Created with Sketch. 2 جلسه
نمایش جلسات فصل  

در این فصل به شما آموزش می‌دهیم که چگونه یک صفحه Coming Soon  جذاب با اجزای کاربردی بسازید. کانتر یا شمارنده یکی از موارد جذابی است که با جاوا اسکریپت آن را طراحی می‌کنیم. این کانتر شامل روز، ساعت، دقیقه و ثانیه معکوس می‌شود. 

پروژه Coming Soon اول
"15:46
پروژه Coming Soon دوم
"11:33
فصل دوازدهم: پروژه هفتم Admin panel
00:45 ساعت
00:45
Combined Shape Created with Sketch. 4 جلسه
نمایش جلسات فصل  

در این فصل به طراحی صفحه ادمین پنل می‌پردازیم. در این صفحه اطلاعاتی از سایت قرار دارد؛ به عنوان مثال تعداد کاربران، تعداد پست‌ها، دسته‌بندی و غیره از جمله اطلاعاتی است که در این صفحه‌نمایش داده می‌شود. 

پروژه Admin panel - بخش اول
"20:14
پروژه Admin panel - بخش دوم
"11:23
پروژه Admin panel - بخش سوم
"09:18
پروژه Admin panel - بخش چهارم
"04:53
فصل سیزدهم: پروژه هشتم Admin panel همراه با Sidebar و Navbar
00:59 ساعت
00:59
Combined Shape Created with Sketch. 3 جلسه
نمایش جلسات فصل  

در این پروژه هم به طراحی صفحه ادمین پنل می‌پردازیم. تفاوت این پروژه و پروژه قبلی در چگونگی طراحی این صفحه است. در این پروژه از sidebar و navbar بالا که به حالت ثابت قرار دارد، استفاده می‌کنیم. همچنین در این پروژه با استفاده از اسپینرهای بوت استرپ برای preload استفاده می‌کنیم. 

پروژه Admin panel همراه با sidebar و navbar - بخش اول
"26:26
پروژه Admin panel همراه با sidebar و navbar - بخش دوم
"13:58
پروژه Admin panel همراه با sidebar و navbar - بخش سوم
"19:00
فصل چهاردهم: پروژه نهم Portfolio
00:20 ساعت
00:20
Combined Shape Created with Sketch. 3 جلسه
نمایش جلسات فصل  

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

پروژه Portfolio - بخش اول
"12:23
پروژه Portfolio - بخش دوم
"03:50
پروژه Portfolio - بخش سوم
"04:39

تالار گفت‌وگو

استاد دوره
علی شیخ علی شیخ

علی شیخ در سال ۱۳۹۴ در رشته مهندسی کامپیوتر فارغ‌التحصیل شد و به عنوان برنامه‌نویس وب در شرکت معدنی و صنعتی چادرملو شروع به کار کرد. تخصص اصلی ایشان در زبان‌های جاوا اسکریپت و php است. وی به دلیل این که به آموزش علاقه زیادی داشت، تصمیم به راه‌اندازی وب‌سایتی در این زمینه به نام وب پروگ گرفت و اکنون از سال 1398 تا کنون توانسته‌است سهم کوچکی در آموزش به افراد علاقه‌مند به برنامه‌نویسی را داشته باشد.

درباره برگزارکننده
وب ‌پروگ وب ‌پروگ (اطلاعات بیشتر)

پیش‌نیاز‌های دوره آموزش بوت استرپ 4 (Bootstrap)

برای اینکه بتوانید بهره کافی را از دوره آموزش بوت استرپ بگیرید، باید با کدنویسی به زبان‌های HTML و CSS آشنایی داشته باشید. از طرفی پروژه‌هایی که با بوت استرپ ایجاد می‌کنیم، همگی رسپانسیو هستند. بنابراین توصیه می‌کنیم ابتدا دوره‌های زیر را بگذرانید و سپس به مشاهده دوره آموزشی پیش رو بپردازید:

  • دوره آموزش HTML و CSS
  • دوره آموزش Responsive Layout پروژه‌محور

 

آموزش HTML و CSS
اطلاعات بیشتر
آموزش رایگان Responsive Layout پروژه محور
اطلاعات بیشتر

ویژگی‌های دوره آموزش بوت استرپ 4 (Bootstrap)

تالار گفتگو

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

نظرات 

تا کنون نظری برای این دوره ثبت نشده است. برای ثبت نظر باید ابتدا در دوره ثبت نام کرده و دانشجوی دوره باشید.

سوالات پرتکرار

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

اطلاعات بیشتر

ویژگی‌های متمایز دوره آموزش بوت استرپ Bootstrap 4 مکتب‌خونه چیست؟

دوره‌های آموزش بوت استرپ را در سراسر اینترنت می‌توانید مشاهده کنید. اما نکته مهمی که وجود دارد این است که باید بتوانید این آموزش‌ها را در پروژه‌های واقعی پیاده کنید. دوره آموزش Bootstrap 4  به انجام 9 پروژه واقعی می‌پردازد و در این حین نکات مهم و کاربردی بوت استرپ را به شما آموزش می‌دهد.

×

ثبت نظر

به این دوره از ۱ تا ۵ چه امتیازی می‌دهید؟

فصل اول: آشنایی با Bootstrap 4
00:33 ساعت
00:33
Combined Shape Created with Sketch. 3 جلسه
نمایش جلسات فصل  

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

معرفی Bootstrap
"09:29
بررسی وب سایت Bootstrap
"11:28
Template Starter
"12:57
فصل دوم: Typography
01:11 ساعت
01:11
Combined Shape Created with Sketch. 6 جلسه
نمایش جلسات فصل  

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

مقدمات Typography
"18:44
Text-align و Display
"11:13
Float و Position
"08:08
Colors و Background
"10:21
Spacing
"12:55
Sizing
"09:44
فصل سوم: CSS Components
02:03 ساعت
02:03
Combined Shape Created with Sketch. 11 جلسه
نمایش جلسات فصل  

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

Button
"24:14
Navbar
"17:25
List-group و Badge
"07:30
Form
"13:59
Input-groups
"08:33
Alerts و Progoress
"08:23
Tables و Pagination
"12:45
Cards
"12:38
Media-object
"05:14
Jumbotron
"04:14
Spinner و Shadows
"08:35
فصل چهارم: Grid System FlexBox
00:51 ساعت
00:51
Combined Shape Created with Sketch. 4 جلسه
نمایش جلسات فصل  

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

Grid System
"24:46
Grid-alignment
"10:07
FlexBox
"10:41
Auto margin و Wrapping
"06:05
فصل پنجم: Javascript Widgets
01:04 ساعت
01:04
Combined Shape Created with Sketch. 7 جلسه
نمایش جلسات فصل  

کلاس‌ها و ابزارهای زیادی در بوت استرپ وجود دارد که می‌توانید با استفاده از کدهای جاوا آن‌ها را فراخوانی کنید. در این فصل javascript widgetهایی که برای توسعه یک وب‌سایت رسپانسیو و کاربردی لازم است را به خوبی فرا می‌گیرید.

Carousel
"13:49
Collapse و Accordion
"05:51
Tooltip
"10:31
Popovers
"08:51
Toast
"12:06
Scrollspy
"07:30
Modal
"06:14
فصل ششم: پروژه اول - ساخت وب‌سایت با بوت استرپ و ریسپانسیو
00:53 ساعت
00:53
Combined Shape Created with Sketch. 4 جلسه
نمایش جلسات فصل  

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

ساخت وب‌سایت با بوت استرپ و ریسپانسیو - بخش اول
"15:19
ساخت وب‌سایت با بوت استرپ و ریسپانسیو - بخش دوم
"14:53
ساخت وب‌سایت با بوت استرپ و ریسپانسیو - بخش سوم
"16:43
ساخت وب‌سایت با بوت استرپ و ریسپانسیو - بخش چهارم
"06:10
فصل هفتم: پروژه دوم - پیاده‌سازی Navbar Collapse
00:41 ساعت
00:41
Combined Shape Created with Sketch. 2 جلسه
نمایش جلسات فصل  

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

پروژه پیاده‌سازی navbar collapse - بخش اول
"23:09
پروژه پیاده‌سازی navbar collapse - بخش دوم
"18:43
فصل هشتم: پروژه سوم با Sass
00:52 ساعت
00:52
Combined Shape Created with Sketch. 4 جلسه
نمایش جلسات فصل  

بوت استرپ 4 از SASS استفاده می‌کند، بنابراین اگر تمایل به پیشرفت در حوزه فرانت‌اند دارید، حتماً کار با SASS را یاد بگیرید. در این فصل با استفاده از این ابزار قوی می‌توانیم پرایمر کالر، پرایمر تکست و تمام موارد پرایمری سایت را تغییر داده و شخصی‌سازی کنیم.

پروژه سوم با SASS - بخش اول
"17:11
پروژه سوم با SASS - بخش دوم
"14:23
پروژه سوم با SASS - بخش سوم
"10:28
پروژه سوم با SASS - بخش چهارم
"10:56
فصل نهم: پروژه چهارم - کار با Indicatorها و فایل SPG
00:48 ساعت
00:48
Combined Shape Created with Sketch. 3 جلسه
نمایش جلسات فصل  

در این پروژه امکانات و ویژگی‌های جدیدی از بوت‌استرپ 4 را مورد بررسی قرار می‌دهیم و آن‌ها را در سایت خود پیاده‌سازی می‌کنیم. ابتدا یک navbar می‌سازیم و کرسر (cursor) به آن اضافه می‌کنیم تا کاربر بتواند بین عکس‌ها یا نوشته‌های آن جابه‌جا شود. در این فصل همچنین کار با indicatorها و فایل SPG را به شما آموزش می‌دهیم

پروژه کار با indicatorها و فایل SPG - بخش اول
"14:34
پروژه کار با indicatorها و فایل SPG - بخش دوم
"19:43
پروژه کار با indicatorها و فایل SPG - بخش سوم
"14:18
فصل دهم: پروژه پنجم SPA به همراه انیمیشن
01:07 ساعت
01:07
Combined Shape Created with Sketch. 4 جلسه
نمایش جلسات فصل  

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

پروژه SPA به همراه انیمیشن - بخش اول
"21:04
پروژه SPA به همراه انیمیشن - بخش دوم
"15:50
پروژه SPA به همراه انیمیشن - بخش سوم
"18:09
پروژه SPA به همراه انیمیشن - بخش چهارم
"12:46
فصل یازدهم: پروژه ششم صفحه Coming soon
00:27 ساعت
00:27
Combined Shape Created with Sketch.