آموزش بوت استرپ 5 به همراه پروژه عملی

بوت‌استرپ 5

قیمت: 250,000 تومان 150,000 تومان

X
31 : 18 : 49
88 جلسه
10 فصل
2 سال پشتیبانی

آموزش بوت استرپ 5 به همراه پروژه عملی

قبلا تا حدودی شما را با فریم ورک بوت استرپ آشنا کردیم. در این مقاله قصد داریم بوت‌ استرپ 5 را به شما معرفی کنیم. با ما همراه باشید.

 

تاریخچه بوت استرپ 5

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

 

زمان انتشار بوت استرپ نسخه 5

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

 

بوت‌استرپ

 

نحوه‌ی دسترسی به بوت استرپ 5

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

 

یادگیری بوت استرپ 5

پر واضح است که در کل برای یادگیری بوت استرپ باید بر دو زبان اصلی HTML  و CSS  کاملا تسلط داشته باشید. چرا که مبنای طراحی اکثریت فریم ورک‌ها این دو زبان می‌باشد. با ساختار صفحات وب، تگ‎‌ها ، عناصر html، دستورات و قوانین css حتما آشنا باشید. سومین موردی که حتما باید به آن تسلط کافی داشته باشید زبان جاوا اسکریپت است چرا که برخی المان های آن مانند اسلایدر و منو و... توسط این زبان نوشته شده‌اند. اما برای یادگیری نسخه‌ی پنجم باید بگویم اگر با نسخه‌های قدیمی مخصوصا نسخه‌ی چهارم کارکرده باشید یادگیری این نسخه راحت خواهد بود. حتی خیلی از افراد با یک‌ مثال که خود مجموعه بوت استرپ در بخش Examples قرار می‌دهد به راحتی می‌توانند به ویژگی‌ها و تغییرات جدید پی ببرند.

 

بوت‌استرپ

 

ویژگی‌های متفاوت بوت استرپ 5

دارای کلاس‌های جدید شبکه‌بندی

نسخه‌های قبلی کلاس‌های شبکه‌بندی تا مدیا کوئری لارج (lg) یعنی عرض 1024 پیکسل ساپورت می‌کردند. اما در آخرین ورژن یک کلاس شبکه‌بندی جدید به عنوان col-xxl  تحولی را در عرض شبکه‌بندی‌ها ایجاد کرد. به گونه‌ای که نمایشگرهای بزرگ تر از 1400 پیکسل را هم ساپورت می‌کنند.

برخی از کلاسهای اضافه شده در این نسخه عبارتند از:

gx-*(classes control the horizontal/column gutter width)

gy-*(classes control the vertical/row gutter width)

g-*(classes control the horizontal & vertical gutter width)

rows-cols-auto

 

طیف گسترده‌تر رنگ‌ها در بوت استرپ 5

دو کلاس خیلی مهم در این زمینه به کلاس‌های نسخه‌ی چهارم اضافه شدند که شامل دو کلاس bg-opacity و bg-gradient می‌باشند. ما در نسخه‌های قبلی بسیار محدود بودیم و در این نسخه‌ از طی رنگ گسترده‌تری برخوردار هستیم.

 

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

Sass  مخفف واژه Syntactically Awesome StyleSheets می‌باشد. قبل از اینکه اشاره کنم در نسخه‌ی پنجم چه کاری را انجام می‌دهد بهتر است علت ارائه‌ی آن را توضیح دهم. Css یکی از ساده‌ترین زبان‌های برنامه‌نویس است. اما روزانه با تحولاتی که برای این زبان رغم می‌خورد پیچیده‌تر و برزگ‌تر می‌شود. در نتیجه استفاده از آن سخت‌تر و پردازش کدها بسیار زمان می‌برد.  در این راستا Sass طراحی شد تا امکانات جدیدی مانند متغییرها، چیدمان تگ‌ها، ترکیب کدها و ویژگی‌های دیگری از یک زبان برنامه‌نویسی را به Css اضافه کند. این کتابخانه که از شاخه‌ای از سی اس اس است بز مبنای جاوا اسکریپت طراحی شده است. کاربرد این کتابخانه این است که به راحتی می‌توانیم بر مبنای چیزی که احتیاج داریم متغیر تعریف کنیم. در نتیجه کدهای بهتری می‌توانیم ارائه دهیم. در این نسخه از Sass استفاده شده که به راحتی می‌توانیم تغییرات خودمان را به بوت‌استرپ اضافه کنیم.

 

بوت استرپ

 

حذف JQuery در بوت استرپ 5

