صف پرداخت های اخیر
صف پرداخت های اخیر کلاس table boootrstap را در root اضافه کنید
| # | بیمار | نام دکتر | تاریخ | وضعیت | قیمت | |
|---|---|---|---|---|---|---|
| 01 | آقای بابی | دکتر جکسون | 01 آگوست 2020 | موفق | $21.56 |
|
| 02 | آقای بابی | دکتر جکسون | 01 آگوست 2020 | لغو شد | $21.56 |
|
| 03 | آقای بابی | دکتر جکسون | 01 آگوست 2020 | در انتظار | $21.56 |
|
<div class="table-responsive">
<table class="table table-responsive-md">
<thead>
<tr>
<th style="width:80px;"><strong>#</strong></th>
<th><strong>بیمار</strong></th>
<th><strong>نام دکتر</strong></th>
<th><strong>تاریخ</strong></th>
<th><strong>وضعیت</strong></th>
<th><strong>قیمت</strong></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>01</strong></td>
<td>آقای بابی</td>
<td>دکتر جکسون</td>
<td>01 آگوست 2020</td>
<td><span class="badge light badge-success">موفق</span></td>
<td>$21.56</td>
<td>
<div class="dropdown">
<button type="button" class="btn btn-success light sharp" data-bs-toggle="dropdown">
<svg width="20px" height="20px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="0" width="24" height="24"/><circle fill="#000000" cx="5" cy="12" r="2"/><circle fill="#000000" cx="12" cy="12" r="2"/><circle fill="#000000" cx="19" cy="12" r="2"/></g></svg>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">ویرایش</a>
<a class="dropdown-item" href="#">حذف</a>
</div>
</div>
</td>
</tr>
<tr>
<td><strong>02</strong></td>
<td>آقای بابی</td>
<td>دکتر جکسون</td>
<td>01 آگوست 2020</td>
<td><span class="badge light badge-danger">لغو شد</span></td>
<td>$21.56</td>
<td>
<div class="dropdown">
<button type="button" class="btn btn-danger light sharp" data-bs-toggle="dropdown">
<svg width="20px" height="20px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="0" width="24" height="24"/><circle fill="#000000" cx="5" cy="12" r="2"/><circle fill="#000000" cx="12" cy="12" r="2"/><circle fill="#000000" cx="19" cy="12" r="2"/></g></svg>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">ویرایش</a>
<a class="dropdown-item" href="#">حذف</a>
</div>
</div>
</td>
</tr>
<tr>
<td><strong>03</strong></td>
<td>آقای بابی</td>
<td>دکتر جکسون</td>
<td>01 آگوست 2020</td>
<td><span class="badge light badge-warning">در انتظار</span></td>
<td>$21.56</td>
<td>
<div class="dropdown">
<button type="button" class="btn btn-warning light sharp" data-bs-toggle="dropdown">
<svg width="20px" height="20px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="0" width="24" height="24"/><circle fill="#000000" cx="5" cy="12" r="2"/><circle fill="#000000" cx="12" cy="12" r="2"/><circle fill="#000000" cx="19" cy="12" r="2"/></g></svg>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">ویرایش</a>
<a class="dropdown-item" href="#">حذف</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
نفرات برتر امتحانی
نفرات برتر امتحانی اضافه کردن کلاس exam با کلاس bootstrap-table
<div class="table-responsive">
<table class="table table-responsive-md">
<thead>
<tr>
<th style="width:50px;">
<div class="form-check custom-checkbox checkbox-primary check-lg me-3">
<input type="checkbox" class="form-check-input" id="checkAll" required="">
<label class="form-check-label" for="checkAll"></label>
</div>
</th>
<th><strong>رول شماره.</strong></th>
<th><strong>نام</strong></th>
<th><strong>ایمیل</strong></th>
<th><strong>تاریخ</strong></th>
<th><strong>وضعیت</strong></th>
<th><strong></strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="form-check custom-checkbox checkbox-primary check-lg me-3">
<input type="checkbox" class="form-check-input" id="customCheckBox2" required="">
<label class="form-check-label" for="customCheckBox2"></label>
</div>
</td>
<td><strong>542</strong></td>
<td>
<div class="d-flex align-items-center">
<img src="images/avatar/1.jpg" class="rounded-lg me-2" width="24" alt="">
<span class="w-space-no">دکتر جکسون</span>
</div>
</td>
<td>example@example.com </td>
<td>01 آگوست 2020</td>
<td><div class="d-flex align-items-center"><i class="fa fa-circle text-success me-1"></i> موفق</div></td>
<td>
<div class="d-flex">
<a href="#" class="btn btn-primary shadow btn-xs sharp me-1"><i class="fa fa-pencil"></i></a>
<a href="#" class="btn btn-danger shadow btn-xs sharp"><i class="fa fa-trash"></i></a>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-check custom-checkbox checkbox-primary check-lg me-3">
<input type="checkbox" class="form-check-input" id="customCheckBox3" required="">
<label class="form-check-label" for="customCheckBox3"></label>
</div>
</td>
<td><strong>542</strong></td>
<td><div class="d-flex align-items-center"><img src="images/avatar/2.jpg" class="rounded-lg me-2" width="24" alt=""> <span class="w-space-no">دکتر جکسون</span></div></td>
<td>example@example.com </td>
<td>01 آگوست 2020</td>
<td><div class="d-flex align-items-center"><i class="fa fa-circle text-danger me-1"></i> لغو شد</div></td>
<td>
<div class="d-flex">
<a href="#" class="btn btn-primary shadow btn-xs sharp me-1"><i class="fa fa-pencil"></i></a>
<a href="#" class="btn btn-danger shadow btn-xs sharp"><i class="fa fa-trash"></i></a>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-check custom-checkbox checkbox-primary check-lg me-3">
<input type="checkbox" class="form-check-input" id="customCheckBox4" required="">
<label class="form-check-label" for="customCheckBox4"></label>
</div>
</td>
<td><strong>542</strong></td>
<td><div class="d-flex align-items-center"><img src="images/avatar/3.jpg" class="rounded-lg me-2" width="24" alt=""> <span class="w-space-no">دکتر جکسون</span></div></td>
<td>example@example.com </td>
<td>01 آگوست 2020</td>
<td><div class="d-flex align-items-center"><i class="fa fa-circle text-warning me-1"></i> در انتظار</div></td>
<td>
<div class="d-flex">
<a href="#" class="btn btn-primary shadow btn-xs sharp me-1"><i class="fa fa-pencil"></i></a>
<a href="#" class="btn btn-danger shadow btn-xs sharp"><i class="fa fa-trash"></i></a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
پایه
کلاس basic را با bootstrap-table اضافه کنید
| # | نام | وضعیت | تاریخ | قیمت |
|---|---|---|---|---|
| 1 | تی شرت رنگی مردانه | فروش | ژانویه 22 | $21.56 |
| 2 | پیراهن چای رنگی زنانه | مالیات | ژانویه 30 | $55.32 |
| 3 | کوله پشتی آبی برای کودک | تمدید شد | ژانویه 25 | $14.85 |
<div class="table-responsive">
<table class="table table-responsive-sm">
<thead>
<tr>
<th>#</th>
<th>نام</th>
<th>وضعیت</th>
<th>تاریخ</th>
<th>قیمت</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>تی شرت رنگی مردانه</td>
<td><span class="badge badge-primary light">فروش</span>
</td>
<td>ژانویه 22</td>
<td class="color-primary">$21.56</td>
</tr>
<tr>
<th>2</th>
<td>پیراهن چای رنگی زنانه</td>
<td><span class="badge badge-success">مالیات</span>
</td>
<td>ژانویه 30</td>
<td class="color-success">$55.32</td>
</tr>
<tr>
<th>3</th>
<td>کوله پشتی آبی برای کودک</td>
<td><span class="badge badge-danger">تمدید شد</span>
</td>
<td>ژانویه 25</td>
<td class="text-danger">$14.85</td>
</tr>
</tbody>
</table>
</div>
میز راه راه
اضافه کردن کلاس table striped با bootstrap-table
| # | نام | وضعیت | تاریخ | قیمت |
|---|---|---|---|---|
| 1 | تی شرت رنگی مردانه | فروش | ژانویه 22 | $21.56 |
| 2 | پیراهن چای رنگی زنانه | مالیات | ژانویه 30 | $55.32 |
| 3 | کوله پشتی آبی برای کودک | تمدید شد | ژانویه 25 | $14.85 |
<div class="table-responsive">
<table class="table table-striped table-responsive-sm">
<thead>
<tr>
<th>#</th>
<th>نام</th>
<th>وضعیت</th>
<th>تاریخ</th>
<th>قیمت</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>تی شرت رنگی مردانه</td>
<td><span class="badge badge-primary">فروش</span>
</td>
<td>ژانویه 22</td>
<td class="color-primary">$21.56</td>
</tr>
<tr>
<th>2</th>
<td>پیراهن چای رنگی زنانه</td>
<td><span class="badge badge-success light">مالیات</span>
</td>
<td>ژانویه 30</td>
<td class="color-success">$55.32</td>
</tr>
<tr>
<th>3</th>
<td>کوله پشتی آبی برای کودک</td>
<td><span class="badge badge-danger">تمدید شد</span>
</td>
<td>ژانویه 25</td>
<td class="text-danger">$14.85</td>
</tr>
</tbody>
</table>
</div>
جدول حاشیه
اضافه کردن کلاس table border با bootstrap-table
| # | نام | وضعیت | تاریخ | قیمت |
|---|---|---|---|---|
| 1 | تی شرت رنگی مردانه | فروش | ژانویه 22 | $21.56 |
| 2 | پیراهن چای رنگی زنانه | مالیات | ژانویه 30 | $55.32 |
| 3 | کوله پشتی آبی برای کودک | تمدید شد | ژانویه 25 | $14.85 |
<div class="table-responsive">
<table class="table table-bordered table-responsive-sm">
<thead>
<tr>
<th>#</th>
<th>نام</th>
<th>وضعیت</th>
<th>تاریخ</th>
<th>قیمت</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>تی شرت رنگی مردانه</td>
<td><span class="badge badge-primary">فروش</span>
</td>
<td>ژانویه 22</td>
<td class="color-primary">$21.56</td>
</tr>
<tr>
<th>2</th>
<td>پیراهن چای رنگی زنانه</td>
<td><span class="badge badge-success">مالیات</span>
</td>
<td>ژانویه 30</td>
<td class="color-success">$55.32</td>
</tr>
<tr>
<th>3</th>
<td>کوله پشتی آبی برای کودک</td>
<td><span class="badge badge-danger">تمدید شد</span>
</td>
<td>ژانویه 25</td>
<td class="text-danger">$14.85</td>
</tr>
</tbody>
</table>
</div>
جدول شناور
اضافه کردن table hover css با bootstrap-table
| # | نام | وضعیت | تاریخ | قیمت |
|---|---|---|---|---|
| 1 | تی شرت رنگی مردانه | فروش | ژانویه 22 | $21.56 |
| 2 | پیراهن چای رنگی زنانه | مالیات | ژانویه 30 | $55.32 |
| 3 | کوله پشتی آبی برای کودک | تمدید شد | ژانویه 25 | $14.85 |
<div class="table-responsive">
<table class="table table-hover table-responsive-sm">
<thead>
<tr>
<th>#</th>
<th>نام</th>
<th>وضعیت</th>
<th>تاریخ</th>
<th>قیمت</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>تی شرت رنگی مردانه</td>
<td><span class="badge badge-primary light">فروش</span>
</td>
<td>ژانویه 22</td>
<td class="color-primary">$21.56</td>
</tr>
<tr>
<th>2</th>
<td>پیراهن چای رنگی زنانه</td>
<td><span class="badge badge-success">مالیات</span>
</td>
<td>ژانویه 30</td>
<td class="color-success">$55.32</td>
</tr>
<tr>
<th>3</th>
<td>کوله پشتی آبی برای کودک</td>
<td><span class="badge badge-danger light">تمدید شد</span>
</td>
<td>ژانویه 25</td>
<td class="text-danger">$14.85</td>
</tr>
</tbody>
</table>
</div>
جدول شناور
با bootstrap-table کلاس hover table اضافه کنید
| # | محصول | محبوبیت | فروش |
|---|---|---|---|
| 1 | کولر گازی |
|
70% |
| 2 | منسوجات |
|
70% |
| 3 | پودر شیر |
|
70% |
| 4 | وسایل نقلیه |
|
70% |
| 5 | قایق ها |
|
70% |
<div class="table-responsive">
<table class="table header-border table-hover verticle-middle">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">محصول</th>
<th scope="col">محبوبیت</th>
<th scope="col">فروش</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>کولر گازی</td>
<td>
<div class="progress" style="background: rgba(127, 99, 244, .1)">
<div class="progress-bar" style="width: 70%;" role="progressbar"><span class="sr-only">70% کامل</span>
</div>
</div>
</td>
<td><span class="badge badge-primary light">70%</span>
</td>
</tr>
<tr>
<th>2</th>
<td>منسوجات</td>
<td>
<div class="progress" style="background: rgba(76, 175, 80, .1)">
<div class="progress-bar bg-success" style="width: 70%;" role="progressbar"><span class="sr-only">70% کامل</span>
</div>
</div>
</td>
<td><span class="badge badge-success">70%</span>
</td>
</tr>
<tr>
<th>3</th>
<td>پودر شیر</td>
<td>
<div class="progress" style="background: rgba(70, 74, 83, .1)">
<div class="progress-bar bg-dark" style="width: 70%;" role="progressbar"><span class="sr-only">70% کامل</span>
</div>
</div>
</td>
<td><span class="badge badge-dark light">70%</span>
</td>
</tr>
<tr>
<th>4</th>
<td>وسایل نقلیه</td>
<td>
<div class="progress" style="background: rgba(255, 87, 34, .1)">
<div class="progress-bar bg-danger" style="width: 70%;" role="progressbar"><span class="sr-only">70% کامل</span>
</div>
</div>
</td>
<td><span class="badge badge-danger">70%</span>
</td>
</tr>
<tr>
<th>5</th>
<td>قایق</td>
<td>
<div class="progress" style="background: rgba(255, 193, 7, .1)">
<div class="progress-bar bg-warning" style="width: 70%;" role="progressbar"><span class="sr-only">70% کامل</span>
</div>
</div>
</td>
<td><span class="badge badge-warning">70%</span>
</td>
</tr>
</tbody>
</table>
</div>
جدول حاشیه
اضافه کردن کلاس table border با bootstrap-table
| # | نام | وضعیت | تاریخ | قیمت |
|---|---|---|---|---|
| 1 | تی شرت رنگی مردانه | فروش | ژانویه 22 | $21.56 |
| 2 | پیراهن چای رنگی زنانه | مالیات | ژانویه 30 | $55.32 |
| 3 | کوله پشتی آبی برای کودک | تمدید شد | ژانویه 25 | $14.85 |
<div class="table-responsive">
<table class="table table-bordered table-responsive-sm">
<thead>
<tr>
<th>#</th>
<th>نام</th>
<th>وضعیت</th>
<th>تاریخ</th>
<th>قیمت</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>تی شرت رنگی مردانه</td>
<td><span class="badge badge-primary">فروش</span>
</td>
<td>ژانویه 22</td>
<td class="color-primary">$21.56</td>
</tr>
<tr>
<th>2</th>
<td>پیراهن چای رنگی زنانه</td>
<td><span class="badge badge-success">مالیات</span>
</td>
<td>ژانویه 30</td>
<td class="color-success">$55.32</td>
</tr>
<tr>
<th>3</th>
<td>کوله پشتی آبی برای کودک</td>
<td><span class="badge badge-danger">تمدید شد</span>
</td>
<td>ژانویه 25</td>
<td class="text-danger">$14.85</td>
</tr>
</tbody>
</table>
</div>
میز حاشیه دار
اضافه کردن کلاس bordered table با bootstrap-table
<div class="table-responsive">
<table class="table table-bordered verticle-middle table-responsive-sm">
<thead>
<tr>
<th scope="col">وظیفه</th>
<th scope="col">پیشرفت</th>
<th scope="col">مهلت</th>
<th scope="col">یرچسب</th>
<th scope="col">اقدام</th>
</tr>
</thead>
<tbody>
<tr>
<td>کولر گازی</td>
<td>
<div class="progress" style="background: rgba(127, 99, 244, .1)">
<div class="progress-bar bg-primary" style="width: 70%;" role="progressbar"><span class="sr-only">70% کامل</span>
</div>
</div>
</td>
<td>آوریل 20,2018</td>
<td><span class="badge badge-primary light">70%</span>
</td>
<td>
<span>
<a href="javascript:void(0);" class="me-4" data-bs-toggle="tooltip"
data-placement="top" title="Edit"><i
class="fa fa-pencil color-muted"></i> </a>
<a href="javascript:void(0);" data-bs-toggle="tooltip"
data-placement="top" title="btn-close"><i
class="fa-solid fa-xmark text-danger"></i></a>
</span>
</td>
</tr>
<tr>
<td>منسوجات</td>
<td>
<div class="progress" style="background: rgba(76, 175, 80, .1)">
<div class="progress-bar bg-success" style="width: 70%;" role="progressbar"><span class="sr-only">70% کامل</span>
</div>
</div>
</td>
<td>می 27,2018</td>
<td><span class="badge badge-success">70%</span>
</td>
<td><span><a href="javascript:void(0);" class="me-4" data-bs-toggle="tooltip"
data-placement="top" title="Edit"><i
class="fa fa-pencil color-muted"></i> </a><a
href="javascript:void(0);" data-bs-toggle="tooltip"
data-placement="top" title="btn-close"><i
class="fa-solid fa-xmark text-danger"></i></a></span>
</td>
</tr>
<tr>
<td>پودر شیر</td>
<td>
<div class="progress" style="background: rgba(70, 74, 83, .1)">
<div class="progress-bar bg-dark" style="width: 70%;" role="progressbar"><span class="sr-only">70% کامل</span>
</div>
</div>
</td>
<td>می 18,2018</td>
<td><span class="badge badge-dark light">70%</span>
</td>
<td><span><a href="javascript:void(0);" class="me-4" data-bs-toggle="tooltip"
data-placement="top" title="Edit"><i
class="fa fa-pencil color-muted"></i> </a><a
href="javascript:void(0);" data-bs-toggle="tooltip"
data-placement="top" title="btn-close"><i
class="fa-solid fa-xmark text-danger"></i></a></span>
</td>
</tr>
<tr>
<td>وسایل نقلیه</td>
<td>
<div class="progress" style="background: rgba(255, 87, 34, .1)">
<div class="progress-bar bg-danger" style="width: 70%;" role="progressbar"><span class="sr-only">70% کامل</span>
</div>
</div>
</td>
<td>Mar 27,2018</td>
<td><span class="badge badge-danger">70%</span>
</td>
<td><span><a href="javascript:void(0);" class="me-4" data-bs-toggle="tooltip"
data-placement="top" title="Edit"><i
class="fa fa-pencil color-muted"></i> </a><a
href="javascript:void(0);" data-bs-toggle="tooltip"
data-placement="top" title="btn-close"><i
class="fa-solid fa-xmark text-danger"></i></a></span>
</td>
</tr>
<tr>
<td>قایق</td>
<td>
<div class="progress" style="background: rgba(255, 193, 7, .1)">
<div class="progress-bar bg-warning" style="width: 70%;" role="progressbar"><span class="sr-only">70% کامل</span>
</div>
</div>
</td>
<td>ژانویه 28,2018</td>
<td><span class="badge badge-warning">70%</span>
</td>
<td><span><a href="javascript:void(0);" class="me-4" data-bs-toggle="tooltip"
data-placement="top" title="Edit"><i
class="fa fa-pencil color-muted"></i> </a><a
href="javascript:void(0);" data-bs-toggle="tooltip"
data-placement="top" title="btn-close"><i
class="fa-solid fa-xmark text-danger"></i></a></span>
</td>
</tr>
</tbody>
</table>
</div>
میز خالی شده
اضافه کردن کلاس table stripeed با bootstrap-table
<div class="table-responsive">
<table class="table table-bordered table-striped verticle-middle table-responsive-sm">
<thead>
<tr>
<th scope="col">وظیفه</th>
<th scope="col">پیشرفت</th>
<th scope="col">مهلت</th>
<th scope="col">برچسب</th>
<th scope="col">اقدام</th>
</tr>
</thead>
<tbody>
<tr>
<td>کولر گازی</td>
<td>
<div class="progress" style="background: rgba(127, 99, 244, .1)">
<div class="progress-bar bg-primary" style="width: 70%;" role="progressbar"><span class="sr-only">70% کامل</span>
</div>
</div>
</td>
<td>آوریل 20,2018</td>
<td><span class="badge badge-primary">70%</span>
</td>
<td><span><a href="javascript:void(0);" class="me-4" data-bs-toggle="tooltip"
data-placement="top" title="Edit"><i
class="fa fa-pencil color-muted"></i> </a><a
href="javascript:void(0);" data-bs-toggle="tooltip"
data-placement="top" title="btn-close"><i
class="fa-solid fa-xmark text-danger"></i></a></span>
</td>
</tr>
<tr>
<td>منسوجات</td>
<td>
<div class="progress" style="background: rgba(76, 175, 80, .1)">
<div class="progress-bar bg-success" style="width: 70%;" role="progressbar"><span class="sr-only">70% کامل</span>
</div>
</div>
</td>
<td>می 27,2018</td>
<td><span class="badge badge-success">70%</span>
</td>
<td><span><a href="javascript:void(0);" class="me-4" data-bs-toggle="tooltip"
data-placement="top" title="Edit"><i
class="fa fa-pencil color-muted"></i> </a><a
href="javascript:void(0);" data-bs-toggle="tooltip"
data-placement="top" title="btn-close"><i
class="fa-solid fa-xmark text-danger"></i></a></span>
</td>
</tr>
<tr>
<td>پودر شیر</td>
<td>
<div class="progress" style="background: rgba(70, 74, 83, .1)">
<div class="progress-bar bg-dark" style="width: 70%;" role="progressbar"><span class="sr-only">70% کامل</span>
</div>
</div>
</td>
<td>می 18,2018</td>
<td><span class="badge badge-dark">70%</span>
</td>
<td><span><a href="javascript:void(0);" class="me-4" data-bs-toggle="tooltip"
data-placement="top" title="Edit"><i
class="fa fa-pencil color-muted"></i> </a><a
href="javascript:void(0);" data-bs-toggle="tooltip"
data-placement="top" title="btn-close"><i
class="fa-solid fa-xmark text-danger"></i></a></span>
</td>
</tr>
<tr>
<td>قایق</td>
<td>
<div class="progress" style="background: rgba(255, 193, 7, .1)">
<div class="progress-bar bg-warning" style="width: 70%;" role="progressbar"><span class="sr-only">70% کامل</span>
</div>
</div>
</td>
<td>ژانویه 28,2018</td>
<td><span class="badge badge-warning">70%</span>
</td>
<td><span><a href="javascript:void(0);" class="me-4" data-bs-toggle="tooltip"
data-placement="top" title="Edit"><i
class="fa fa-pencil color-muted"></i> </a><a
href="javascript:void(0);" data-bs-toggle="tooltip"
data-placement="top" title="btn-close"><i
class="fa-solid fa-xmark text-danger"></i></a></span>
</td>
</tr>
</tbody>
</table>
</div>
جدول پاسخگو
کلاس responsive table را با bootstrap-table اضافه کنید
| فاکتور | کاربر | تاریخ | مقدار | وضعیت | کشور |
|---|---|---|---|---|---|
| سفارش #26589 | هرمان بک | اکتبر 16, 2017 | $45.00 | پرداخت شده است | انگلستان |
| سفارش #58746 | مری آدامز | اکتبر 12, 2017 | $245.30 | ارسال شد | کانادا |
| سفارش #98458 | کالب ریچاردز | می 18, 2017 | $38.00 | ارسال شد | استرالیا |
| سفارش #32658 | جون لین | آوریل 28, 2017 | $77.99 | پرداخت شده است | فرانسه |
<div class="table-responsive">
<table class="table header-border table-responsive-sm">
<thead>
<tr>
<th>فاکتور</th>
<th>کاربر</th>
<th>تاریخ</th>
<th>مقدار</th>
<th>وضعیت</th>
<th>کشور</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="javascript:void();">سفارش #26589</a>
</td>
<td>هرمان بک</td>
<td><span class="text-muted">اکتبر 16, 2017</span>
</td>
<td>$45.00</td>
<td><span class="badge badge-success">پرداخت شده است</span>
</td>
<td>EN</td>
</tr>
<tr>
<td><a href="javascript:void();">سفارش #58746</a>
</td>
<td>مری آدامز</td>
<td><span class="text-muted">اکتبر 12, 2017</span>
</td>
<td>$245.30</td>
<td><span class="badge badge-info light">ارسال شد</span>
</td>
<td>CN</td>
</tr>
<tr>
<td><a href="javascript:void();">سفارش #98458</a>
</td>
<td>کالب ریچاردز</td>
<td><span class="text-muted">می 18, 2017</span>
</td>
<td>$38.00</td>
<td><span class="badge badge-danger">ارسال شد</span>
</td>
<td>AU</td>
</tr>
<tr>
<td><a href="javascript:void();">سفارش #32658</a>
</td>
<td>ژانویهe Lane</td>
<td><span class="text-muted">آوریل 28, 2017</span>
</td>
<td>$77.99</td>
<td><span class="badge badge-success">پرداخت شده است</span>
</td>
<td>FR</td>
</tr>
</tbody>
</table>
</div>
عنوان با پس زمینه
با bootstrap-table کلاس heading with background و heading را اضافه کنید
| # | اول | آخر | دسته |
|---|---|---|---|
| 1 | مارک | اتو | @mdo |
| 2 | یعقوب | تورنتون | @fat |
| 3 | لری | پرنده |
<div class="table-responsive">
<table class="table">
<thead class="thead-info">
<tr>
<th scope="col">#</th>
<th scope="col">اول</th>
<th scope="col">آخر</th>
<th scope="col">دسته</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>مارک</td>
<td>اتو</td>
<td>@mdo</td>
</tr>
<tr>
<th>2</th>
<td>یعقوب</td>
<td>تورنتون</td>
<td>@fat</td>
</tr>
<tr>
<th>3</th>
<td>لری</td>
<td>پرنده</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
جدول اولیه
اضافه کردن کلاس primary table با bootstrap-table
| # | اول | آخر | دسته |
|---|---|---|---|
| 1 | مارک | اتو | @mdo |
| 2 | یعقوب | تورنتون | @fat |
| 3 | لری | پرنده |
<div class="table-responsive">
<table class="table primary-table-bordered">
<thead class="thead-primary">
<tr>
<th scope="col">#</th>
<th scope="col">اول</th>
<th scope="col">آخر</th>
<th scope="col">دسته</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>مارک</td>
<td>اتو</td>
<td>@mdo</td>
</tr>
<tr>
<th>2</th>
<td>یعقوب</td>
<td>تورنتون</td>
<td>@fat</td>
</tr>
<tr>
<th>3</th>
<td>لری</td>
<td>پرنده</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>شناور جدول اولیه
با bootstrap-table primary table hover css اضافه کنید
| # | اول | آخر | دسته |
|---|---|---|---|
| 1 | مارک | اتو | @mdo |
| 2 | یعقوب | تورنتون | @fat |
| 3 | لری | پرنده | |
| 4 | لری | پرنده | |
| 5 | لری | پرنده | |
| 6 | لری | پرنده |
<div class="table-responsive">
<table class="table primary-table-bg-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">اول</th>
<th scope="col">آخر</th>
<th scope="col">دسته</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>مارک</td>
<td>اتو</td>
<td>@mdo</td>
</tr>
<tr>
<th>2</th>
<td>یعقوب</td>
<td>تورنتون</td>
<td>@fat</td>
</tr>
<tr>
<th>3</th>
<td>لری</td>
<td>پرنده</td>
<td>@twitter</td>
</tr>
<tr>
<th>4</th>
<td>لری</td>
<td>پرنده</td>
<td>@twitter</td>
</tr>
<tr>
<th>5</th>
<td>لری</td>
<td>پرنده</td>
<td>@twitter</td>
</tr>
<tr>
<th>5</th>
<td>لری</td>
<td>پرنده</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
جدول متنی
اضافه کردن کلاس contextual table با bootstrap-table
| # | عنوان ستون | عنوان ستون | عنوان ستون |
|---|---|---|---|
| 1 | محتوای ستون | محتوای ستون | محتوای ستون |
| 1 | محتوای ستون | محتوای ستون | محتوای ستون |
| 2 | محتوای ستون | محتوای ستون | محتوای ستون |
| 3 | محتوای ستون | محتوای ستون | محتوای ستون |
| 4 | محتوای ستون | محتوای ستون | محتوای ستون |
| 5 | محتوای ستون | محتوای ستون | محتوای ستون |
<div class="table-responsive">
<table class="table header-border" style="min-width: 500px;">
<thead>
<tr>
<th>#</th>
<th>عنوان ستون</th>
<th>عنوان ستون</th>
<th>عنوان ستون</th>
</tr>
</thead>
<tbody>
<tr class="table-active">
<td>1</td>
<td>محتوای ستون</td>
<td>محتوای ستون</td>
<td>محتوای ستون</td>
</tr>
<tr class="table-primary">
<td>1</td>
<td>محتوای ستون</td>
<td>محتوای ستون</td>
<td>محتوای ستون</td>
</tr>
<tr class="table-success">
<td>2</td>
<td>محتوای ستون</td>
<td>محتوای ستون</td>
<td>محتوای ستون</td>
</tr>
<tr class="table-info">
<td>3</td>
<td>محتوای ستون</td>
<td>محتوای ستون</td>
<td>محتوای ستون</td>
</tr>
<tr class="table-warning">
<td>4</td>
<td>محتوای ستون</td>
<td>محتوای ستون</td>
<td>محتوای ستون</td>
</tr>
<tr class="table-danger">
<td>5</td>
<td>محتوای ستون</td>
<td>محتوای ستون</td>
<td>محتوای ستون</td>
</tr>
</tbody>
</table>
</div>