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

۶ فصل
۴۰ جلسه
۸ ساعت
۱

نگاهی مقدماتی به مستندات بوت استرپ5 بررسی کامپوننت بوتسترپ . مستندات آن همراه با کد زنی عملی ( مباحث

۹ قسمت
۰۱:۲۴:۰۵
1

رنگ پس زمینه و رنگ متون background and color

پخش
۲۰:۵۴
2

باکس هشدارalerts و رنگ های آن

پخش
۰۸:۰۶
3

دکمه هاbuttons و سایز و رنگ های آن

پخش
۰۹:۰۶
4

نشان ها و برچسب ها badge و رنگ های آن

۰۸:۵۹
5

لودر باکس ها spinner و رنگ های آن

۰۵:۳۴
6

• بوردر و خمیدگی border and roundedو رنگ های آن

۰۶:۱۷
7

عرض و ارتفاع باکس ها sizing

۰۶:۵۸
8

مارجین و پدینگ spacing

۰۶:۵۷
9

متون هاtext , سایه به باکس ها shadow

۱۱:۱۳
۲

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

۷ قسمت
۰۱:۲۲:۴۴
۳

layout , grid ساختار ستون بندی بررسی حالت های ریسپانسیو موبایل و تب لت و …

۴ قسمت
۰۰:۳۶:۰۴
۴

برسی مباحث کاربردی بخش دوم

۴ قسمت
۰۰:۵۳:۳۷
۵

پروژه طراحی سایت جابینجا بخش جستجو در مشاغل بصورت ریسپانسیو

۶ قسمت
۰۱:۰۶:۲۹
۶

پروژه طراحی سایت با سلام بصورت ریسپانسیو در حالت موبایل

۱۰ قسمت
۰۲:۴۳:۳۱

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

در دوره آموزش bootstrap5 چه می آموزید؟

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

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

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

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

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

پیش نیازهای آموزش bootstrap5 چیست؟

پیش نیاز این دوره آشنایی کامل با html5 css3 است.

این دوره برای چه کسانی مناسب است؟

  • علاقه‌مندان به برنامه‌نویسی
  • دانشجویان رشته‌های کامپیوتر
  • افرادی که قصد کسب درآمد از طراحی وب دارند
  • افرادی که قصد دارند به یک توسعه‌دهنده Front-End حرفه‌ای تبدیل شوند
  • و…

چه نرم افزارهایی در این دوره استفاده شده است؟

در این آموزش bootstrap5 از نرم افزار های Vs Code استفاده شده است.

مزیت این دوره نسبت به سایر دوره های مشابه چیست؟

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

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

وقتی می‌خواهیم یک صفحه وب را طراحی کنیم باید از طریق html، css ، jquery و… صفحه مورد نظر را کدنویسی کنیم، حال اگر بخواهیم یک صفحه وب را در سریع‌ترین شکل ممکن به صورت واکنش گرا طراحی کنیم بهترین گزینه استفاده از Bootstrap است چون ابزاری‌هایی را در اختیار ما قرار می‌دهد که روند طراحی و کدنویسی را سریع‌تر می‌کند.

طراحی قالب یک وبسایت از پایه زمان‌بر است حتی برای کسانی که چندین سال کار کد نویسی قالب انجام داده‌اند و به زبان‌های html، css، جاوا اسکریپت و… تسلط دارند. تعدادی از طراحان و توسعه‌دهندگان توییتر در جهت رفع این مشکل، فریم ورکی به نام بوت استرپ ارائه کردند که طراحی صفحات وب را برای توسعه دهندگان و طراحان وب آسان‌تر کرد. در حال حاضر تعداد زیادی از طراحان صفحات وب از فریم ورک بوت استرپ استفاده می‌کنند.

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

دلایل استفاده از بوت استرپ

  • واکنشگرایی (Responsiveness): بوت استرپ امکان ایجاد طرح‌های واکنشگرا را فراهم می‌کند تا صفحات وب بتوانند به راحتی در انواع دستگاه‌ها و اندازه‌های مختلف نمایش داده شوند.
  • قابلیت سفارشی‌سازی: بوت استرپ دارای قابلیت سفارشی‌سازی بالاست و امکان ایجاد طرح‌های متنوع و منحصربه‌فرد را فراهم می‌کند.
  • جامعیت و کامل بودن: بوت استرپ شامل مجموعه‌ای کامل از کامپوننت‌ها و ابزارهای مورد نیاز برای توسعه وب است که امکان ایجاد طرح‌های کامل و جامع را فراهم می‌کند.
  • جامعه پشتیبانی قوی: بوت‌استرپ یک فریم‌ورک بسیار محبوب است و جامعه قوی و فعالی دارد که می‌توان از آنها برای حل مشکلات استفاده کرد.
  • استفاده رایگان و منبع باز: بوت استرپ یک فریمورک منبع باز و رایگان است که امکان استفاده آزادانه و توسعه آن را فراهم می‌کند.

Bootstrap 5 چیست؟

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

ویژگی های bootstrap5

در این بخش به برخی از ویژگی های اصلی bootstrap5 اشاره شده است.

استفاده از کتابخانه Sass

در نسخه 5 بوت استرپ، توسعه‌دهندگان به جای استفاده از فایل‌های CSS معمولی، از کتابخانه Sass (Syntactically Awesome Style Sheets) استفاده می‌کنند. Sass یک زبان پیش‌پردازشگر CSS است که به توسعه‌دهندگان امکان می‌دهد تا کدهای CSS را به صورت ساختارمند و منطقی بنویسند. این امر باعث افزایش قابلیت تغییر، سازماندهی و قابلیت نگهداری کدهای CSS می‌شود. همچنین Sass امکان استفاده از متغیرها، توابع، شروط و سایر ویژگی‌های پیشرفته‌ای را فراهم می‌کند که در نوشتن کدهای CSS بسیار مفید است.

ارائه‌ی نسخه کامل از آیکن‌ها

یکی دیگر از تغییرات مهم در نسخه 5 بوت استرپ، ارائه‌ی نسخه کامل و یکپارچه‌ای از آیکن‌ها است. در نسخه‌های قبلی بوت استرپ، توسعه‌دهندگان برای استفاده از آیکن‌ها مجبور بودند از کتابخانه‌های جانبی مانند Font Awesome استفاده کنند. اما در نسخه 5، بوت استرپ خود دارای مجموعه‌ای کامل از آیکن‌های مختلف است که توسعه‌دهندگان می‌توانند به راحتی از آن‌ها استفاده کنند. این آیکن‌ها با فرمت SVG ارائه شده‌اند که مزایای زیادی مانند کیفیت بالا، حجم کم و قابلیت تغییر اندازه دارند.

حذف JQuery

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

بروزرسانی برخی کلاس ها در Bootstrap 5

در Bootstrap 5، برخی از کلاس‌های موجود در نسخه‌های قبلی بروزرسانی شده‌اند. برای مثال، کلاس‌های مربوط به جدول‌بندی (grid) به طور کامل تغییر کرده‌اند و بسیار قدرتمندتر شده‌اند. همچنین، برخی کلاس‌های قدیمی مانند col-sm-* و col-md-* حذف و به جای آن‌ها کلاس‌های جدیدی ارائه شده‌اند. این تغییرات باعث می‌شود توسعه‌دهندگان با دید جدیدتری به طراحی رابط کاربری بپردازند.

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

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

چه تفاوتی بین بوت استرپ 5 و بوت استرپ 4 وجود دارد؟

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

کار کردن با بوت استرپ 5 نیز بسیار آسان است و شما می‌توانید ظرف مدت کوتاهی به صورت کامل به آن مسلط شوید. این فریم‌ورک با ارائه کامپوننت‌های آماده مانند دکمه‌ها، فرم‌ها، نوارهای ناوبری و گریدهای انعطاف‌پذیر، فرآیند طراحی و توسعه وب را سریع‌تر می‌کند. دوره آموزش بوت استرپ 5 نیز با همین هدف طراحی شده است که شما به صورت پروژه‌محور بتوانید این فریم‌ورک محبوب را فرابگیرید.

ادامه متن دوره ...