در این قسمت از اموزش های بوت استرپ به طراحی جدول با bootstrap 4 خواهیم پرداخت.
پیشنهاد میشود سایر قسمت های دوره ی بوت استرپ را مطالعه فرمایید.
جدول ساده
یک جدول ساده در بوت استرپ 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 27 28 29 |
<div class="container"> <h2>جدول ساده</h2> <table class="table"> <thead> <tr> <th>نام</th> <th>نام خانوادگی</th> <th>ایمیل</th> </tr> </thead> <tbody> <tr> <td>مرتضی</td> <td>افضلی</td> <td>morteza@example.com</td> </tr> <tr> <td>سجاد</td> <td>حسین زاده</td> <td>sajjad@example.com</td> </tr> <tr> <td>پوریا</td> <td>مرادی</td> <td>pooriya@example.com</td> </tr> </tbody> </table> </div> |
ردیف های راه راه
برای ایجاد ردیف های راه راه در جدول مورد نظر باید از کلاس .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 27 28 29 |
<div class="container"> <h2>جدول با ردیف های راه راه</h2> <table class="table table-striped"> <thead> <tr> <th>نام</th> <th>نام خانوادگی</th> <th>ایمیل</th> </tr> </thead> <tbody> <tr> <td>مرتضی</td> <td>افضلی</td> <td>morteza@example.com</td> </tr> <tr> <td>سجاد</td> <td>حسین زاده</td> <td>sajjad@example.com</td> </tr> <tr> <td>پوریا</td> <td>مرادی</td> <td>pooriya@example.com</td> </tr> </tbody> </table> </div> |
جدول مرز بندی شده
برای ایجاد یک جداول که دارای حاشیه باشد باید از کلاس .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 27 28 29 |
<div class="container"> <h2>جدول دارای حاشیه</h2> <table class="table table-bordered"> <thead> <tr> <th>نام</th> <th>نام خانوادگی</th> <th>ایمیل</th> </tr> </thead> <tbody> <tr> <td>مرتضی</td> <td>افضلی</td> <td>morteza@example.com</td> </tr> <tr> <td>سجاد</td> <td>حسین زاده</td> <td>sajjad@example.com</td> </tr> <tr> <td>پوریا</td> <td>مرادی</td> <td>pooriya@example.com</td> </tr> </tbody> </table> </div> |
افکت در هنگام اشاره موس
اگر قصد دارید یک جدول حرفه ای طراحی کنید باید از کلاس .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 27 28 |
<div class="container"> <table class="table table-hover"> <thead> <tr> <th>نام</th> <th>نام خانوادگی</th> <th>ایمیل</th> </tr> </thead> <tbody> <tr> <td>مرتضی</td> <td>افضلی</td> <td>morteza@example.com</td> </tr> <tr> <td>سجاد</td> <td>حسین زاده</td> <td>sajjad@example.com</td> </tr> <tr> <td>پوریا</td> <td>مرادی</td> <td>pooriya@example.com</td> </tr> </tbody> </table> </div> |
جدول سیاه و سفید
برای ایجاد یک جدول با قابلیت پس زمینه ی مشکی و همچنین رنگ متن های سفید باید از کلاس .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 27 28 29 |
<div class="container"> <h2>جدول سیاه و سفید</h2> <table class="table table-dark"> <thead> <tr> <th>نام</th> <th>نام خانوادگی</th> <th>ایمیل</th> </tr> </thead> <tbody> <tr> <td>مرتضی</td> <td>افضلی</td> <td>morteza@example.com</td> </tr> <tr> <td>سجاد</td> <td>حسین زاده</td> <td>sajjad@example.com</td> </tr> <tr> <td>پوریا</td> <td>مرادی</td> <td>pooriya@example.com</td> </tr> </tbody> </table> </div> |
جدول مشکی و راه راه
شما اگر قصد دارید یک ظاهر متفاوت یعنی مشکی و راه راه داشته باشید باید از کلاس .table-dark و .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 27 28 29 |
<div class="container"> <h2>جدول سیاه و راه راه</h2> <table class="table table-dark table-striped"> <thead> <tr> <th>نام</th> <th>نام خانوادگی</th> <th>ایمیل</th> </tr> </thead> <tbody> <tr> <td>مرتضی</td> <td>افضلی</td> <td>morteza@example.com</td> </tr> <tr> <td>سجاد</td> <td>حسین زاده</td> <td>sajjad@example.com</td> </tr> <tr> <td>پوریا</td> <td>مرادی</td> <td>pooriya@example.com</td> </tr> </tbody> </table> </div> |
افکت موس در حالت تیره
برای ایجاد افکت موس درحالت تیره کافی است کلاس .table-hover را به علاوه کلاس .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 27 28 |
<div class="container"> <table class="table table-dark table-hover"> <thead> <tr> <th>نام</th> <th>نام خانوادگی</th> <th>ایمیل</th> </tr> </thead> <tbody> <tr> <td>مرتضی</td> <td>افضلی</td> <td>morteza@example.com</td> </tr> <tr> <td>سجاد</td> <td>حسین زاده</td> <td>sajjad@example.com</td> </tr> <tr> <td>پوریا</td> <td>مرادی</td> <td>pooriya@example.com</td> </tr> </tbody> </table> </div> |
جدول بدون حاشیه دور
|
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 |
<div class="container"> <table class="table table-borderless"> <thead> <tr> <th>نام</th> <th>نام خانوادگی</th> <th>ایمیل</th> </tr> </thead> <tbody> <tr> <td>مرتضی</td> <td>افضلی</td> <td>morteza@example.com</td> </tr> <tr> <td>سجاد</td> <td>حسین زاده</td> <td>sajjad@example.com</td> </tr> <tr> <td>پوریا</td> <td>مرادی</td> <td>pooriya@example.com</td> </tr> </tbody> </table> </div> |
کلاسهای متنی
شما در جلسه گذشته با انواع رنگ ها و متن ها اشنا شدید ، حال وقت ان است که از تجربه ی جلسه گذشته یک خلاقیت ایجاد کنید ، کلاسه های متنی و بک گراند های جلسه ی پیش را با تگ های جدول ادغام کنید تا ترکیب زیبایی برای جداول خود خلق کنید.
تنها تفاوت استفاده از رنگ ها در جداول اوردن کلمه ی table بجای bg یا text در درس گذشته است.
رنگ سربرگ
شما با اضافه کردن کلاس .thead-dark یک سربرگ با پس زمینه ی تیره و با اضافه کردن .thead-light یک سربرگ با رنگ روشن ایجاد میکنید.
|
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 |
<div class="container"> <table class="table"> <thead class="thead-dark"> <tr> <th>نام</th> <th>نام خانوادگی</th> <th>ایمیل</th> </tr> </thead> <tbody> <tr> <td>مرتضی</td> <td>افضلی</td> <td>morteza@example.com</td> </tr> <tr> <td>سجاد</td> <td>حسین زاده</td> <td>sajjad@example.com</td> </tr> <tr> <td>پوریا</td> <td>مرادی</td> <td>pooriya@example.com</td> </tr> </tbody> </table> <table class="table"> <thead class="thead-light"> <tr> <th>نام</th> <th>نام خانوادگی</th> <th>ایمیل</th> </tr> </thead> <tbody> <tr> <td>مرتضی</td> <td>افضلی</td> <td>morteza@example.com</td> </tr> <tr> <td>سجاد</td> <td>حسین زاده</td> <td>sajjad@example.com</td> </tr> <tr> <td>پوریا</td> <td>مرادی</td> <td>pooriya@example.com</td> </tr> </tbody> </table> </div> |
جداول کوچک
با اضافه کردن کلاس .table-sm شما یک جدول کوچک ایجاد میکنید:
|
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 |
<div class="container"> <h2>جداول کوچیک</h2> <table class="table table-bordered table-sm"> <thead> <tr> <th>نام</th> <th>نام خانوادگی</th> <th>ایمیل</th> </tr> </thead> <tbody> <tr> <td>مرتضی</td> <td>افضلی</td> <td>morteza@example.com</td> </tr> <tr> <td>سجاد</td> <td>حسین زاده</td> <td>sajjad@example.com</td> </tr> <tr> <td>پوریا</td> <td>مرادی</td> <td>pooriya@example.com</td> </tr> </tbody> </table> </div> |
جداول ریسپانسیو یا واکنشگرا
برای واکنشگرا کردن یک جدول باید از کلاس .table-responsive استفاده کنید ، با افزودن این کلاس یک صفحه نور افقی به روی صفحه نمایش اضافه میشود که از عرض 992 پیکسل کمتر باشد و اگر صفحه ی شما از 992 پیکسل بزرگتر باشد هیچ تفاوتی ایجاد نمیشود :
|
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 |
<div class="container"> <div class="table-responsive"> <table class="table table-bordered"> <thead> <tr> <th>#</th> <th>نام</th> <th>نام خانوادگی</th> <th>سن</th> <th>شهر</th> <th>کشور</th> <th>جسنسیت</th> <th>مثال</th> <th>مثال</th> <th>مثال</th> <th>مثال</th> <th>مثال</th> <th>مثال</th> <th>مثال</th> <th>مثال</th> <th>مثال</th> <th>مثال</th> <th>مثال</th> <th>مثال</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>مرتضی</td> <td>افضلی</td> <td>22</td> <td>تهران</td> <td>ایران</td> <td>مرد</td> <td>تست</td> <td>تست</td> <td>تست</td> <td>تست</td> <td>تست</td> <td>تست</td> <td>تست</td> <td>تست</td> <td>تست</td> <td>تست</td> <td>تست</td> <td>تست</td> </tr> </tbody> </table> </div> </div> |
شما برای ایجاد اسکرول بار میتوانید از کلاس های زیر نیز استفاده کنید ، همانطور که در مثال بالا دیدید هنگامی اسکرول بار اضافه میشود که صفحه نمایش کمتر از 992 پیکسل باشد.
کلاس .table-responsive-sm برای کوچکتر از 576 پیکسل ، کلاس .table-responsive-md برای کوچکتر از 768 پیکسل ، کلاس .table-responsive-lg برای کوچکتر از 992 پیکسل و کلاس .table-responsive-xl برای نمایشگرهای کوچکتر از 1200 پیکسل اسکرول ایجاد میکنند.
ویدیوی قسمت پنجم
به انتهای این اموزش نیز رسیدیم امیدوارم این قسمت از اموزش ها برای شما عزیزان مفید واقع شده باشد ، در صورت نیاز برای اطلاعات بیشتر میتوانید به سایت getbootstrap مراجعه کنید.
پیروز باشید.
