طراحی و ایجاد جداول در bootstrap 4
یکی از مزایای بوت استرپ فرمت بندی کامل جداول در HTML است. به سادگی اضافه کردن کلاس هایی به جدواول میتوان آنها را به شکل های مختلف فرمت بندی کرد. در این فصل با انواع این کلاس ها آشنا خواهیم شد.در این قسمت از آموزش‌های بوت‌استرپ به طراحی جداول در bootstrap 4 خواهیم پرداخت.
جدول ساده
یک جدول ساده در بوت استرپ ۴ دارای لایه های روشن و تقسیم بندی افقی است.
کلاس .table یک ظاهر طراحی اولیه را به یک جدول اضافه می کند برای درک این موضوع به مثال زیر توجه کنید :
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 | <table class="table"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> |
یکی از مزایای بوت استرپ فرمت بندی کامل جداول در HTML است. به سادگی اضافه کردن کلاس هایی به جدواول میتوان آنها را به شکل های مختلف فرمت بندی کرد. در این فصل با انواع این کلاس ها آشنا خواهیم شد.در این قسمت از اموزش های بوت استرپ به طراحی جدول با bootstrap 4 خواهیم پرداخت.
پیشنهاد میشود سایر قسمت های دوره ی بوت استرپ را مطالعه فرمایید.
اگر بخواهیم ردیف های جدول را به شکل جداول اداری یکی در میان خط کشی کنیم باید کلاس table-striped. را به آن اضافه کنیم:
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 | <table class="table table-striped"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> |
حاشیه برای جدول ها
برای اضافه کردن حاشیه می توانید از کلاس table-bordered. استفاده کنید:
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 | <table class="table table-bordered"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> |
قابلیت hover در ردیف ها
حتما تا به حال دیده اید که برخی از جداول قابلیت خاصی دارند؛ اگر موس را روی آن ها ببرید، ردیف مربوطه شان پررنگ تر شده یا به طور کل تغییر می کند تا خواننده بتواند اطلاعات را واضح تر ببیند. برای ایجاد چنین قابلیت باید کلاس table-hover. را به جدول خود اضافه کنید:
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 | <table class="table table-hover"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> |
جداول تیره (night mode)
ممکن است شما از دسته افرادی باشید که قالب وب سایتتان را به دو صورت عادی و حالت شب طراحی کرده اید تا کاربران بتوانند راحت تر مطالب را ببینند. اگر اینطور است تنها کافی است به جدول هایتان کلاس table-dark. را اضافه کنید:
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 | <table class="table table-dark"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> |
ترکیب کلاس ها
همانطور که میدانید در زبان HTML اجازه ی استفاده از چندین کلاس برای یک عنصر را دارید. بنابراین می توانیم کلاس های بوت استرپ را نیز ترکیب کنیم. به طور مثال اگر بخواهیم جدولی تیره (حالت شب) داشته باشیم و همچنین ردیف هایش را یکی در میان تیره و روشن کنیم (حالت جداول اداری) می توانیم کلاس های table-striped. و table-dark. را ترکیب کنیم:
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 | <table class="table table-dark table-striped"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> |
همچنین با استفاده از کلاس table-hover. می توانیم افکت hover را روی جدول های تیره ی خود نیز پیاده کنیم:
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 | <table class="table table-dark table-hover"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> |
کلاس های زمینه ای
در بخش از آموزش طراحی جداول در bootstrap 4 ، با کلاس‌های زمینه‌ای آشنا خواهیم شد. این نوع کلاس‌ها زمینه‌ی هر ردیف را تعیین می‌کنند. به طور مثال فلان ردیف چقدر مهم است؟ آیا ردیفی از جدول در bootstrap در حال اخطار دادن به کاربر است؟ و هر نوع اطلاعات دیگری که ردیف های جدول را معنا دار کند معمولا در این قسمت قرار می گیرد. این اهمیت ها معمولا با رنگ اعمال می شوند:
- .table-primary: ایجاد رنگ آبی: نشان دهنده ی عمل مهم
- .table-success: ایجاد رنگ سبز: نشان دهنده ی عمل موفقیت آمیز یا مثبت
- .table-danger: ایجاد رنگ قرمز: نشان دهنده ی عمل خطرناک یا منفی
- .table-info: ایجاد رنگ آبی روشن: نشان دهنده ی تغییر یا عملی خنثی (نه مثبت و نه منفی)
- .table-warning: ایجاد رنگ نارنجی: نشان دهنده ی هشداری که بهتر است به آن رسیدگی شود
- .table-active:ایجاد رنگ خاکستری: رنگ افکت hover را به آن ردیف اضافه می کند
- .table-secondary : ایجاد رنگ خاکستری: نشان دهنده ی عملی که کم اهمیت تر است
- .table-light: ایجاد رنگ خاکستری روشن برای کل جدول یا ردیف های آن
- .table-dark: ایجاد رنگ خاکستری تیره برای کل جدول یا ردیف های آن
بسیار عالی از سایت خوبتون تشکر میکنم خدا بهتون خیر بده
با سلام وقتتون بخیر
شما از چه سیستمی برای فروش محصولاتتون استفاده می کنید؟