در این بخش با قابلیت اسکرول اسپای در بوت استرپ (Scrollspy) آشنا می شویم. این ویژگی هنگام اسکرول صفحه، به صورت خودکار بخش های فعال را در نوار ناوبری (navigation bar) شناسایی و به روز رسانی می کند.
نحوه عملکرد اسکرول اسپای در بوت استرپ (Scrollspy)
وقتی کاربر صفحه را اسکرول می کند و عنصری با شناسه (id) مشخص، که در ویژگی href لینک ها به آن اشاره شده، وارد ناحیه قابل مشاهده می شود، اسکرول اسپای آن را شناسایی می کند. این قابلیت با نوار ناوبری (nav)، لیست گروهی (list group)، و همچنین با هر لینک (anchor) دیگری در صفحه کار می کند.
برای استفاده از اسکرول اسپای باید دو بخش آماده کنید:
۱. یک نوار ناوبری، گروه فهرست یا مجموعه ساده ای از لینک ها
۲. یک کانتینر قابل اسکرول، مانند تگ <body> یا یک عنصر سفارشی با ارتفاع مشخص و ویژگی overflow-y: scroll
برای فعال سازی اسکرول اسپای، ویژگی های data-bs-spy="scroll" و data-bs-target="#navId" را به عنصر کانتینر اضافه کنید. شناسه "navId" به نوار ناوبری مربوط می شود. اگر کانتینر هیچ عنصر قابل فوکوسی نداشته باشد، ویژگی tabindex="0" را هم اضافه کنید تا کاربر بتواند با صفحه کلید به آن دسترسی داشته باشد.
وقتی در این کانتینر اسکرول می کنید، بوت استرپ به لینک های مربوطه در نوار ناوبری کلاس .active اضافه یا از آن حذف می کند. اگر لینک ها به شناسه های نامعتبر اشاره کنند، بوت استرپ آن ها را نادیده می گیرد. برای نمونه، لینک <a href="#home">خانه</a> باید به عنصری مانند <div id="home"></div> متصل باشد.
در بخش هایی از صفحه که عناصر غیر قابل مشاهده وجود دارند، اسکرول اسپای فقط عناصر قابل مشاهده را پردازش می کند.
اسکرول اسپای در نوار ناوبری (Navbar)
زمانی که کاربر در ناحیه زیر نوار ناوبری اسکرول می کند، می تواند تغییر کلاس .active را روی لینک های فعال مشاهده کند. همچنین هنگام باز کردن منوی کشویی (dropdown)، آیتم های هایلایت شده نمایش داده می شوند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Scrollspy</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <nav id="navbarFirstExample" class="navbar bg-body-tertiary px-3 mb-3"> <a class="navbar-brand" href="#">Sourcebaran</a> <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link" href="#scrollspyFirstTitle">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#scrollspySecondTitle">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#scrollspyThirdTitle">About us</a> </li> <li class="nav-item"> <a class="nav-link" href="#scrollspyFourthTitle">Contact us</a> </li> <li class="nav-item"> <a class="nav-link" href="#scrollspyFifthTitle">Features</a> </li> </ul> </nav> <div data-bs-spy="scroll" data-bs-target="#navbarFirstExample" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-body-tertiary p-3 rounded-2" tabindex="0"> <h4 id="scrollspyFirstTitle">Home</h4> <p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group. Scrollspy works with nav and list group.</p> <h4 id="scrollspySecondTitle">Services</h4> <p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p> <h4 id="scrollspyThirdTitle">About us</h4> <p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group. Scrollspy works with nav and list group.</p> <h4 id="scrollspyFourthTitle">Contact us</h4> <p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p> <h4 id="scrollspyFifthTitle">Features</h4> <p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p> </div> </body> </html> |
اسکرول اسپای در ناوبری تو در تو
قابلیت اسکرول اسپای از ساختارهای تو در تو در نوار ناوبری (nested .nav) نیز پشتیبانی می کند. زمانی که یکی از آیتم های داخلی فعال می شود، بوت استرپ به طور خودکار کلاس .active را به والد آن نیز اعمال می کند. هنگام اسکرول در ناحیه نوار ناوبری، می توانید مشاهده کنید که وضعیت کلاس .active در بخش های مختلف به درستی به روز می شود.
در صورتی که به دنبال درک بهتر و تسلط کامل بر ناوبری های تو در تو هستید، دوره تخصصی بوت استرپ می تواند مسیر یادگیری شما را هموار کند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Scrollspy</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="row mt-2"> <div class="col-4"> <nav id="nestatedNavbar" class="h-100 flex-column align-items-stretch pe-4 border-end"> <nav class="nav nav-pills flex-column"> <a class="nav-link" href="#home">Home</a> <nav class="nav nav-pills flex-column"> <a class="nav-link ms-3 my-1" href="#login">Log in</a> <a class="nav-link ms-3 my-1" href="#logout">Log out</a> </nav> <a class="nav-link" href="#aboutus">About us</a> <a class="nav-link" href="#contactus">Contact Us</a> </nav> </nav> </div> <div class="col-8"> <div data-bs-spy="scroll" data-bs-target="#nestatedNavbar" data-bs-smooth-scroll="true" class="bg-body-tertiary p-3 rounded-2 my-2" tabindex="0"> <div id="home"> <h4>Home</h4> <p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p> </div> <div id="login"> <h5>Log In</h5> <p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group. Scrollspy works with nav and list group</p> </div> <div id="logout"> <h5>Log out</h5> <p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p> </div> <div id="aboutus"> <h4>About us</h4> <p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group. Scrollspy works with nav and list group</p> </div> <div id="contactus"> <h4>Contact us</h4> <p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p> </div> </div> </div> </div> </body> </html> |
اسکرول اسپای در لیست گروهی بوت استرپ
اسکرول اسپای از لیست های گروهی (.list-group) نیز پشتیبانی می کند. زمانی که به بخش مربوط به لیست گروه اسکرول می کنید، می توانید تغییر کلاس .active را به طور واضح مشاهده کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Scrollspy</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="row mt-2"> <div class="col-4"> <div id="navbarList" class="list-group my-2"> <a class="list-group-item list-group-item-action" href="#home">Home</a> <a class="list-group-item list-group-item-action" href="#services">Services</a> <a class="list-group-item list-group-item-action" href="#aboutus">About us</a> <a class="list-group-item list-group-item-action" href="#contactus">Contact us</a> <a class="list-group-item list-group-item-action" href="#features">Features</a> </div> </div> <div class="col-8"> <div data-bs-spy="scroll" data-bs-target="#navbarList" data-bs-smooth-scroll="true" class="bg-body-tertiary p-3 rounded-2 my-2" tabindex="0"> <h4 id="home">Home</h4> <p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area.</p> <h4 id="services">Services</h4> <p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p> <h4 id="aboutus">About us</h4> <p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area.</p> <h4 id="contactus">Contact us</h4> <p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p> <h4 id="features">Features</h4> <p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. </p> </div> </div> </div> </div> </body> </html> |
اسکرول اسپای در لینک های ساده
اسکرول اسپای با تمام عناصر لینک <a> به درستی کار می کند و محدود به نوار ناوبری (nav) یا لیست گروهی (list group) نیست. می توانید این قابلیت را برای هر لینک ساده ای در صفحه به کار ببرید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Scrollspy</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="row"> <div class="col-4"> <div id="listUsingAnchor" class="text-center"> <nav class="nav nav-pills flex-column mx-3"> <a class="nav-link active" href="#home">Home</a> <a class="nav-link" href="#services">Services</a> <a class="nav-link" href="#aboutus">About us</a> <a class="nav-link" href="#contactus">Contact us</a> <a class="nav-link" href="#features">Features</a> </nav> </div> </div> <div class="col-8"> <div data-bs-spy="scroll" data-bs-target="#listUsingAnchor" data-bs-offset="0" data-bs-smooth-scroll="true" class="bg-body-tertiary p-3 rounded-2 my-2" tabindex="0"> <h4 id="home">Home</h4> <p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group. Scrollspy works with nav and list group.</p> <h4 id="services">Services</h4> <p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p> <h4 id="aboutus">About us</h4> <p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p> <h4 id="contactus">Contact us</h4> <p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group. Scrollspy works with nav and list group.</p> <h4 id="features">Features</h4> <p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group. Scrollspy works with nav and list group.</p> </div> </div> </div> </body> </html> |
عناصر غیر قابل مشاهده
اسکرول اسپای عناصر غیر قابل مشاهده را نادیده می گیرد و برای آیتم های ناوبری مربوط به آن ها، کلاس .active اعمال نمی کند. اگر نمونه ای از اسکرول اسپای را داخل یک بخش غیر قابل مشاهده (wrapper) مقداردهی اولیه کنید، این نمونه تمام اهداف موجود در آن بخش را نادیده می گیرد. در صورتی که بخش wrapper بعداً قابل مشاهده شد، باید از متد refresh استفاده کنید تا اسکرول اسپای وضعیت عناصر قابل مشاهده را به روز کند.
مثال:
|
1 2 3 4 5 6 7 |
document.querySelectorAll('#nav-tab>[data-bs-toggle="tab"]').forEach(el => { el.addEventListener('shown.bs.tab', () => { const target = el.getAttribute('data-bs-target') const scrollElem = document.querySelector(`${target} [data-bs-spy="scroll"]`) bootstrap.ScrollSpy.getOrCreateInstance(scrollElem).refresh() }) }) |
نحوه استفاده از اسکرول اسپای در بوت استرپ
استفاده از ویژگی های داده ای (data attributes)
برای پیاده سازی سریع اسکرول اسپای می توانید ویژگی data-bs-spy="scroll" را به عنصری که قصد مانیتور کردن آن را دارید (معمولاً تگ <body>) اضافه کنید.
به این ترتیب، رفتار اسکرول اسپای برای نوار ناوبری بالای صفحه (topbar navigation) فعال می شود. سپس با استفاده از ویژگی data-bs-target، شناسه (id) یا نام کلاس والد یکی از کامپوننت های .nav در بوت استرپ را مشخص می کنید تا اسکرول اسپای به درستی با آن نوار ناوبری کار کند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Scrollspy</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body data-bs-spy="scroll" data-bs-target="#navbarDataAttribute"> <div id="navbarDataAttribute" class="my-2"> <ul class="nav nav-pills" role="pillslist"> <li class="nav-item"> <a class="nav-link" href="#scrollspyFirstTitle">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#scrollspySecondTitle">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#scrollspyThirdTitle">About us</a> </li> <li class="nav-item"> <a class="nav-link" href="#scrollspyFourthTitle">Contact us</a> </li> <li class="nav-item"> <a class="nav-link" href="#scrollspyFifthTitle">Features</a> </li> </ul> <div data-bs-spy="scroll" data-bs-target="#navbarDataAttribute" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="bg-body-tertiary p-3 rounded-2 my-2" tabindex="0"> <h4 id="scrollspyFirstTitle">Home</h4> <p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group. Scrollspy works with nav and list group.</p> <h4 id="scrollspySecondTitle">Services</h4> <p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p> <h4 id="scrollspyThirdTitle">About us</h4> <p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p> <h4 id="scrollspyFourthTitle">Contact us</h4> <p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group. Scrollspy works with nav and list group.</p> <h4 id="scrollspyFifthTitle">Features</h4> <p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p> </div> </div> </body> </html> |
استفاده از جاوااسکریپت
برای فعال کردن اسکرول اسپای در نوار ناوبری بالای صفحه، ابتدا ویژگی data-bs-spy="scroll" را به عنصری که می خواهید مانیتور شود (معمولاً تگ <body>) اضافه کنید. سپس در داخل تگ <script>، می توانید اسکرول اسپای را به یک کامپوننت خاص با استفاده از شناسه (id) یا نام کلاس، مانند "navbarJavaScript"، اعمال کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Scrollspy</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body data-bs-spy="scroll" data-bs-target="#navbarJavaScript"> <div id="navbarJavaScript"> <ul class="nav nav-pills" role="pillslist"> <li class="nav-item"> <a class="nav-link" href="#scrollspyFirstTitle">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#scrollspySecondTitle">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#scrollspyThirdTitle">About us</a> </li> <li class="nav-item"> <a class="nav-link" href="#scrollspyFourthTitle">Contact us</a> </li> <li class="nav-item"> <a class="nav-link" href="#scrollspyFifthTitle">Features</a> </li> </ul> <div data-bs-spy="scroll" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-body-tertiary p-3 rounded-2" tabindex="0"> <h4 id="scrollspyFirstTitle">Home</h4> <p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p> <h4 id="scrollspySecondTitle">Services</h4> <p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p> <h4 id="scrollspyThirdTitle">About us</h4> <p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p> <h4 id="scrollspyFourthTitle">Contact us</h4> <p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group. Scrollspy works with nav and list group.</p> <h4 id="scrollspyFifthTitle">Features</h4> <p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p> </div> </div> <script> const scrollSpy = new bootstrap.ScrollSpy(document.body, { target: '#navbarJavaScript' }) </script> </body> </html> |
تنظیمات اسکرول اسپای در بوت استرپ
شما می توانید تنظیمات اسکرول اسپای را هم از طریق data attributes و هم از طریق جاوااسکریپت اعمال کنید.
- برای اضافه کردن یک گزینه به صورت data attributes، کافی است از پیشوند
data-bs-به همراه نام گزینه استفاده کنید. به عنوان نمونه:data-bs-animation="{value}". در زمان استفاده از data attributes، باید نام گزینه را به صورت kebab-case بنویسید و نه camelCase. برای مثال، ازdata-bs-custom-class="beautifier"استفاده کنید، نهdata-bs-customClass="beautifier". - از نسخه Bootstrap 5.2.0 به بعد، ویژگی جدیدی به نام
data-bs-configاضافه شده که به شما اجازه می دهد تنظیمات پایه ای کامپوننت را به صورت یک رشته JSON در آن ذخیره کنید. اگر یک عنصر همزمان هم ویژگیdata-bs-configو هم سایر data attributes را داشته باشد، مقادیر data attributes در اولویت بالاتری نسبت به مقادیر درونdata-bs-configقرار می گیرند. حتی خود data attributes نیز می توانند مقادیر JSON داشته باشند. - در نهایت، مقادیر موجود در
data-bs-config، سایر ویژگی هایdata-bs-و اشیای جاوااسکریپت (JS objects) با یکدیگر ترکیب می شوند تا پیکربندی نهایی شکل بگیرد. در این ترکیب، مقدار جدیدتر هر کلید (key) جایگزین مقادیر قبلی آن می شود.
ویژگی های CSS مربوط به اسکرول اسپای در بوت استرپ
جدول زیر خصوصیات و مقادیر مربوط به افزونه ScrollSpy در بوت استرپ را توضیح می دهد:
| نام ویژگی (Name) | نوع داده (Type) | مقدار پیش فرض (Default) | توضیحات (Description) |
|---|---|---|---|
| rootMargin | string | 0px 0px -25% | واحد معتبر rootMargin برای Intersection Observer هنگام محاسبه موقعیت اسکرول. |
| smoothScroll | boolean | false | فعال کردن اسکرول نرم (smooth scrolling) زمانی که کاربر روی لینکی کلیک می کند که به عناصر تحت نظارت ScrollSpy اشاره دارد. |
| target | string, DOM element | null | عنصری که افزونه ScrollSpy روی آن اعمال می شود. |
| threshold | array | [0.1, 0.5, 1] | مقدار معتبر threshold برای IntersectionObserver در زمان محاسبه موقعیت اسکرول. |
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
پکیج صفر تا صد آموزش سئو و بهینه سازی بصورت عملی
- انتشار: ۱۹ خرداد ۱۴۰۴
دسته بندی موضوعات
- آموزش ارز دیجیتال
- آموزش برنامه نویسی
- آموزش متنی برنامه نویسی
- اطلاعیه و سایر مطالب
- پروژه برنامه نویسی
- دوره های تخصصی برنامه نویسی
- رپورتاژ
- فیلم های آموزشی
- ++C
- ADO.NET
- Adobe Flash
- Ajax
- AngularJS
- apache
- ARM
- Asp.Net
- ASP.NET MVC
- AVR
- Bootstrap
- CCNA
- CCNP
- CMD
- CSS
- Dreameaver
- EntityFramework
- HTML
- IOS
- jquery
- Linq
- Mysql
- Oracle
- PHP
- PHPMyAdmin
- Rational Rose
- silver light
- SQL Server
- Stimulsoft Reports
- Telerik
- UML
- VB.NET&VB6
- WPF
- Xml
- آموزش های پروژه محور
- اتوکد
- الگوریتم تقریبی
- امنیت
- اندروید
- اندروید استودیو
- بک ترک
- بیسیک فور اندروید
- پایتون
- جاوا
- جاوا اسکریپت
- جوملا
- دلفی
- دوره آموزش Go
- دوره های رایگان پیشنهادی
- زامارین
- سئو
- ساخت CMS
- سی شارپ
- شبکه و مجازی سازی
- طراحی الگوریتم
- طراحی بازی
- طراحی وب
- فتوشاپ
- فریم ورک codeigniter
- فلاتر
- کانستراکت
- کریستال ریپورت
- لاراول
- معماری کامپیوتر
- مهندسی اینترنت
- هوش مصنوعی
- یونیتی
- کتاب های آموزشی
- Android
- ASP.NET
- AVR
- LINQ
- php
- Workflow
- اچ تی ام ال
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- پاسکال
- پایان نامه
- پایتون
- جاوا
- جاوا اسکریپت
- جی کوئری
- داده کاوی
- دلفی
- رباتیک
- سئو
- سایر کتاب ها
- سخت افزار
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- طراحی الگوریتم
- فتوشاپ
- مقاله
- مهندسی نرم افزار
- هک و امنیت
- هوش مصنوعی
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس
