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

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

برگزارکننده:  مکتب‌خونه  مکتب‌خونه
مدرس دوره:
سطح: مقدماتی
 پلاس
  
زمان مورد نیاز برای گذارندن دوره:  13 ساعت
مجموع محتوای آموزشی:  13 ساعت ویدئو
 (قابل دانلود می‌باشد)

پیش‌نیاز‌ها

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

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

 

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

فصل اول: آشنایی با Bootstrap 4

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

  معرفی Bootstrap
"09:29  
  بررسی وب سایت Bootstrap
"11:28  
  Template Starter
"12:57  
فصل دوم: Typography

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

  مقدمات Typography
"18:44  
  Text-align و Display
"11:13  
  Float و Position
"08:08  
  Colors و Background
"10:21  
  Spacing
"12:55  
  Sizing
"09:44  
فصل سوم: CSS Components

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

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

  Grid System
"24:46  
  Grid-alignment
"10:07  
  FlexBox
"10:41  
  Auto margin و Wrapping
"06:05  
فصل پنجم: Javascript Widgets

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

  Carousel
"13:49  
  Collapse و Accordion
"05:51  
  Tooltip
"10:31  
  Popovers
"08:51  
  Toast
"12:06  
  Scrollspy
"07:30  
  Modal
"06:14  
فصل ششم: پروژه اول - ساخت وب‌سایت با بوت استرپ و ریسپانسیو

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

  ساخت وب‌سایت با بوت استرپ و ریسپانسیو - بخش اول
"15:19  
  ساخت وب‌سایت با بوت استرپ و ریسپانسیو - بخش دوم
"14:53  
  ساخت وب‌سایت با بوت استرپ و ریسپانسیو - بخش سوم
"16:43  
  ساخت وب‌سایت با بوت استرپ و ریسپانسیو - بخش چهارم
"06:10  
فصل هفتم: پروژه دوم - پیاده‌سازی Navbar Collapse

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

  پروژه پیاده‌سازی navbar collapse - بخش اول
"23:09  
  پروژه پیاده‌سازی navbar collapse - بخش دوم
"18:43  
فصل هشتم: پروژه سوم با Sass

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

  پروژه سوم با SASS - بخش اول
"17:11  
  پروژه سوم با SASS - بخش دوم
"14:23  
  پروژه سوم با SASS - بخش سوم
"10:28  
  پروژه سوم با SASS - بخش چهارم
"10:56  
فصل نهم: پروژه چهارم - کار با Indicatorها و فایل SPG

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

  پروژه کار با indicatorها و فایل SPG - بخش اول
"14:34  
  پروژه کار با indicatorها و فایل SPG - بخش دوم
"19:43  
  پروژه کار با indicatorها و فایل SPG - بخش سوم
"14:18  
فصل دهم: پروژه پنجم SPA به همراه انیمیشن

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

  پروژه SPA به همراه انیمیشن - بخش اول
"21:04  
  پروژه SPA به همراه انیمیشن - بخش دوم
"15:50  
  پروژه SPA به همراه انیمیشن - بخش سوم
"18:09  
  پروژه SPA به همراه انیمیشن - بخش چهارم
"12:46  
فصل یازدهم: پروژه ششم صفحه Coming soon

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

  پروژه Coming Soon اول
"15:46  
  پروژه Coming Soon دوم
"11:33  
فصل دوازدهم: پروژه هفتم Admin panel

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

  پروژه Admin panel - بخش اول
"20:14  
  پروژه Admin panel - بخش دوم
"11:23  
  پروژه Admin panel - بخش سوم
"09:18  
  پروژه Admin panel - بخش چهارم
"04:53  
فصل سیزدهم: پروژه هشتم Admin panel همراه با Sidebar و Navbar

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

  پروژه Admin panel همراه با sidebar و navbar - بخش اول
"26:26  
  پروژه Admin panel همراه با sidebar و navbar - بخش دوم
"13:58  
  پروژه Admin panel همراه با sidebar و navbar - بخش سوم
"19:00  
فصل چهاردهم: پروژه نهم Portfolio

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

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

ویژگی‌های دوره

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

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

درباره دوره

بوت استرپ محبوب‌ترین و قدرتمندترین فریم‌ورک فرانت‌اند (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
  • ساخت صفحات لندینگ با انیمیشن

 

درباره استاد

maktabkhooneh-teacher علی شیخ

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

مشاهده پروفایل و دوره‌‌های استاد

نظرات کاربران

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

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

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

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

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

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

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

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

poster
  
برگزار کننده:  مکتب‌خونه
  
زمان مورد نیاز برای گذارندن دوره:  13 ساعت
مجموع محتوای آموزشی:  13 ساعت ویدئو
 (قابل دانلود می‌باشد)