جی کوئری  یک کتابخانه از جاوا اسکریپت است که برای توسعه‌ی سریع وب ارائه شد. در این راستا 4 اقدام مهم انجام می‌دهد. اسناد HTML را می‌سنجد. به رویدادها رسیدگی می‌کند. و متحرک‌سازی و تعاملات  (AJAX) را به عهده دارد. این کتابخانه  به گونه‌ای طراحی شد تا روشی را که با آن جاوا اسکریپت را می نویسند تغییر دهد. اما برای عمکرد سریع‌تر  جی کوئری  از فریم ورک ورک بوت‌استرپ 5 حذف شد. vanilla js به عنوان جایگزین ارائه شد که بسیار نزدیک به هسته‌ی اصلی جاوا اسکریپت می‌یاشد. همچنین دست توسعه‌دهندگان بوت‌استرپ برای قابلیت‌های به روزتر و مدرن‌تر باز‌تر خواهد بود. بعضی افراد که به این کتاخانه تسلط کافی ندارند می‌توانند همچنان از جی کوئری استفاده کنند. اما باید بگویم که این نسخه با وانیلا سازگاری بیشتری دارد.

 

بوت‌ استرپ 5 از اینترنت اکسپلور پشتیبانی نمی‌کند.

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

 

بروز کردن فرم کنترل‌ها

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

 

توسعه‌ی بیشتر Navbar  و فرم‌ها

یکی از کامپوننت‌های جذاب بوت استرپ ، Navbar می‌باشد. و بهتر از همه اینکه منو بار و فرم‌ها در بوت استرپ در نسخه‌ی پنج بهبود یافته است. در نتیجه کاربر دسترسی بیشتری خواهد داشت.

 

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

SVG  یا همان  Scalable Vector Graphics کمک می‌کند تا همه‌ی فایل‌ها از جمله آیکون‌ها، لوگوها و ترسیمات در سایت به بهترین، زیباترین، و با کیفیت‌ترین حالت ممکن قابل مشاهده باشند. بر این اساس در سایت فقط یک راه وجود دارد که از این کتابخانه استفاده کنیم. نسخه‌ی پنجم این کتابخانه را در اختیار ما قرار داده است. به کمک این ابزار می‌توانیم با حجم مناسب و کیفیت و تنوع مناسب در سایت هر فایلی را ارائه دهیم.

 

در پایان

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

 

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

