در این بخش به بررسی دکمه ها در بوت استرپ می‌پردازیم. شما میتوانید از استایل‌های سفارشی دکمه در بوت استرپ برای اجرای انواع عملیات در فرم ها، پنجره های محاوره ای (dialogs) و بسیاری از موقعیت های دیگر استفاده کنید. این سیستم از اندازه‌های مختلف، وضعیت‌های گوناگون و ویژگی‌های متنوع پشتیبانی می‌کند. بوت استرپ شامل کلاس .btn است که وظیفه اعمال استایل‌های پایه ای مانند فاصله داخلی (padding) و تراز محتوای دکمه را بر عهده دارد.
ساخت یک دکمه ساده در بوت استرپ
برای ساخت یک دکمه ساده، کافی است از کلاس .btn استفاده کنید. این کلاس استایل‌های اولیه مانند فاصله داخلی مناسب و تراز درست محتوا را پیاده‌سازی می‌کند. همچنین، کلاس .btn یک حاشیه شفاف، رنگ پس‌زمینه مشخص و استایل مشخصی برای حالت‌های فوکوس و هاور ارائه نمی‌دهد؛ بنابراین رفتار آن در این حالت‌ها به تنظیمات پیش‌فرض مرورگر وابسته خواهد بود.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <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> <title>Bootstrap - Buttons</title> </head> <body> <button type="button" class="btn btn-primary">Base Button </button> </body> </html> |
انواع دکمه ها در بوت استرپ
بوت استرپ مجموعه‌ای از سبک‌های مختلف دکمه را ارائه می‌دهد که هرکدام کاربرد معنایی خاص خود را دارند و علاوه بر آن، گزینه‌هایی برای کنترل بیشتر در طراحی نیز در اختیار شما قرار می‌گیرد. برای اعمال این سبک‌ها، بوت استرپ کلاس‌های زیر را معرفی کرده است:
-
.btn -
.btn-default -
.btn-primary -
.btn-success -
.btn-info -
.btn-warning -
.btn-danger -
.btn-link
هرکدام از این کلاس‌ها نمایانگر نوع خاصی از عملکرد یا وضعیت هستند. به عنوان مثال، کلاس .btn-primary معمولاً برای اقدامات اصلی در یک فرم یا رابط کاربری استفاده می‌شود، در حالی که .btn-danger برای نمایش عملکردهای خطرناک مانند حذف استفاده می‌گردد. استفاده درست از این کلاس‌ها به درک بهتر عملکرد دکمه توسط کاربر کمک می‌کند و تجربه کاربری را بهبود می‌بخشد.
|
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> <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> <title>Bootstrap - Buttons</title> </head> <body> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-light">Light</button> <button type="button" class="btn btn-dark">Dark</button> <button type="button" class="btn btn-link">Link</button> </body> </html> |
غیرفعال کردن رفتن متن به خط بعد
برای جلوگیری از شکستن متن دکمه و رفتن آن به خط بعد، کافی است کلاس .text-nowrap را به عنصر دکمه اضافه کنید. این کلاس باعث می‌شود متن داخل دکمه در یک خط باقی بماند و به هیچ وجه به خط بعد منتقل نشود، حتی اگر عرض دکمه محدود باشد. این ویژگی زمانی کاربرد دارد که بخواهید ظاهر دکمه ها منسجم و یک‌دست باقی بماند، به ویژه در رابط های کاربری واکنش گرا.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="en"> <head> <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> <title>Bootstrap - Buttons</title> </head> <body> <button type="button" class="btn btn-primary text-nowrap">this button's text has disabled text wrapping. Here we see the test in a single line</button><br><br><br> <button type="button" class="btn btn-primary">this button's text does not have text wrapping enabled. Here we see the text being wrapped to next line</button> </body> </html> |
تگ های قابل استفاده برای دکمه در بوت استرپ
کلاس های .btn را می‌توان نه تنها روی عناصر <button>، بلکه روی تگ های <a> و <input> نیز استفاده کرد. این ویژگی که در آموزش بوت استرپ نیز به آن پرداخته شده، به شما امکان می‌دهد عناصر مختلفی را با ظاهر یکپارچه اما عملکردهای متنوع در رابط کاربری ایجاد کنید.
زمانی که از کلاس های دکمه روی تگ <a> استفاده می‌کنید و هدف شما اجرای عملکردی در همان صفحه (و نه رفتن به صفحه یا بخش جدید) است، باید ویژگی role="button" را به آن عنصر اضافه کنید. این ویژگی کمک می‌کند ابزارهای کمکی مانند صفحه خوان ها (screen readers) بتوانند به درستی تشخیص دهند که این لینک در واقع نقش یک دکمه را دارد، نه یک لینک معمولی. این اقدام باعث بهبود دسترسی پذیری (Accessibility) رابط کاربری شما می‌شود.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="en"> <head> <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> <title>Bootstrap - Buttons</title> </head> <body> <a href="#"role="button" class="btn btn-info">Download Link</a> <button type="button" class="btn btn-primary">Button</button> <input type="submit" class="btn btn-secondary" value="Submit"> <input type="button" class="btn btn-danger" value="Login"> <input type="reset" class="btn btn-light" value="Reset"> </body> </html> |
دکمه بدون پس‌زمینه رنگی
اگر قصد دارید دکمه ای با ظاهر ساده‌تر و بدون پس زمینه رنگی ایجاد کنید، میتوانید از کلاس‌های .btn-outline-* استفاده کنید. این کلاس‌ها تمام رنگ ها و تصاویر پس زمینه را از دکمه حذف می‌کنند و به جای آن، تنها یک کادر (حاشیه) رنگی نمایش می‌دهند که معمولاً رنگ آن مطابق با نوع دکمه انتخابی خواهد بود.
برای مثال، کلاس .btn-outline-primary باعث می‌شود دکمه تنها دارای حاشیه آبی رنگ باشد، بدون اینکه پس‌زمینه‌ای رنگی داشته باشد. این نوع دکمه ها برای طراحی‌های مینیمال یا زمانی که نیاز به تاکید کمتر دارید، بسیار مناسب هستند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html lang="en"> <head> <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> <title>Bootstrap - Buttons</title> </head> <body> <button type="button" class="btn btn-outline-primary">Primary Button</button> <button type="submit" class="btn btn-outline-secondary">Secondary Button</button> <button type="button" class="btn btn-outline-warning">Warning Button</button> <button type="button" class="btn btn-outline-success">Sucess Button</button> <button type="button" class="btn btn-outline-light">Light Button</button> <button type="button" class="btn btn-outline-danger">Danger Button</button> <button type="button" class="btn btn-outline-dark">Dark Button</button> <button type="button" class="btn btn-outline-info">Info Button</button> <button type="button" class="btn btn-outline-link">Link</button> </button> </body> </html> |
اندازه دکمه ها در بوت استرپ
برای ایجاد دکمه های بزرگ‌تر یا کوچک‌تر، کافی است کلاس هایی مانند .btn-lg برای دکمه های بزرگ و .btn-sm برای دکمه های کوچک را به همراه کلاس .btn استفاده کنید. این کلاس ها اندازه دکمه را بر اساس نیاز شما تغییر می‌دهند و در موقعیت های مختلف مانند فرم های فشرده یا بخش های برجسته کاربرد دارند.
اگر نیاز به اندازه های سفارشی‌تر دارید، میتوانید با استفاده از متغیرهای CSS اندازه مورد نظر خود را به راحتی تعریف و پیاده سازی کنید. این روش کنترل بیشتری بر ابعاد دکمه ها به شما می‌دهد و برای طراحی های خاص بسیار مفید است.
|
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> <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> <title>Bootstrap - Buttons</title> </head> <body> <button type="button" class="btn btn-primary btn-lg">Large button</button> <button type="button" class="btn btn-info btn-sm">Small Button</button> <button type="button" class="btn btn-warning" style="--bs-btn-padding-y: .24rem; --bs-btn-padding-x: .8rem; --bs-btn-font-size: .75rem;"> Custom Button </button> </body> </html> |
وضعیت دکمه غیرفعال
بوت استرپ کلاس .disabled را برای غیرفعال کردن دکمه ها یا لینک ها ارائه می‌دهد. زمانی که این کلاس را به یک عنصر اضافه می‌کنید، آن عنصر دیگر نسبت به رویدادهای کلیک یا حالت های هاور واکنشی نشان نمی‌دهد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="en"> <head> <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> <title>Bootstrap - Buttons</title> </head> <body> <button type="button" class="btn btn-primary disabled">Primary Disabled Button</button> <button type="button" class="btn btn-secondary" disabled>Secondary Disabled Button</button> <button type="button" class="btn btn-outline-primary" disabled>Outline Primary Disabled button</button> <button type="button" class="btn btn-outline-secondary" disabled>Outline Secondary Disabled Button</button> </button> </body> </html> |
استفاده از تگ <a> برای ساخت دکمه های غیرفعال کمی تفاوت دارد، زیرا این عنصر از ویژگی disabled پشتیبانی نمی‌کند. برای اینکه چنین دکمه ای به صورت غیرفعال نمایش داده شود، باید کلاس .disabled را به آن اضافه کنید تا ظاهر آن غیرقابل کلیک به نظر برسد.
برای جلوگیری از هرگونه تعامل کاربر (مانند کلیک یا هاور) روی این دکمه ها، بوت استرپ استایل هایی را در نظر گرفته است که تمام رویدادهای اشاره‌گر (pointer events) را غیرفعال می‌کنند و با مرورگرهای آینده نیز سازگار هستند.
علاوه بر این، برای اطلاع رسانی وضعیت غیرفعال بودن به ابزارهای دستیار (مثل صفحه خوان‌ها)، باید ویژگی aria-disabled="true" را به تگ <a> اضافه کنید. همچنین بهتر است از قرار دادن ویژگی href در چنین دکمه هایی خودداری کنید، چون این ویژگی باعث می‌شود مرورگر همچنان آن را به عنوان یک لینک فعال بشناسد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="en"> <head> <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> <title>Bootstrap - Buttons</title> </head> <body> <a class="btn btn-primary disabled" role="button" aria-disabled="true">Primary Disabled</a> <a class="btn btn-secondary disabled" role="button" aria-disabled="true">Secondary Disabled</a> <a class="btn btn-outline-danger disabled" role="button" aria-disabled="true">Outline Primary Disabled Button</a> <a class="btn btn-outline-warning disabled" role="button" aria-disabled="true">Outline Secondary Disabled Button</a> </button> </body> </html> |
نکته مهم درباره غیرفعال سازی لینک ها
اگر نیاز دارید ویژگی href را روی یک لینک غیرفعال حفظ کنید، بوت استرپ با استفاده از کلاس .disabled و اعمال pointer-events: none سعی می‌کند عملکرد کلیک روی تگ <a> را غیرفعال کند. این روش تا حد زیادی از تعامل کاربر با لینک جلوگیری می‌کند.
با این حال، کاربران صفحه کلید و ابزارهای کمکی (مانند صفحه‌خوان‌ها) همچنان می‌توانند این لینک‌ها را فعال کنند؛ بنابراین تنها تکیه بر استایل کافی نیست.
برای کنترل بهتر این لینک ها، میتوانید از ترکیب ویژگی‌های aria-disabled="true" و tabindex="-1" استفاده کنید. این ترکیب باعث می‌شود عنصر مورد نظر دیگر در ترتیب پیمایش با صفحه کلید قرار نگیرد و به ابزارهای کمکی اعلام شود که لینک غیرفعال است. در صورت نیاز به غیرفعال سازی کامل عملکرد لینک، بهتر است از اسکریپت جاوا اسکریپت برای کنترل دقیق‌تر آن استفاده کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en"> <head> <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> <title>Bootstrap - Buttons</title> </head> <body> <a href="#" class="btn btn-primary disabled" tabindex="-1" role="button" aria-disabled="true">Disables Primary Link</a> <a href="#" class="btn btn-secondary disabled" tabindex="-1" role="button" aria-disabled="true">Disabled Secondary Link</a> </button> </body> </html> |
دکمه های بلوکی در بوت استرپ
- برای ایجاد دکمه هایی با عرض کامل (تمام عرض ردیف) و طراحی پشته ای واکنش گرا، میتوانید از ترکیب کلاس های نمایشی (
display) و فاصله گذاری (gap) در بوت استرپ استفاده کنید؛ مشابه چیزی که در نسخه ۴ بوت استرپ معرفی شده بود. - با این حال، استفاده از کلاس های اختصاصی دکمه به جای ابزارهای عمومی (utilities) به شما این امکان را می‌دهد که کنترل دقیق‌تری بر فاصله گذاری، نحوه چینش و رفتار واکنش گرا داشته باشید.
برای تعیین عرض دکمه های بلوکی، میتوانید از کلاس های ستون (grid) استفاده کنید. به عنوان مثال، برای ساخت دکمه ای با نصف عرض ردیف، کافی است کلاس .col-6 را به آن اضافه کنید. اگر بخواهید این دکمه به صورت افقی در وسط قرار بگیرد، میتوانید از کلاس .mx-auto نیز استفاده کنید.
در مثال زیر، یک دکمه بلوکی تمام‌عرض و یک دکمه بلوکی با نصف عرض (و تراز وسط) با استفاده از کلاس .col-6 نمایش داده شده اند. این روش برای ساخت رابط های کاربری منسجم و قابل استفاده در موبایل بسیار کاربردی است.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html lang="en"> <head> <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> <title>Bootstrap - Buttons</title> </head> <body> <div class="d-grid gap-2 mt-1"> <button class="btn btn-primary" type="button">Primary Block Button</button> <button class="btn btn-secondary" type="button">Secondary Block Button</button> </div> <div class="d-grid gap-2 col-6 mx-auto mt-4"> <button class="btn btn-primary" type="button">Primary Button Using Grid Column Width Classes</button> <button class="btn btn-secondary" type="button">Secondary Button Using Grid Column Width Classes</button> </div> </button> </body> </html> |
افزونه دکمه
افزونه دکمه در بوت استرپ به شما این امکان را می‌دهد که به‌سادگی دکمه‌هایی با حالت روشن/خاموش (Toggle) ایجاد کنید؛ یعنی دکمه بتواند بین حالت فعال و غیرفعال جابه‌جا شود.
تغییر وضعیت دکمه در بوت استرپ
برای فعال و غیرفعال کردن وضعیت یک دکمه، کافی است ویژگی data-bs-toggle="button" را به آن اضافه کنید. این ویژگی باعث می‌شود دکمه هنگام کلیک به حالت فعال برود و با کلیک مجدد به حالت اولیه بازگردد.
برای اینکه ابزارهای کمکی مانند صفحه‌خوان‌ها نیز بتوانند این وضعیت را به‌درستی تشخیص دهند، باید از ویژگی aria-pressed="true" استفاده کنید. این ویژگی نشان می‌دهد که دکمه در حالت فعال قرار دارد و کمک می‌کند تجربه کاربری بهتری برای افراد دارای نیازهای ویژه فراهم شود.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en"> <head> <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> <title>Bootstrap - Buttons</title> </head> <body> <button type="button" class="btn btn-primary" data-bs-toggle="button">Primary Toggle Button</button> <button type="button" class="btn btn-secondary active" data-bs-toggle="button" aria-pressed="true">Secondary Active Toggle Button</button> <button type="button" class="btn btn-info" disabled data-bs-toggle="button">Info Disabled Toggle Button</button> </button> </body> </html> |
شما میتوانید دکمه های تغییر وضعیت (toggle) را نه تنها با تگ <button> بلکه با استفاده از تگ <a> نیز بسازید. کافی است ویژگی data-bs-toggle="button" را به عنصر <a> اضافه کنید تا همان رفتار روشن/خاموش در آن پیاده‌سازی شود.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en"> <head> <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> <title>Bootstrap - Buttons</title> </head> <body> <a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Primary Toggle link</a> <a href="#" class="btn btn-secondary active" role="button" data-bs-toggle="button" aria-pressed="true">SecondaryActive toggle link</a> <a class="btn btn-info disabled" aria-disabled="true" role="button" data-bs-toggle="button">Info Disabled togglelink</a> </button> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
- انتشار: ۴ خرداد ۱۴۰۴
دسته بندی موضوعات
- آموزش ارز دیجیتال
- آموزش برنامه نویسی
- آموزش متنی برنامه نویسی
- اطلاعیه و سایر مطالب
- پروژه برنامه نویسی
- دوره های تخصصی برنامه نویسی
- رپورتاژ
- فیلم های آموزشی
- ++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
- اچ تی ام ال
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- پاسکال
- پایان نامه
- پایتون
- جاوا
- جاوا اسکریپت
- جی کوئری
- داده کاوی
- دلفی
- رباتیک
- سئو
- سایر کتاب ها
- سخت افزار
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- طراحی الگوریتم
- فتوشاپ
- مقاله
- مهندسی نرم افزار
- هک و امنیت
- هوش مصنوعی
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس
