دوره آموزشی
دوبله زبان فارسی
تسلط به بوتاسترپ 5 - کشف بوتاسترپ از مبتدی تا حرفهای
✅ سرفصل و جزئیات آموزش
آنچه یاد خواهید گرفت:
- یاد میگیرید چگونه بوتاسترپ را با استفاده از CDN بوتاسترپ یا پوشه کامل دانلود شده بوتاسترپ به پروژههای خود لینکدهی کنید.
- سفارشیسازی بوتاسترپ با دستکاری ویژگیها، متغیرها و کلاسهای CSS
- یاد میگیرید چگونه از استک واکنشگرا (استک افقی و عمودی) در بوتاسترپ برای طراحی طرحبندی وبسایتها استفاده کنید.
- یاد میگیرید چگونه از ستونهای سطر و طراحی Flex در بوتاسترپ برای ایجاد طرحبندیهای متفاوت وبسایت استفاده کنید.
- تسلط به نوار ناوبری واکنشگرا، ناوبریها، pills، تبها، offcanvas و منوی کشویی
- درک کامل سیستم گرید 12 ستونه بوتاسترپ برای طراحی طرحبندیهای مختلف وبسایت
- بررسی نحوه ساختاردهی عناصر بوتاسترپ مانند هشدار، مودال، toast، پاپاوور و tooltips
- تسلط به کاروسل بوتاسترپ و نحوه سفارشیسازی آن
- استفاده از کلاسهای بوتاسترپ (آیکونها، لینکها، شناورها، اندازهها، فاصلهها، متن، رنگ پسزمینه، نمایش، موقعیت و بوردر) برای استایلدهی سریع و مؤثر عناصر
- تسلط به هنر استفاده از بوتاسترپ برای ساختاردهی صفحهبندی، دکمهها، نشانها، نوار پیشرفت و breadcrumb
- تسلط به طرحبندیهای انعطافپذیر scrollspy، آکاردئون و collapse در بوتاسترپ
- اعمال کلاسهای بوتاسترپ برای ساختاردهی جداول، گروههای لیست، کارتها و فرمها
پیشنیازهای دوره
- ابتدا باید با HTML و CSS آشنا باشید و درک خوبی از CSS داشته باشید.
- آشنایی با Flexbox ضروری نیست اما دانش آن کمککننده است.
- یک لپتاپ با ویرایشگر کد نصب شده نیاز دارید؛ مانند ویژوال استودیو کد یا متن Sublime - ما از ویژوال استودیو کد استفاده خواهیم کرد.
توضیحات دوره
این یک دوره جامع بوتاسترپ 5 است.
توجه - این دوره شامل SASS، حلقهها، نقشهها، مودیفایرها یا میکسینها نیست. همچنین آموزش نصب بوتاسترپ از طریق NPM در دوره وجود ندارد.
از اینکه این دوره جامع بوتاسترپ را تهیه کردید، ممنونیم. در این دوره میتوانیم اسرار بوتاسترپ را کشف کرده و معنای پشت مفاهیم بوتاسترپ 5 را درک کنیم.
بیصبرانه منتظریم که شما را با این ابزار قدرتمند راهنمایی کنیم؛ ابزاری که مهارتهای توسعه وب شما را با استفاده از فریمورک بوتاسترپ متحول میکند. اگر در بوتاسترپ تازهکار هستید و میخواهید نحوه توسعه طرحبندیهای وبسایت را یاد بگیرید یا توسعهدهنده باتجربه هستید که میخواهد مهارتهای فرانتاند خود را ارتقا دهد، این دوره به گونهای طراحی شده که پایهای قوی و دانش کاربردی برای ساخت وبسایتهای زیبا و واکنشگرا به شما ارائه دهد.
در پایان دوره:
قادر خواهید بود با استفاده از قابلیت فریمورک بوتاسترپ، وبسایتی حرفهای و چندصفحهای طراحی و اجرا کنید.
چرا این دوره؟
یاد میگیرید چگونه بوتاسترپ را در پروژههای خود با استفاده از CDN بوتاسترپ یا به صورت محلی با پوشه کامل دانلود شده لینکدهی کنید.
سفارشیسازی کلاسها، متغیرها و ویژگیهای بوتاسترپ با استفاده از CSS
- درک کامل سیستم گرید 12 ستونه بوتاسترپ برای طراحی انواع طرحبندیهای وبسایت
- یاد میگیرید چگونه از ستونهای سطر و طراحی Flex در بوتاسترپ برای ایجاد طرحبندیهای مختلف وبسایت استفاده کنید.
- یاد میگیرید چگونه از استک واکنشگرا (استک افقی و عمودی) بوتاسترپ برای طراحی طرحبندیهای وبسایت استفاده نمایید.
- تسلط به کاروسل در بوتاسترپ و نحوه سفارشیسازی آن
- تسلط به طرحبندیهای scrollspy، آکاردئون و collapse در بوتاسترپ
- آشنایی با نحوه ساختاردهی هشدار، مودال، toast، پاپاوور و tooltip در بوتاسترپ
- تسلط به نوار ناوبری واکنشگرا، ناوبریها، pills، تبها، offcanvas و منوی کشویی
- استفاده از کلاسهای بوتاسترپ برای ساختاردهی جداول، گروههای لیست، کارتها و فرمها
- تسلط به هنر استفاده از بوتاسترپ برای ساختاردهی صفحهبندی، دکمهها، نشانها، نوار پیشرفت و breadcrumb
- استفاده سریع و مؤثر از کلاسهای بوتاسترپ (آیکونها، لینکها، شناورها، اندازهها، فاصلهها، متن، رنگ پسزمینه، نمایش، موقعیت و بوردر) برای استایلدهی
چرا بوتاسترپ؟
بوتاسترپ محبوبترین فریمورک توسعه فرانتاند در دنیا است و به شما کمک میکند وبسایتی عالی بسازید و در زمان کوتاهی آن را راهاندازی کنید. شروع کار با بوتاسترپ بسیار آسان است؛ تنها چیزی که نیاز دارید درک خوبی از HTML و CSS است.
با بوتاسترپ میتوانید طراحی هماهنگ و حرفهای در اپلیکیشن موبایل خود داشته باشید. بوتاسترپ مجموعهای از استایلها و تمهای از پیش تعریف شده دارد که به آسانی قابل سفارشیسازی هستند تا با هویت برند شما هماهنگ شوند. بوتاسترپ با مرورگرهای مدرن مانند کروم، فایرفاکس، سافاری، اینترنت اکسپلورر و غیره کاملاً سازگار است.
با بوتاسترپ، توسعهدهندگان میتوانند با استفاده از کامپوننتهای از پیش طراحی شده و نیز سیستم گربد برای ایجاد طرحبندیهای واکنشگرا، در زمان و تلاش خود صرفهجویی کنند. همچنین بوتاسترپ گزینهها و یوتیلیتیهای متعددی برای استایلدهی فراهم میکند که ظاهر و عملکرد کلی وبسایتها را بهبود میبخشد.
بوتاسترپ به طور گسترده توسط توسعهدهندگان وب جهت تسریع فرآیند توسعه وب و ساخت رابطهای کاربری منسجم و زیبا به کار میرود.
سیستم گرید در بوتاسترپ 5، طرحبندی جدید و انعطافپذیری ارائه میدهد. این نسخه یک یوتیلیتی جدید gap معرفی کرده و دیگر به شناورها وابسته نیست.
کارهای بسیار بیشتری با بوتاسترپ میتوان انجام داد:
- به راحتی وبسایتهای واکنشگرا بسازید.
- با یوتیلیتیهای متن، سایه، opacity، بوردر، لینکها، رنگهای پسزمینه و غیره کار کنید.
- طرحبندی چندستونی را به سرعت با کلاسهای از پیش تعریف شده ایجاد کنید.
- انواع مختلف نوارهای ناوبری را سریع بسازید.
همین حالا در دوره شرکت کرده و از سفر در فریمورک بوتاسترپ 5 لذت ببرید.
این دوره برای چه کسانی مناسب است؟
- علاقهمندان به طراحی وب که میخواهند مهارتهای بوتاسترپ خود را ارتقا دهند و همچنین هر توسعهدهنده فرانتاند که به دنبال پایهای قوی و دانش کاربردی برای ساخت وبسایتهای واکنشگرا با بوتاسترپ است.
- این دوره برای مبتدیان بوتاسترپ مناسب است اما نیاز است که به CSS تسلط کافی داشته باشید.
تسلط به بوتاسترپ 5 - کشف بوتاسترپ از مبتدی تا حرفهای
-
مقدمه - بخش 1 15:16
-
مقدمه - بخش 2 09:54
-
مقدمه - بخش 2 08:21
-
بررسی پروژههای شخصیسازی CSS برای کلاسهای بوتاسترپ 06:16
-
مقدمه - بخش 6 03:10
-
مقدمه - بخش 7 13:15
-
چگونه ویرایشگر متن را دانلود کنیم؟ - ویژوال استودیو کد یا Sublime Text 03:00
-
چگونه بوتاسترپ را به پروژه خود لینکدهی کنیم؟ - درس مهم 16:10
-
قالب بوتاسترپ ما و دسترسی به فایل CSS بوتاسترپ - درس مهم 04:22
-
دسترسی به فایلهای جاوااسکریپت بوتاسترپ - bundle.js و snippets.js (مهم!!) 03:52
-
نقاط شکست 16:35
-
آیکونهای بوتاسترپ - روش اول (مهم) 10:35
-
آیکونهای بوتاسترپ - روش دوم (مهم) 31:45
-
یوتیلیتی متن - بخش 1 19:35
-
یوتیلیتی متن - بخش 2 13:05
-
کوتاه کردن متن 04:00
-
انتخاب متن 05:06
-
رویدادهای اشارهگر 06:12
-
Monospace 03:28
-
Blockquote 10:23
-
هدینگها و نمایش هدینگ 12:30
-
Opacity 08:41
-
سایه 09:10
-
رنگ و opacity متن 17:46
-
رنگ پسزمینه متن با opacity 07:47
-
رنگ پسزمینه با opacity و گرادیان 15:55
-
یوتیلیتی لینک 21:31
-
ریست کردن رنگ 04:51
-
لینک کشیده شده 16:14
-
لینک آیکون - روش اول 09:55
-
لینک آیکون - روش دوم (مهم) 17:47
-
تغییر رنگها در لینک آیکون 05:17
-
حلقه فوکوس 14:51
-
بوردر - رنگ، opacity، عرض، جمعکننده و تفاضلی 16:24
-
شعاع بوردر 15:44
-
یوتیلیتی نمایش - بخش 1 12:06
-
یوتیلیتی نمایش - بخش 2 20:37
-
یوتیلیتی Overflow 07:55
-
خطکش عمودی 09:58
-
خطکش افقی 06:51
-
موقعیت نسبی 11:51
-
موقعیت مطلق 18:44
-
موقعیت مطلق زمانی که والد دارد 09:51
-
موقعیت ثابت و چسبنده 13:39
-
رویتپذیری - پنهان در مقابل آشکار - هیچ کدام 05:50
-
از نظر ویژوال پنهان 12:59
-
فاصلهها - Padding و مارجین 19:58
-
mx-auto 04:43
-
اندازهها - عرض و ارتفاع 27:53
-
حداکثر عرض و ارتفاع تصاویر 11:44
-
ویژگی شناوری 15:59
-
ویژگی شناوری روی تصاویر و ویدئوها (شناوری دو آیتم مساوی) 22:29
-
شناوری سه و چهار آیتم مساوی 21:11
-
Breadcrumb 14:15
-
دکمهها - btn و btn-color 15:32
-
دکمههای Outline، اندازه و بلوک 14:01
-
دکمههای Toggle 11:41
-
توضیح چرایی نیاز به aria Attribute 05:07
-
دکمه بستن 09:07
-
گروه دکمهها 19:48
-
چکباکس و دکمه رادیویی 23:33
-
گروه دکمههای عمودی 07:09
-
ساختار صفحهبندی - درس مهم 19:05
-
کار با آیکونها در صفحهبندی 19:19
-
state های فعال و غیرفعال 08:43
-
اندازه صفحهبندی 03:35
-
ترازبندی صفحهبندی 06:10
-
نوار پیشرفت - عرض، رنگ و ارتفاع 17:42
-
نوار پیشرفت - راه راه و انیمیشنی 12:16
-
نوار پیشرفت - نوار پیشرفت چندتایی 09:39
-
نشانها 18:23
-
نشانهای پوزیشنال 15:31
-
ورودی کیبورد 06:54
-
جایبان و رنگ آن 09:48
-
اندازههای جایبان 03:49
-
انیمیشن جایبان 16:05
-
ساختار یک جدول - درس مهم 18:55
-
کپشن جدول، جدول کوچک، تقسیمکنندههای گروه جدول 08:33
-
ترازبندی عمودی 13:43
-
بوردرهای جدول 07:43
-
جدول واکنشگرا 13:27
-
رنگهای پسزمینه روی جدول، سطرها و سلولها 11:29
-
جدول راه راه 12:07
-
جدول قابل هاور و جدول فعال 11:58
-
تصاویر و ویدئوهای شناور با Thumbnail 16:12
-
ترازبندی تصاویر و ویدئوها 13:44
-
Object-fit برای تصاویر و ویدئوها 23:38
-
شکلها 15:13
-
نسبت ابعاد 17:52
-
ساختار یک کاروسل - درس مهم 30:54
-
نشانگرهای کاروسل 15:18
-
کپشنهای کاروسل 09:38
-
حالت تاریک کاروسل، پخش خودکار و فاصلهها 13:49
-
کاروسل با افکت Crossfade 09:29
-
سفارشیسازی فلشهای قبلی و بعدی نشانگرهای کاروسل 17:03
-
سفارشیسازی کپشن کاروسل 05:19
-
سفارشیسازی نشانگرهای کاروسل 06:07
-
سفارشیسازی نشانگرهای کاروسل به صورت تصاویر 20:32
-
سفارشیسازی کانتینر فلش کاروسل 05:32
-
هشدار و رنگ هشدار 08:12
-
لینک هشدار 08:17
-
افزودن محتوای بیشتر به باکس هشدار 06:07
-
افزودن آیکونها به هشدار 07:09
-
هشدار قابل بسته شدن 15:52
-
هشدار فعال شده توسط دکمه و سفارشیسازی پیام 15:31
-
سفارشیسازی دکمه تریگر دیگر برای هشدار 11:00
-
هشدار قابل بسته شدن با آیکون 06:48
-
ساختار Toast - بخش 1 - درس مهم 18:10
-
ساختار Toast - بخش 2 - درس مهم 12:11
-
افزودن تصویر و دکمهها به toast 10:34
-
افزودن نکات نهایی به toast 13:43
-
ساختار مودال - بخش 1 - درس مهم 27:57
-
ساختار مودال - بخش 2 - درس مهم 12:36
-
مودال قابل اسکرول 12:52
-
تعبیه ویدئوی یوتیوب، افزودن تصاویر و ویدئوها به مودالها 14:19
-
مودال با مرکزیت عمودی 07:01
-
Toggle کردن بین مودالها 18:20
-
اندازههای مودال - کوچک، بزرگ و خیلی بزرگ 11:12
-
مودال تمام صفحه 12:45
-
ساختار offcanvas - درس مهم 17:52
-
جایگذاری Offcanvas و Offcanvas استاتیک 08:54
-
اندازههای واکنشگرای Offcanvas 08:07
-
فعالسازی اسکرول کردن بادی و Offcanvas تاریک 14:03
-
ساختار یک Tooltip - بسیار مهم 17:44
-
جایگذاری Tooltip 07:04
-
Tooltip روی لینکها، متن و آیکونها 18:35
-
ساختار پاپاوور - مهم 22:40
-
پاپاوور قابل هاور و پاپاوور قابل بسته شدن 05:00
-
جایگذاری پاپاوورها 07:34
-
ساختار منوی کشویی - مهم 19:21
-
افست منوی کشویی 04:57
-
منوی کشویی با حالتهای فعال، غیرتعاملی، غیرفعال، هدر و تقسیمکننده 13:15
-
منوی کشویی تاریک 04:46
-
لینک کشویی 03:33
-
منوی کشویی گروه دکمه 08:47
-
رفتار بسته شدن خودکار در منوی کشویی 10:37
-
دکمه کشویی تقسیم شده 15:19
-
جهتها - dropup و dropend و dropstart و مرکزی 11:44
-
اندازههای منوی کشویی 04:46
-
ترازبندی منو و ترازبندی واکنشگرا 11:48
-
ساختار اولیه ناوبری - درس مهم 12:34
-
ترازبندی افقی ناوبری 04:15
-
ناوبری عمودی 05:00
-
ناوبری با خط زیرین 03:50
-
ناوبری با منوی کشویی - درس مهم 09:55
-
استفاده از عناصر <nav> و <ul>/<ol> برای ناوبری 02:59
-
Pills - درس مهم 15:44
-
اعمال یوتیلیتی Flex به Pills و ناوبری 06:48
-
Pills با منوی کشویی 02:42
-
تبها 07:57
-
تب با منوی کشویی 03:28
-
رفتار جاوااسکریپت در تبهای ناوبری - بخش 1 - مهم 21:14
-
رفتار جاوااسکریپت در تبهای ناوبری - بخش ۲ - مهم 09:05
-
رفتار جاوااسکریپت در Pills 07:50
-
رفتار جاوااسکریپت در Pills عمودی - مهم 10:04
-
کانتینرها - بسیار مهم 26:04
-
ساختار اولیه نوار ناوبری - درس مهم 16:50
-
Navbar-brand با تصویر و متن 12:49
-
نوار ناوبری بدون استفاده از لیست 05:29
-
قرار دادن navbar-brand در سمت راست 04:06
-
نوار ناوبری با منوی کشویی 08:06
-
افزودن فرم جستجو به نوار ناوبری 15:41
-
اسکیماهای رنگ 12:59
-
درک CSS پشت تم تاریک 05:11
-
Toggler نوار ناوبری - مهم 21:51
-
Toggler نوار ناوبری - نکات نهایی 07:12
-
جایگذاری Toggler نوار ناوبری 07:21
-
منوی فرعی کشویی - مهم 23:58
-
اسکرول کردن قابل Toggle 06:56
-
نوار ناوبری Offcanvas (مهم) 17:11
-
جایگذاری نوار ناوبری 08:21
-
استک افقی - hstack. 15:29
-
استک واکنشگرا Hstack 11:27
-
طرحبندیها با hstack 12:10
-
نوار ناوبری hstack 16:43
-
ساخت فرم درونخطی با hstack. 10:33
-
استک عمودی - vstack. 05:57
-
ساخت فرم با vstack. 03:19
-
تودرتوسازی vstack داخل hstack 14:33
-
طرحبندی Masonry با vstack تودرتو داخل hstack 17:25
-
اعمال طرحبندی Masonry روی رسانه 14:54
-
نمایش flex، نمایش inline-flex، فاصله (Gap) 14:49
-
Flex-fill 09:24
-
تغییرات واکنشگرای نمایش flex، نمایش inline-flex 04:58
-
جهت فلکس - سطر، سطر معکوس، ستون، ستون معکوس 21:27
-
اعمال ستون و سطر با نقاط شکست برای واکنشگرایی 19:04
-
جاستیفای کردن محتوا در سطر 14:26
-
جاستیفای کردن محتوا در ستون 12:10
-
ترازبندی آیتمها در سطر 08:03
-
ترازبندی آیتمها روی ستون 04:50
-
در مرکز کردن آیتمهای flex به صورت افقی و عمودی 03:39
-
Flex wrap و wrap-reverse 14:04
-
ترازبندی محتوا در سطر 10:39
-
ترازبندی محتوا در ستون 07:56
-
طرحبندی Masonry با Flex Column و Flex wrap 18:54
-
طرحبندی Masonry برای رسانه (عکس و ویدئو) 18:29
-
مارجینهای خودکار در Flex 04:39
-
ترتیب Flex 10:57
-
Flex Grow و Shrink 10:14
-
Align-self 06:24
-
ستونهایی با عرض مساوی (.col) با سطر و کانتینر (مهم) 16:54
-
شکست ستونها 06:45
-
ستونهای مساوی با نقاط شکست (col-sm و col-md و غیره) 10:23
-
مرتبسازی مجدد ستونها 05:27
-
ستونهای خودکار (.col-auto) و نقاط شکست آن (.col-lg-auto و .col-md-auto و غیره) 13:46
-
ستونهای مساوی با استفاده از col-1 و col-2 و col-3 و col-4 و col-6 17:12
-
ستونهای مستقل (col-1 تا col-12) 08:02
-
ترکیب ستونهایی با عرض مختلف (col-1 تا col-12) برای رسیدن به سیستم گرید 12 ستونه 08:37
-
ترکیب col-1 تا col-12 با col و col-auto 08:26
-
wrap کردن ستونها 07:48
-
ستونهای با عرض مشخص با نقاط شکست (col-sm-6 و col-md-8 و غیره) 07:43
-
ترکیب و تطبیق با ستونهای مختلف 09:47
-
مارجین خودکار روی ستونها 02:56
-
تودرتوسازی ستونها 12:01
-
ستونهای سطر (.row-cols-auto و .row-cols-1 و .row-cols-2 و غیره) 08:06
-
ستونهای سطر با نقاط شکست 04:33
-
ترازبندی عمودی ستونها (کلاسهای -*align-items) 07:30
-
ترازبندی افقی (کلاسهای -*justify-content) 06:53
-
افست کردن ستونها 16:00
-
Gutters افقی - -*gx (مهم) 14:09
-
Gutters عمودی - -*gy 08:54
-
Gutters افقی و عمودی - -*g (مهم) 07:42
-
زمانی که Gutters g-0 کاربردی است 05:09
-
اعمال Gutters با -*g روی ستونهای سطر (-*row-cols) 04:26
-
سیستم گرید کاروسل 10:54
-
سیستم کاروسل Ride با پخش خودکار 04:47
-
لیستهای بوتاسترپ (بدون استایل و لیستهای درونخطی) 08:34
-
ساختار لیست توضیحات 07:02
-
طرحبندی لیست توضیحات در بوتاسترپ 08:32
-
ساختار گروه لیست - مهم 09:10
-
گروه لیست با رنگها 05:45
-
گروه لیست با flush 03:02
-
گروه لیست با لینکها و دکمهها 08:07
-
گروه لیست شمارهگذاری شده 04:17
-
گروه لیست چکباکس و رادیویی 14:41
-
گروه لیست با نشانها 12:19
-
محتوای سفارشی گروه لیست 15:37
-
گروه لیست افقی 12:13
-
گروه لیست افقی با نشانها 04:20
-
گروه لیست با رفتار جاوااسکریپت - درس مهم 25:08
-
گروه لیست Scrollspy - بسیار مهم 32:21
-
لیست ساده (انکرها) با Scrollspy 21:18
-
Scrollspy برای pills ناوبری 14:03
-
Scrollspy برای Pills نوار ناوبری کشویی 08:15
-
Scrollspy برای Pills ناوبری تودرتو 30:59
-
ساختار آکاردئون - بخش 1 (مهم) 21:03
-
ساختار آکاردئون - بخش 2 (مهم) 10:54
-
ساختار آکاردئون - بخش 3 (مهم) 06:56
-
آکاردئون همیشه باز 04:15
-
آکاردئون که به طور پیشفرض محتوا را نمایش میدهد 08:23
-
Flush آکاردئون 04:28
-
ساختار Collapse با استفاده از عنصر انکر (مهم) 11:13
-
ساختار Collapse با استفاده از عنصر دکمه 04:11
-
عملکرد collapse با عرض و ارتفاع 07:41
-
Collapse با چند هدف - مهم 12:26
-
ساختار کارت - مهم 12:14
-
کارت با رنگ متن 01:39
-
کارت با هدر و فوتر 06:50
-
ترازبندی متن در یک کارت 02:35
-
کارت با لینکها، لینک کشیده شده و دکمه 08:00
-
کارت با بوردر و رنگ پسزمینه 05:28
-
کارت با تصویر (در بالا و پایین) 08:01
-
کارت با پوشش تصویری 10:04
-
جایبان برای کارتها 12:28
-
کارت افقی 11:44
-
ساخت طرحبندی گرید ستونی (.col و .col-*) برای کارت 08:50
-
ساخت طرحبندی ستونهای سطر (row-col-*) برای کارت 12:55
-
کارت با گروه لیست 05:08
-
کارت Kitchen sink 06:29
-
تماشا کنید - آشنایی با کارت با رفتار جاوااسکریپت در pill های ناوبری و تبهای ناوبری 03:31
-
کارت با رفتار جاوااسکریپت در pill های ناوبری 22:49
-
کارت با رفتار جاوااسکریپت در تبهای ناوبری 06:12
-
گروه کارتها 15:04
-
چکباکس - با و بدون برچسب 19:25
-
چکباکس - به صورت درونخطی و معکوس 10:10
-
دکمه رادیویی 18:26
-
دکمههای Toggle چکباکس و رادیویی 12:13
-
سوئیچ 09:29
-
محدوده 21:25
-
ساختار اولیه Select - مهم 12:11
-
Select - اندازهها، attribute چندگانه و attribute اندازه 10:51
-
لیست داده 14:20
-
کنترلهای فرم 22:30
-
کنترلهای فرم Readonly 05:04
-
گروه ورودی - بخش 1 21:48
-
گروه ورودی - بخش 2 08:00
-
برچسبهای شناور - بخش 1 14:35
-
برچسبهای شناور - بخش 2 10:53
-
فرم منوی کشویی 13:15
-
طرحبندیهای فرمها با col-{breakpoint} و row-cols-* و col-{breakpoint}-* 34:02
-
اندازه برچسب فرم افقی (Col-form-label) 15:29
-
اعتبارسنجی فرم - استفاده از required attribute 16:43
-
اعتبارسنجی فرم - استفاده از اعتبارسنجی جاوااسکریپت 26:50
-
spinner-border 17:22
-
جایگذاری و ترازبندی spinner-border 14:32
-
spinner-grow 17:15
-
اسپینرها روی دکمهها 07:04
-
سفارشیسازی متن 13:16
-
سفارشیسازی هدینگ و نمایش 12:33
-
سفارشیسازی رنگ پسزمینه، رنگ پسزمینه متن و رنگ متن 23:30
-
سفارشیسازی سایه 09:37
-
سفارشیسازی Opacity، عرض و ارتفاع 13:03
-
سفارشیسازی Opacity پسزمینه و بوردر 14:40
-
سفارشیسازی padding، مارجین، لینک و ورودی کیبورد 26:06
-
سفارشیسازی دکمه و گردی گوشهها 16:30
-
سفارشیسازی دکمه بستن و نوار پیشرفت 22:56
-
سفارشیسازی جایبان 11:49
-
سفارشیسازی جدول 19:03
-
سفارشیسازی مودال 19:16
-
سفارشیسازی Tooltip 17:47
-
سفارشیسازی پاپاوور 14:47
-
سفارشیسازی آکاردئون - بخش 1 21:10
-
سفارشیسازی آکاردئون - بخش 2 09:54
-
سفارشیسازی pills ناوبری 08:07
-
سفارشیسازی تبهای ناوبری 11:24
-
سفارشیسازی منوی کشویی 16:30
-
سفارشیسازی Offcanvas 13:57
-
سفارشیسازی Offcanvas - عرض 02:01
-
بررسی پروژه و نحوه دانلود ویدئوها و تصاویر 08:43
-
ایجاد پوشهها و باز کردن پوشه پروژه در ویژوال استودیو کد 10:57
-
آمادهسازی آیکونهای بوتاسترپ برای پروژه 07:53
-
ساخت فایلهای اولیه HTML و CSS ما 07:16
-
ایمپورت Google Fonts برای پروژه 07:28
-
استایلدهی به کل اسکیمای رنگهای سایت با CSS 08:16
-
ساختار نوار ناوبری (مهم) 33:33
-
استایلدهی به نوار ناوبری و navbar-nav 03:56
-
افزودن navbar-brand به نوار ناوبری 16:04
-
افزودن فرم به نوار ناوبری 09:44
-
کار روی منوی کشویی - بخش 1 20:54
-
شخصیسازی کلاس منوی کشویی 08:54
-
کار روی منوی کشویی - بخش 2 09:38
-
افزودن نوار ناوبری کامل به صفحه گالری و قیمتگذاری 04:16
-
ساخت کاروسل با افکت crossfade ویدئو - بخش 1 15:47
-
ساخت کاروسل با افکت crossfade ویدئو - بخش 2 11:39
-
نشانگرهای کاروسل 10:21
-
افزودن کاروسل به صفحه گالری و قیمتگذاری 07:02
-
ساختار فوتر - بخش 1 14:39
-
ساختار فوتر - بخش 2 06:39
-
استایلدهی بخش «ما را دنبال کنید» در فوتر 18:02
-
افزودن فوتر به صفحه گالری و قیمتگذاری 03:01
-
ساختاردهی هدینگهای نمایش سکشنها در صفحات وب 10:42
-
صفحه اصلی - ساختار سکشن اصلی ما 16:32
-
صفحه اصلی - افزودن آیکون به سکشن اصلی ما 06:52
-
صفحه اصلی - ساختار سکشن Discover PAMCH - بررسی nav-pills 20:21
-
صفحه اصلی - ساختار سکشن Discover - معرفی tab-pane - بخش 1 16:59
-
صفحه اصلی - ساختار سکشن Discover - معرفی tab-pane - بخش 2 11:01
-
صفحه اصلی - ساختار سکشن Discover - معرفی tab-pane - بخش 3 07:32
-
صفحه اصلی - ساختار سکشن Discover - معرفی tab-pane - بخش 4 07:38
-
صفحه اصلی - جابجایی rounded-end و rounded-start در tab-pane 09:26
-
صفحه اصلی - ساختار سکشن سیستم جدید ما و افزودن متنها 10:51
-
صفحه اصلی - افزودن تصاویر به سکشن سیستم جدید ما 07:37
-
صفحه اصلی - ساختار سکشن بورد ما - بخش 1 13:53
-
صفحه اصلی - ساختار سکشن بورد ما - بخش 2 11:08
-
صفحه گالری - ساختاردهی و استایلدهی طرحبندی masonry 10:45
-
صفحه گالری - افزودن تصاویر به طرحبندی masonry 07:52
-
صفحه قیمتگذاری - هدر طرح قیمتگذاری اولیه 17:27
-
صفحه قیمتگذاری - محتویات طرح قیمتگذاری اولیه 24:35
-
صفحه قیمتگذاری - تکمیل پلنهای قیمتگذاری Pro و Premium 18:59
-
صفحه قیمتگذاری - ساختاردهی پسزمینه بخش سوالات متداول 11:52
-
صفحه قیمتگذاری - ایجاد مودال 26:04
-
صفحه قیمتگذاری - ایجاد آکاردئون - بخش 1 25:04
-
صفحه قیمتگذاری - ایجاد آکاردئون - بخش 2 09:03
-
جمعبندی نهایی 04:45
مشخصات آموزش
تسلط به بوتاسترپ 5 - کشف بوتاسترپ از مبتدی تا حرفهای
- تاریخ به روز رسانی: 1404/06/21
- سطح دوره:متوسط
- تعداد درس:363
- مدت زمان :75:40:12
- حجم :45.62GB
- زبان:دوبله زبان فارسی
- دوره آموزشی:AI Academy
آموزش های مرتبط
The Great Courses
2,495,000
499,000 تومان
- زمان: 06:19:16
- تعداد درس: 40
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
6,787,000
1,357,400 تومان
- زمان: 17:11:52
- تعداد درس: 113
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
8,360,500
1,672,100 تومان
- زمان: 21:10:47
- تعداد درس: 202
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
5,720,500
1,144,100 تومان
- زمان: 14:29:26
- تعداد درس: 36
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
4,206,500
841,300 تومان
- زمان: 10:39:08
- تعداد درس: 64
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
4,391,000
878,200 تومان
- زمان: 11:07:45
- تعداد درس: 63
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
7,261,000
1,452,200 تومان
- زمان: 18:23:18
- تعداد درس: 103
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
490,000
98,000 تومان
- زمان: 00:57:00
- تعداد درس: 20
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
490,000
98,000 تومان
- زمان: 00:41:00
- تعداد درس: 9
-
سطح دوره:
-
زبان: دوبله فارسی