بررسی وب سایت بوت استرپ و نحوه استفاده
  • بررسی وب سایت بوت استرپ و پیش نیاز ها

  • نحوه نصب و استفاده از بوت استرپ

  • بررسی Layout و ابزار قدرتمند flex
  • بررسی breakpoint ها و کلاس container

  • بررسی grid (قسمت 1)

    منتشرشده 00:17:00
  • بررسی grid (قسمت 2)

    منتشرشده 00:14:17
  • بررسی grid (قسمت 3)

    منتشرشده 00:09:31
  • بررسی grid (قسمت 4)

    منتشرشده 00:10:55
  • بررسی grid (قسمت آخر)

    منتشرشده 00:10:27
  • چیدمان در بوت استرپ (Columns)(جلسه 1)

    منتشرشده 00:11:53
  • چیدمان در بوت استرپ (Columns)(جلسه 2)

    منتشرشده 00:14:15
  • چیدمان واکنشگرا و Display در بوت استرپ

    منتشرشده 00:15:20
  • ابزار قدرتمند flex (جلسه 1)

    منتشرشده 00:14:36
  • ابزار قدرتمند flex (جلسه 2)

    منتشرشده 00:12:11
  • ابزار قدرتمند flex (جلسه 3)

    منتشرشده 00:15:35
  • سفارشی سازی المان ها (order)

    منتشرشده 00:13:09
  • مینی پروژه (ساخت منوی وب سایت)

    منتشرشده 00:16:40
  • ادامه مبحث چیدمان

    منتشرشده 00:08:39
  • Gutter در بوت استرپ

    منتشرشده 00:09:31
  • ابزار های مهم بوت استرپ
  • spacing (margin & padding)

    منتشرشده 00:18:24
  • bootstrap-reboot

    منتشرشده 00:07:29
  • کار با متن ها در بوت استرپ (جلسه 1)

    منتشرشده 00:25:10
  • کار با متن ها در بوت استرپ (جلسه 2)

    منتشرشده 00:26:55
  • تصاویر و شناور کردن در بوت استرپ (img & float)

    منتشرشده 00:18:01
  • رنگ ها در بوت استرپ

    منتشرشده 00:26:35
  • background & border

    منتشرشده 00:23:20
  • position در بوت استرپ (جلسه اول)

    منتشرشده 00:19:24
  • position در بوت استرپ (جلسه دوم)

    منتشرشده 00:16:54
  • دکمه ها در بوت استرپ (Buttons)

    منتشرشده 00:23:01
  • Button group در بوت استرپ

    منتشرشده 00:18:57
  • آیکون های بوت استرپ
  • استفاده از آیکون ها

    منتشرشده 00:15:23
  • پروژه ی قالب وب سایت شخصی
  • معرفی پروژه اول

  • قالب وب سایت شخصی (جلسه اول)

    منتشرشده 00:25:24
  • قالب وب سایت شخصی (جلسه دوم)

    منتشرشده 00:29:39
  • قالب وب سایت شخصی (جلسه سوم)

    منتشرشده 00:31:54
  • قالب وب سایت شخصی (جلسه آخر)

    منتشرشده 00:11:49
  • کامپوننت های بوت استرپ
  • nav در بوت استرپ

    منتشرشده 00:17:22
  • collapse در بوت استرپ

    منتشرشده 00:15:52
  • dropdown در بوت استرپ

    منتشرشده 00:22:57
  • navbar در بوت استرپ

    منتشرشده 00:27:20
  • offcanvas در بوت استرپ

    منتشرشده 00:21:04
  • carousel در بوت استرپ (اسلایدر)

    منتشرشده 00:29:47
  • accordion و alert در بوت استرپ

    منتشرشده 00:28:00
  • breadcrumb و card در بوت استرپ

    منتشرشده 00:31:54
  • List Group در بوت استرپ

    منتشرشده 00:21:35
  • modal در بوت استرپ

    منتشرشده 00:23:35
  • pagination و placeholder

    منتشرشده 00:21:07
  • popovers و progress در بوت استرپ

    منتشرشده 00:27:19
  • Scrollspy و Spinners

    منتشرشده 00:32:57
  • Toasts در بوت استرپ

    منتشرشده 00:28:36
  • tooltip و ادامه کار با ابزار های بوت استرپ

    منتشرشده 00:24:09
  • فرم ها در بوت استرپ
  • فرم ها در بوت استرپ

    منتشرشده 00:10:38
  • فرم ها در بوت استرپ (جلسه دوم )

    منتشرشده 00:19:47
  • فرم ها در بوت استرپ (جلسه سوم )

    منتشرشده 00:16:40
  • Input Group

    منتشرشده 00:16:32
  • اعتبار سنجی فرم ها

    منتشرشده 00:27:13
  • کار با جداول در بوت استرپ
  • کار با جدول در بوت استرپ (1)

    منتشرشده 00:11:05
  • کار با جدول در بوت استرپ (2)

    منتشرشده 00:26:02
  • پروژه عملی قالب فروشگاه
  • معرفی پروژه عملی فروشگاه

  • پروژه عملی فروشگاه (تنظیمات اولیه)

    منتشرشده 00:27:53
  • پروژه عملی فروشگاه (ساخت navbar)

    منتشرشده 00:31:50
  • پروژه عملی فروشگاه (تکمیل navbar)

    منتشرشده 00:32:16
  • پروژه عملی فروشگاه (اسلایدر و گالری تصاویر)

    منتشرشده 00:32:42
  • پروژه عملی فروشگاه (افزودن 2 اسلایدر به صفحه اصلی)

    منتشرشده 00:29:11
  • پروژه عملی فروشگاه (فوتر و تکمیل صفحه اصلی)

    منتشرشده 00:41:39
  • پروژه عملی فروشگاه (صفحه فروشگاه)

    منتشرشده 00:31:21
  • پروژه عملی فروشگاه (پایان صفحه فروشگاه و ایجاد صفحه تکی محصول)

    منتشرشده 00:25:42
  • پروژه عملی فروشگاه (ادامه صفحه تکی محصول)

    منتشرشده 00:34:01
  • پروژه عملی فروشگاه (صفحه تکی محصول نظرات کاربران)

    منتشرشده 00:31:08
  • پروژه عملی فروشگاه (اتمام صفحه تکی محصول)

    منتشرشده 00:34:30
  • ایجاد صفحه ورود به سایت و ثبت نام

    منتشرشده 00:22:47
  • طراحی یک وب سایت آموزشگاهی
  • معرفی پروژه دوم

    منتشرشده 00:09:45
  • ایجاد پروژه

    منتشرشده 00:25:16
  • افزودن loader

    منتشرشده 00:20:12
  • افزودن Search Box

    منتشرشده 00:20:55
  • تکمیل Header

    منتشرشده 00:21:56
  • افزودن Dropdown Notification به Header

    منتشرشده 00:34:35
  • افزودن منوی کاربر

    منتشرشده 00:25:14
  • افزودن منو

    منتشرشده 00:17:06
  • افزودن اسلایدر

    منتشرشده 00:27:44
  • تنظیمات اسلایدر

    منتشرشده 00:22:16
  • افزودن اسلایدر دوم

    منتشرشده 00:26:02
  • تنظیم اسلایدر دوم و سوم

    منتشرشده 00:22:58
  • تنظیمات اسلایدر 2 و 3

    منتشرشده 00:24:34
  • ادامه پروژه عملی

    منتشرشده 00:16:55
  • افزودن اسلایدر دوره ها

    منتشرشده 00:18:12
  • ادامه اسلایدر دوره ها

    منتشرشده 00:17:01
  • اتمام اسلایدر دوره ها

    منتشرشده 00:20:11
  • افزودن قسمت وبلاگ به صفحه اصلی

    منتشرشده 00:33:12
  • پیشنیاز های دوره چه چیزهایی هستند؟

    • این دوره پیشنیازی ندارد

    نظرات دانشجویان

     abolfazl  hosseiny

    abolfazl hosseiny | دانشجوی دوره آموزش بوت استرپ 5 به همراه پروژه عملی

    خیلی ممنون همین الان خریداری کردم خیلیم عالی❤️

    مدرس دوره

    فرهاد اصلانی


    • همیشه آپدیت اش
    • github