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

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

417 دانشجو
مقدماتی
مکتب‌خونه
مکتب‌خونه
محتوای دوره
پیش‌نیاز‌ها
درباره دوره
درباره استاد

محتوای دوره

14 فصل 60 جلسه 13 ساعت ویدیو
فصل اول: آشنایی با Bootstrap 4
فصل دوم: Typography
فصل سوم: CSS Components
فصل چهارم: Grid System FlexBox
فصل پنجم: Javascript Widgets
فصل ششم: پروژه اول - ساخت وب‌سایت با بوت استرپ و ریسپانسیو
فصل هفتم: پروژه دوم - پیاده‌سازی Navbar Collapse
فصل هشتم: پروژه سوم با Sass
فصل نهم: پروژه چهارم - کار با Indicatorها و فایل SPG
فصل دهم: پروژه پنجم SPA به همراه انیمیشن
فصل یازدهم: پروژه ششم صفحه Coming soon
فصل دوازدهم: پروژه هفتم Admin panel
فصل سیزدهم: پروژه هشتم Admin panel همراه با Sidebar و Navbar
فصل چهاردهم: پروژه نهم Portfolio

پیش‌نیاز‌ها

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

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

 

درباره دوره

بوت استرپ محبوب‌ترین و قدرتمندترین فریم‌ورک فرانت‌اند (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 4 تحقق این رویا را برایتان ممکن می‌کند. بوت استرپ ابزاری را در اختیارتان قرار می‌دهد تا بتوانید وب‌های واکنش‌گرا را به روشی آسان و در زمانی کوتاه توسعه دهید. یادگیری این فریم ورک و نحوه کار کردن با آن شما را به یک طراح حرفه‌ای سایت تبدیل خواهد کرد که در کوتاه‌ترین زمان ممکن می‌تواند طرح و نقشه مورد نظر را با قالب‌های آماده پیاده‌سازی کند. 

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

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

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

در آموزش بوت استرپ 4 چه مباحثی مدنظر است؟ 

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

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

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

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

-         افرادی که می‌خواهند سایت‌های حرفه‌ای طراحی کنند.

-         افرادی که به دنبال ارتقا مهارت‌های خود در زمینه طراحی سایت هستند.

-         افرادی که به دنبال طراحی سازگار و ویژگی‌های ریسپانسیو هستند.

-         افرادی که متن باز بودن فریم ورک برایشان اهمیت دارد.

چگونه می‌توان با بوت استرپ 4 سایت‌های حرفه‌ای طراحی کرد؟ 

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

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

آموزش بوت استرپ در زمینه‌های زیر کاربرد دارد:

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

-         طراحی وبلاگ و مجله آنلاین: ابزارهای قدرتمند بوت استرپ در طراحی وبلاگ و مجله‌های آنلاین مورد استفاده قرار می‌گیرد. 

-         واکنش گرا سازی وب‌سایت‌ها: بوت استرپ به شما کمک می‌کند تا به راحتی وب‌سایت خود را ریسپانسیو‌سازی کنید.

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

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

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

سرفصل‌های دوره آموزش Bootstrap 4

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

-         آشنایی با بوت استرپ 4

-         تایپوگرافی

-         CSS Components

-         Grid Sysytem FlexBox

-         JavaScript Widgets

-         ساخت وب‌سایت با بوت استرپ و ریسپانسیو

-         پیاده‌سازی Navbar Collapse

-         کار با SASS

-         کار با Indicatorها و فایل SPG

-         SPA به  همراه انیمیشن

-         صفحه Coming Soon

-         Admin panel

-         Admin panel همراه با اسلایدر و Navbar

-         Portfolio

یادگیری بوت استرپ 4 با مکتب خونه 

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

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

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

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

دوره‌های پیشنهادی

آموزش داکر مقدماتی

مدرس: صادق کریمی دستگردی

3,510 دانشجو
4.4 (95)
گواهینامه
45٪
1,019,000 560,450 تومانء
آموزش فنون مذاکره

مدرس: فرزین فردیس

4,069 دانشجو
4.5 (115)
گواهینامه
45٪
1,439,000 791,450 تومانء
آموزش برنامه‌نویسی شیء‌گرا در PHP
426 دانشجو
3.8 (12)
گواهینامه
749,000 تومانء
آموزش روش‌های سرمایه‌گذاری سودساز در ایران
150 دانشجو
3.5 (2)
259,000 تومانء

درباره استاد

علی شیخ
علی شیخ
19 دوره
36,637 دانشجو

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

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

دیگر دوره‌های علی شیخ

آموزش رایگان Emmet
وب ‌پروگ

وب ‌پروگ

مدرس: علی شیخ

1,792 دانشجو
4.5 (15)
رایگان
آموزش رایگان Sass
وب ‌پروگ

وب ‌پروگ

مدرس: علی شیخ

3,133 دانشجو
4.6 (21)
رایگان
آموزش Postman

مدرس: علی شیخ

860 دانشجو
3.8 (13)
469,000 تومانء
آموزش Livewire

مدرس: علی شیخ

139 دانشجو
4 (2)
809,000 تومانء

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

حداقل و حداکثر زمانی که می توانم یک دوره را بگذرانم چقدر است؟

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

پس از سپری شدن زمان دوره، به محتوای دوره دسترسی خواهم داشت؟

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