در این بخش امکانات مربوط به چک باکس و دکمه رادیویی در بوت استرپ بررسی می شود. چک باکس ها برای انتخاب یک یا چند گزینه از یک فهرست کاربرد دارند، در حالی که دکمه های رادیویی تنها اجازه انتخاب یک گزینه را به کاربر می دهند.
رویکرد بوت استرپ
- بوت استرپ با ارائه کلاس کمکی
.form-checkامکان طراحی ساختاریافته تر و عملکرد بهینه تری برای چک باکس ها و دکمه های رادیویی نسبت به حالت پیش فرض مرورگر فراهم می کند. این کلاس علاوه بر افزایش قابلیت شخصی سازی، موجب سازگاری بهتر نمایش این عناصر در مرورگرهای مختلف می شود. - برای نمایش عنوان هر چک باکس، باید از کلاس
.form-check-labelاستفاده کرد. - برای ورودی از نوع چک باکس نیز باید کلاس
.form-check-inputاعمال شود. - از نظر ساختاری، عناصر
inputوlabelدر یک سطح قرار می گیرند (sibling elements).
برای نمایش وضعیت های انتخاب شده (checked) یا وضعیت نامشخص (indeterminate)، بوت استرپ از آیکون های اختصاصی خود استفاده می کند.
چک باکس در بوت استرپ
چک باکس ها به کاربران اجازه می دهند یک یا چند گزینه را از بین چند مورد انتخاب کنند.
|
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 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Checkbox</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="form-check"> <input class="form-check-input" type="checkbox" value="" id="defaultCheck"> <label class="form-check-label" for="defaultCheck"> item 1 </label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked> <label class="form-check-label" for="flexCheckChecked"> item 2 </label> </div> </body> </html> |
حالت نامشخص در چک باکس بوت استرپ
- برای ایجاد چک باکس هایی با حالت میانی یا نامشخص، از شبه کلاس
:indeterminateاستفاده می شود. - این حالت از طریق جاوااسکریپت تنظیم می شود، چرا که در HTML هیچ ویژگی (attribute) معادلی برای مشخص کردن حالت نامشخص وجود ندارد.
|
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 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Checkbox</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="form-check"> <input class="form-check-input" type="checkbox" value="" id="indeterminateCheckbox" > <label class="form-check-label" for="indeterminateCheckbox"> item 1 </label> </div> <script> var x = document.getElementById("indeterminateCheckbox").indeterminate = true;; </script> </body> </html> |
چک باکس غیرفعال (Disabled)
برای نمایش حالت غیرفعال یک چک باکس، از ویژگی disabled استفاده می شود. وقتی این ویژگی به کار می رود، چک باکس دیگر قابل کلیک نیست و برچسب (label) مربوط به آن نیز به صورت کم رنگ تر نمایش داده می شود تا وضعیت غیرفعال بودن آن برای کاربر مشخص باشد.
|
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 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Checkbox</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="form-check"> <input class="form-check-input" type="checkbox" value="" id="disabledIndeterminateCheckbox" disabled> <label class="form-check-label" for="disabledIndeterminateCheckbox"> item 1 </label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="disabledCheckedCheckbox" checked disabled> <label class="form-check-label" for="disabledCheckedCheckbox"> item 2 </label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="disabledCheckbox" disabled> <label class="form-check-label" for="disabledCheckbox"> item 3 </label> </div> </body> <script> var x = document.getElementById("disabledIndeterminateCheckbox").indeterminate = true; </script> </html> |
دکمه های رادیویی در بوت استرپ
دکمه های رادیویی انتخاب را به فقط یک گزینه از میان یک فهرست محدود می کنند. یعنی کاربر تنها می تواند یک گزینه را در هر لحظه انتخاب کند و انتخاب گزینه جدید، گزینه قبلی را به صورت خودکار لغو می کند.
|
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 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Radio</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="form-check"> <input class="form-check-input" type="radio" name="flexRadioDefault" id="defaultRadio"> <label class="form-check-label" for="defaultRadio"> Item 1 </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="flexRadioDefault" id="defaultCheckRadio" checked> <label class="form-check-label" for="defaultCheckRadio"> Item 2 </label> </div> </body> </html> |
دکمه رادیویی غیرفعال در بوت استرپ
برای مشخص کردن حالت غیرفعال یک دکمه رادیویی، باید از ویژگی disabled استفاده کرد. در این حالت، دکمه دیگر قابل انتخاب نیست و برچسب (label) مربوط به آن نیز با رنگی کم رنگ تر نمایش داده می شود تا وضعیت غیرفعال بودن به وضوح برای کاربر قابل تشخیص باشد.
|
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 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Form - Radio</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="form-check"> <input class="form-check-input" type="radio" name="flexRadioDisabled" id="disabledRadio" disabled> <label class="form-check-label" for="disabledRadio"> Item 1 </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="flexRadioDisabled" id="disabledCheckedRadio" checked disabled> <label class="form-check-label" for="disabledCheckedRadio"> Item 2 </label> </div> </body> </html> |
کلیدهای تغییر وضعیت در بوت استرپ (Switches)
- کلید تغییر وضعیت (Switch) در واقع همان چک باکس سفارشی شده است که ظاهر آن به شکل یک دکمه کشویی (toggle) نمایش داده می شود. برای پیاده سازی این نوع کنترل، باید از کلاس
.form-switchدر ترکیب با ساختار چک باکس استفاده کرد. به منظور اطلاع رسانی درست نوع این کنترل به فناوری های کمک رسان (مانند صفحه خوان ها)، استفاده از ویژگیrole="switch"توصیه می شود. - کلیدهای تغییر وضعیت از ویژگی
disabledنیز پشتیبانی می کنند. در مرورگرها یا ابزارهای کمکی قدیمی که از این نوع کنترل پشتیبانی نمی کنند، این سوئیچ به صورت یک چک باکس معمولی نمایش داده می شود تا همچنان عملکردی قابل درک برای کاربر داشته باشد.
|
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 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Form - Radio</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="form-check form-switch"> <input class="form-check-input" type="checkbox" role="switch" id="defaultSwitchCheckbox"> <label class="form-check-label" for="defaultSwitchCheckbox">Wi-fi</label> </div> <div class="form-check form-switch"> <input class="form-check-input" type="checkbox" role="switch" id="defaultSwitchCheckedCheckbox" checked> <label class="form-check-label" for="defaultSwitchCheckedCheckbox">Bluetooth</label> </div> <div class="form-check form-switch"> <input class="form-check-input" type="checkbox" role="switch" id="disabledSwitchCheckbox" disabled> <label class="form-check-label" for="disabledSwitchCheckbox">Whatsapp Notification</label> </div> <div class="form-check form-switch"> <input class="form-check-input" type="checkbox" role="switch" id="disabledSwitchCheckedCheckbox" checked disabled> <label class="form-check-label" for="disabledSwitchCheckedCheckbox">Facebook Notification</label> </div> </body> </html> |
چک باکس ها و دکمه های رادیویی پیش فرض (به صورت عمودی)
برای نمایش چک باکس ها و دکمه های رادیویی به صورت ستون عمودی (یکی زیر دیگری)، می توان از کلاس .form-check استفاده کرد. این کلاس باعث می شود هر عنصر در یک خط مجزا قرار بگیرد و ظاهر مرتب و قابل خواندنی داشته باشد.
|
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 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Checkbox and Radios</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="form-check"> <input class="form-check-input" type="radio" name="Radios" id="defaultStackedRadio" value="option2"> <label class="form-check-label" for="defaultStackedRadio"> English </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="Radios" id="disabledStackedRadio" value="option3" disabled> <label class="form-check-label" for="disabledStackedRadio"> Hindi </label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="defaultCheckbox"> <label class="form-check-label" for="defaultCheckbox"> Marathi </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="disabledCheckbox" disabled> <label class="form-check-label" for="disabledCheckbox"> Japanes </label> </div> </body> </html> |
قرار دادن افقی چک باکس و دکمه رادیویی در بوت استرپ (Inline)
برای قرار دادن چک باکس ها و دکمه های رادیویی در کنار یکدیگر به صورت افقی، می توان کلاس .form-check-inline را همراه با کلاس .form-check استفاده کرد. این ترکیب باعث می شود عناصر به صورت ردیفی و پشت سر هم نمایش داده شوند، به جای اینکه زیر هم قرار بگیرند.
|
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 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Checkbox and Radios</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="form-check form-check-inline"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineDeafultRadio" value="option1"> <label class="form-check-label" for="inlineDeafultRadio">English</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineDisabledRadio" value="option3" disabled> <label class="form-check-label" for="inlineDisabledRadio">Hindi</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineDeafultCheckbox" value="option1"> <label class="form-check-label" for="inlineDeafultCheckbox">Marathi</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineDisabledCheckbox" value="option3" disabled> <label class="form-check-label" for="inlineDisabledCheckbox">Japanes</label> </div> </body> </html> |
نمایش معکوس چک باکس و دکمه رادیویی در بوت استرپ (Reverse)
برای قرار دادن چک باکس ها، دکمه های رادیویی یا کلیدهای تغییر وضعیت (سوئیچ ها) در سمت مخالف برچسب (label)، می توان از کلاس کمکی .form-check-reverse استفاده کرد.
|
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 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Checkbox and Radios</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="form-check form-check-reverse"> <h4>Inline Checkboxes</h4> <input class="form-check-input" type="checkbox" value="" id="deafultReverseCheckbox"> <label class="form-check-label" for="deafultReverseCheckbox"> English </label> </div> <div class="form-check form-check-reverse"> <input class="form-check-input" type="checkbox" value="" id="disabledReverseCheckbox" disabled> <label class="form-check-label" for="disabledReverseCheckbox"> Hindi </label> </div> <div class="form-check form-switch form-check-reverse"> <input class="form-check-input" type="checkbox" id="switchReverseCheckbox"> <label class="form-check-label" for="switchReverseCheckbox">Wifi</label> </div> <div class="form-check form-check-reverse"> <h4>Inline Radios</h4> <input class="form-check-input" type="radio" value="" id="deafultReverseRadio"> <label class="form-check-label" for="deafultReverseRadio"> Marathi </label> </div> <div class="form-check form-check-reverse"> <input class="form-check-input" type="radio" value="" id="disabledReverseRadio" disabled> <label class="form-check-label" for="disabledReverseRadio"> Japanes </label> </div> <div class="form-check form-switch form-check-reverse"> <input class="form-check-input" type="radio" id="switchReverseRadio"> <label class="form-check-label" for="switchReverseRadio">Bluetooth</label> </div> </body> </html> |
چک باکس و دکمه رادیویی بدون برچسب
- در مواردی که چک باکس یا دکمه رادیویی فاقد متن برچسب (label) هستند، نیازی به استفاده از کلاس
.form-checkنیست و می توان از ساختار ساده تری استفاده کرد. - با این حال، برای اینکه فناوری های کمک رسان (مانند صفحه خوان ها) بتوانند عملکرد این کنترل ها را تشخیص دهند، باید نام دسترس پذیر (accessible name) برای آن ها تعریف شود؛ برای مثال، از ویژگی
aria-labelاستفاده کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Form - Checkbox and Radio Buttons</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> <input class="form-check-input" type="checkbox" id="checkboxNoLabel" value="" aria-label="..."> Item 1 </div> <div> <input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel1" value="" aria-label="..."> Item 2 </div> </body> </html> |
دکمه های تغییر وضعیت در بوت استرپ (Toggle Buttons)
- برای ساخت چک باکس ها و دکمه های رادیویی با ظاهر دکمه ای، کافی است به جای استفاده از
.form-check-label، کلاس.btnرا روی عنصر<label>اعمال کنید. این روش که در دوره تخصصی بوت استرپ نیز به آن پرداخته می‌شود، باعث می شود کنترل ها شبیه دکمه های واقعی نمایش داده شوند و کاربر تجربه بهتری از تعامل با فرم داشته باشد. - همچنین باید برای عنصر
<input>از کلاس.btn-checkاستفاده شود تا مشخص شود این ورودی، یک چک باکس یا دکمه رادیویی با ظاهر دکمه ای است.
|
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 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Checkbox and Radios</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> <h5>Checkbox Toggle Buttons</h5> <input type="checkbox" class="btn-check" id="defaultToggleChecbox" autocomplete="off"> <label class="btn btn-primary" for="defaultToggleChecbox">Item 1</label> <input type="checkbox" class="btn-check" id="checkedToggleChecbox" checked autocomplete="off"> <label class="btn btn-secondary" for="checkedToggleChecbox">Item 2</label> <input type="checkbox" class="btn-check" id="disabledToggleChecbox" autocomplete="off" disabled> <label class="btn btn-info" for="disabledToggleChecbox">Item 3</label> <h5>Radios Toggle Buttons</h5> <input type="radio" class="btn-check" id="defaultToggleRadio" autocomplete="off"> <label class="btn btn-primary" for="defaultToggleRadio">Item 1</label> <input type="radio" class="btn-check" id="checkedToggleRadio" checked autocomplete="off"> <label class="btn btn-secondary" for="checkedToggleRadio">Item 2</label> <input type="radio" class="btn-check" id="disabledToggleRadio" autocomplete="off" disabled> <label class="btn btn-info" for="disabledToggleRadio">Item 3</label> </body> </html> |
استایل های حاشیه دار (Outlined Styles)
انواع مختلفی از کلاس .btn در بوت استرپ پشتیبانی می شوند، که شامل استایل های حاشیه دار (outline) نیز می شوند. با استفاده از این کلاس ها می توانید دکمه هایی با ظاهر متفاوت و سبک مینیمال ایجاد کنید. نمونه ای از این استایل ها در مثال زیر نشان داده شده است:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Checkbox and Radio Buttons</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> <input type="checkbox" class="btn-check" id="defualtOutlineCheckbox" autocomplete="off"> <label class="btn btn-outline-primary" for="defualtOutlineCheckbox">Single toggle</label><br><br> <input type="checkbox " class="btn-check" id="checkedOutlineCheckbox" checked autocomplete="off"> <label class="btn btn-secondary" for="checkedOutlineCheckbox">Checked</label><br><br> <input type="radio" class="btn-check" name="options-outlined" id="checkedOutlineRadio" autocomplete="off" checked> <label class="btn btn-info" for="checkedOutlineRadio">Checked success radio</label> <input type="radio" class="btn-check" name="options-outlined" id="defualtOutlineRadio" autocomplete="off"> <label class="btn btn-outline-warning" for="defualtOutlineRadio">Danger radio</label> </body> </html> |
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
پکیج آموزش پیشرفته ASP.NET Core + طراحی فروشگاه اینترنتی
- انتشار: ۲۶ خرداد ۱۴۰۴
دسته بندی موضوعات
- آموزش ارز دیجیتال
- آموزش برنامه نویسی
- آموزش متنی برنامه نویسی
- اطلاعیه و سایر مطالب
- پروژه برنامه نویسی
- دوره های تخصصی برنامه نویسی
- رپورتاژ
- فیلم های آموزشی
- ++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
- اچ تی ام ال
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- پاسکال
- پایان نامه
- پایتون
- جاوا
- جاوا اسکریپت
- جی کوئری
- داده کاوی
- دلفی
- رباتیک
- سئو
- سایر کتاب ها
- سخت افزار
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- طراحی الگوریتم
- فتوشاپ
- مقاله
- مهندسی نرم افزار
- هک و امنیت
- هوش مصنوعی
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس
