در این فصل، کامپوننت Input Group در بوت استرپ معرفی می‌شود. این کامپوننت یکی از ابزارهای کاربردی برای ساخت فرم‌هایی با ظاهر جذاب و حرفه‌ای است. با وجود انعطاف بالا، Input Group فقط با فیلدهای متنی (text input)، انتخابی (select) و ناحیه متنی (textarea) کار می‌کند.
طراحان می‌توانند متن، دکمه یا گروهی از دکمه‌ها را در اطراف این فیلدها قرار دهند. این ویژگی باعث می‌شود کنترل‌های فرم عملکرد بهتری داشته باشند و ظاهر آن‌ها بهبود یابد.
Input Group در بوت استرپ چیست؟
در ادامه، نحوه افزودن متن، آیکن یا دکمه در ابتدا، انتها یا دو طرف فیلدها آموزش داده می‌شود. این کار به فرم ظاهری حرفه‌ای و کاربرپسند می‌دهد.
برای انجام این کار، باید از کلاس .input-group استفاده کرد. این کلاس یک container است که فیلدها را با آیکن، متن یا دکمه ترکیب می‌کند. طراح می‌تواند آن‌ها را قبل یا بعد از فیلد ورودی قرار دهد.
|
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 - Input Groups </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="container mt-3"> <form action="/contact.php"> <div class="input-group mb-3"> <span class="input-group-text">@ </span> <input type="text" class="form-control" placeholder="Username" name="usrname"> </div> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Your Email" name="email"> <span class="input-group-text">@tutorialspoint.com </span> </div> <button type="submit" class="btn btn-success">Submit </button> </form> </div> </body> </html> |
مدیریت Wrapping در Input Group
به‌صورت پیش‌فرض، Input Group در بوت استرپ از کلاس flex-wrap: wrap استفاده می‌کند. این ویژگی باعث می‌شود عناصر درون گروه ورودی، در صورت نیاز، به خط بعد منتقل شوند. این رفتار برای پیاده‌سازی اعتبارسنجی (validation) در فرم ها، به‌ویژه هنگام استفاده از فیلدهای سفارشی، بسیار کاربردی است.
در صورتی که بخواهید از سطرشکنی جلوگیری کنید، میتوانید از کلاس .flex-nowrap استفاده کنید. این کلاس باعث می‌شود تمام اجزای input group در یک خط باقی بمانند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Input Groups </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="container mt-3"> <div class="input-group flex-nowrap"> <span class="input-group-text" id="addon-wrapping">Email address</span> <input type="email" class="form-control" placeholder="name@tutorialspoint.com" aria-label="email id" aria-describedby="addon-wrapping"> </div> </div> </body> </html> |
تنظیم اندازه Input Group در بوت استرپ
برای تغییر اندازه Input Groups در بوت استرپ، می‌توان از کلاس‌های آماده استفاده کرد. اگر به یک گروه ورودی کوچک نیاز دارید، کلاس .input-group-sm را به کار ببرید. برای ایجاد یک گروه ورودی بزرگ، از کلاس .input-group-lg استفاده کنید.
|
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 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Input Groups</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="container mt-3"> <div class="input-group input-group-sm mb-3"> <span class="input-group-text">@small</span> <input type="text" class="form-control" aria-label="Input for sizing" aria-describedby="inputGroup-sizing-sm"> </div> <div class="input-group mb-3"> <span class="input-group-text">@default</span> <input type="text" class="form-control" aria-label="Input for sizing" aria-describedby="inputGroup-sizing-default"> </div> <div class="input-group input-group-lg mb-3"> <span class="input-group-text">@large</span> <input type="text" class="form-control" aria-label="Input for sizing" aria-describedby="inputGroup-sizing-lg"> </div> </div> </body> </html> |
استفاده از چک باکس و دکمه رادیویی در Input Group
برای قرار دادن چک باکس یا دکمه رادیویی در کنار فیلد ورودی، کافی است آن را داخل بخش افزودنی (addon) Input Groups قرار دهید. این کار معمولاً زمانی انجام می‌شود که بخواهید انتخاب‌گرها را درون ساختار یکپارچه فرم نمایش دهید.
اگر کنار چک باکس یا دکمه رادیویی متنی وجود نداشته باشد، پیشنهاد می‌کنیم به عنصر دارای کلاس .form-check-input، کلاس .mt-0 اضافه کنید. این کار باعث تنظیم بهتر تراز عمودی (vertical alignment) عنصر می‌شود.
|
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 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Input Groups </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="container mt-3"> <div class="input-group mb-3"> <div class="input-group-text"> <input class="form-check-input mt-0" type="checkbox" value="" aria-label="Checkbox"> </div> <input type="text" class="form-control" placeholder="Item 1"> </div> <div class="input-group"> <div class="input-group-text"> <input class="form-check-input mt-0" type="radio" value="" aria-label="Radio button"> </div> <input type="text" class="form-control" placeholder="Item 2"> </div> </div> </body> </html> |
استفاده از چند فیلد ورودی در Input Group
در بوت استرپ میتوانید چندین تگ <input> را در یک گروه ورودی به‌صورت بصری کنار هم قرار دهید. اما توجه داشته باشید که استایل های اعتبارسنجی (validation styles) تنها زمانی به‌درستی اعمال می‌شوند که گروه ورودی شامل تنها یک تگ <input> باشد.
به همین دلیل، اگر فرم شما نیاز به اعتبارسنجی دارد، بهتر است برای هر فیلد ورودی از یک input group مجزا استفاده کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Input Groups </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="container mt-3"> <div class="input-group"> <span class="input-group-text">Student email id and password </span> <input type="text" aria-label=" email id " class="form-control"> <input type="text" aria-label="password" class="form-control"> </div> </div> </body> </html> |
افزودن چند المان در یک Input Group
در بوت استرپ، کاربران می‌توانند چندین افزودنی (addon) را در یک گروه ورودی ترکیب کنند. این افزودنی‌ها می‌توانند شامل متن، آیکن، دکمه یا سایر عناصر تعاملی باشند. علاوه بر این، امکان استفاده هم‌زمان از چک باکس و دکمه رادیویی در یک input 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 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Input Groups </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="container mt-3"> <div class="input-group mb-3"> <span class="input-group-text"> <input type="checkbox" class="form-check-input mt-0"> </span> <span class="input-group-text">$</span> <span class="input-group-text">0.00</span> <input type="text" class="form-control"> </div> <div class="input-group mb-3"> <input type="text" class="form-control"> <span class="input-group-text">$</span> <span class="input-group-text">0.00</span> </div> </div> </body> </html> |
افزودن دکمه به عنوان افزودنی در Input Group
در بوت استرپ، کاربران می‌توانند به‌راحتی دکمه هایی را به کنترل های فرم مانند فیلد متنی اضافه کنند یا از آن حذف نمایند. برای این کار، کافی است دکمه ها را به‌عنوان افزودنی داخل کلاس .input-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 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Input Groups </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"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script> </head> <body> <div class="container mt-4"> <div class="row"> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Search"> <button type="button" class="btn btn-primary"> <i class="bi-search"></i> </button> </div> <div class="input-group"> <input type="text" class="form-control" placeholder="Type text"> <button type="submit" class="btn btn-success">Submit</button> <button type="clear" class="btn btn-danger">Clear</button> </div> </div> </div> </body> </html> |
دکمه‌های با فهرست کشویی در Input 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 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Input Groups </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="container mt-4"> <div class="input-group mb-3"> <button class="btn btn-outline-dark dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Home</a></li> <li><a class="dropdown-item" href="#">About Us</a></li> <li><a class="dropdown-item" href="#">Services</a></li> <li> <hr class="dropdown-divider"> </li> <li><a class="dropdown-item" href="#">Others</a></li> </ul> <input type="text" class="form-control" aria-label="Dropdown button"> </div> <div class="input-group mb-3"> <input type="text" class="form-control" aria-label="Dropdown button"> <button class="btn btn-outline-dark dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button> <ul class="dropdown-menu dropdown-menu-end"> <li><a class="dropdown-item" href="#">Home</a></li> <li><a class="dropdown-item" href="#">About Us</a></li> <li><a class="dropdown-item" href="#">Services</a></li> <li> <hr class="dropdown-divider"> </li> <li><a class="dropdown-item" href="#">Others</a></li> </ul>> </div> <div class="input-group mb-3"> <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Home</a></li> <li><a class="dropdown-item" href="#">About Us</a></li> <li><a class="dropdown-item" href="#">Services</a></li> <li> <hr class="dropdown-divider"> </li> <li><a class="dropdown-item" href="#">Others</a></li> </ul> <input type="text" class="form-control" aria-label="Text input with 2 dropdown buttons"> <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button> <ul class="dropdown-menu dropdown-menu-end"> <li><a class="dropdown-item" href="#">Home</a></li> <li><a class="dropdown-item" href="#">About Us</a></li> <li><a class="dropdown-item" href="#">Services</a></li> <li> <hr class="dropdown-divider"> </li> <li><a class="dropdown-item" href="#">Others</a></li> </ul> </div> </div> </body> </html> |
دکمه های بخش بندی شده در بوت استرپ
دکمه های بخش بندی شده از همان سبک رایجی استفاده می‌کنند که برای دکمه های کشویی (dropdown button) تعریف شده است تا بتوانند فهرست های کشویی را در گروه های ورودی بخش بندی کنند. برای ساخت دکمه ها از کلاس .btn استفاده می‌شود و برای ساخت فهرست های کشویی از کلاس .dropdown-menu.
|
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 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Input Groups </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="container mt-4"> <div class="input-group mb-3"> <button type="button" class="btn btn-outline-dark">Home</button> <button type="button" class="btn btn-outline-dark dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> <span class="visually-hidden">Toggle Dropdown</span> </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Home</a></li> <li><a class="dropdown-item" href="#">About Us</a></li> <li><a class="dropdown-item" href="#">Services</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">Separated link</a></li> </ul> <input type="text" class="form-control" aria-label="Segmented dropdown button"> </div> <div class="input-group"> <input type="text" class="form-control" aria-label="Segmented dropdown button"> <button type="button" class="btn btn-outline-dark">Home</button> <button type="button" class="btn btn-outline-dark dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> <span class="visually-hidden">Toggle Dropdown</span> </button> <ul class="dropdown-menu dropdown-menu-end"> <li><a class="dropdown-item" href="#">Home</a></li> <li><a class="dropdown-item" href="#">About Us</a></li> <li><a class="dropdown-item" href="#">Services</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">Separated link</a></li> </ul> </div> </div> </body> </html> |
فرم های سفارشی در بوت استرپ
فرم های سفارشی نوعی کنترل گسترش یافته فرم هستند که برای جمع‌آوری داده های خاص از بازدیدکنندگان وب‌سایت استفاده می‌شوند. در استفاده از فرم های سفارشی، محدودیت‌هایی در تعداد انواع مختلف فرم هایی که می‌توان ایجاد کرد وجود دارد.
فرم های سفارشی به دو نوع تقسیم می‌شوند:
-
انتخاب سفارشی (Custom select)
-
ورودی فایل سفارشی (Custom file input)
در منوی انتخاب سفارشی، کاربران می‌توانند از میان گزینه‌های از پیش تعریف‌شده یکی را انتخاب کنند. این منو به‌صورت کشویی نمایش داده می‌شود.
|
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 54 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Input Groups </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="container mt-4"> <div class="input-group mb-3"> <label class="input-group-text" for="customSelect1">Options</label> <select class="form-select" id="customSelect1"> <option selected>Select the Subject</option> <option value="1">English</option> <option value="2">Mathematics</option> <option value="3">Science</option> </select> </div> <div class="input-group mb-3"> <select class="form-select" id="customSelect2"> <option selected>Select the Subject</option> <option value="1">English</option> <option value="2">Mathematics</option> <option value="3">Science</option> </select> <label class="input-group-text" for="customSelect2">Options</label> </div> <div class="input-group mb-3"> <button class="btn btn-outline-dark" type="button">Button</button> <select class="form-select" id="customSelect3" aria-label="Button addon"> <option selected>Select the Subject</option> <option value="1">English</option> <option value="2">Mathematics</option> <option value="3">Science</option> </select> </div> <div class="input-group"> <select class="form-select" id="customSelect4" aria-label="Button addon"> <option selected>Select the Subject</option> <option value="1">English</option> <option value="2">Mathematics</option> <option value="3">Science</option> </select> <button class="btn btn-outline-dark" type="button">Button</button> </div> </div> </body> </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 26 27 28 29 30 31 32 33 34 |
<!DOCTYPE html > <html lang="en" > <head > <title >Bootstrap - Input Groups </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="container mt-4" > <div class="input-group mb-3" > <label class="input-group-text" for="customFileInput1" >Upload </label > <input type="file" class="form-control" id="customFileInput1" > </div > <div class="input-group mb-3" > <input type="file" class="form-control" id="customFileInput2" > <label class="input-group-text" for="customFileInput2" >Upload </label > </div > <div class="input-group mb-3" > <button class="btn btn-outline-primary" type="button" id="customFileInput3" >Option Button </button > <input type="file" class="form-control" id="inputGroupFile03" aria-describedby="customFileInput3" aria-label="Upload" > </div > <div class="input-group" > <input type="file" class="form-control" id="inputGroupFile04" aria-describedby="customFileInput4" aria-label="Upload" > <button class="btn btn-outline-primary" type="button" id="customFileInput4" >Option Button </button > </div > </div > </body > </html > |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
دوره آموزش طراحی فروشگاه اینترنتی بدون کد نویسی در 8 ساعت
- انتشار: ۵ تیر ۱۴۰۴
دسته بندی موضوعات
- آموزش ارز دیجیتال
- آموزش برنامه نویسی
- آموزش متنی برنامه نویسی
- اطلاعیه و سایر مطالب
- پروژه برنامه نویسی
- دوره های تخصصی برنامه نویسی
- رپورتاژ
- فیلم های آموزشی
- ++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
- اچ تی ام ال
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- پاسکال
- پایان نامه
- پایتون
- جاوا
- جاوا اسکریپت
- جی کوئری
- داده کاوی
- دلفی
- رباتیک
- سئو
- سایر کتاب ها
- سخت افزار
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- طراحی الگوریتم
- فتوشاپ
- مقاله
- مهندسی نرم افزار
- هک و امنیت
- هوش مصنوعی
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس
