جدولها
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
<th class="text-right" scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td class="text-right">
<div class="dropdown">
<a href="#" class="btn btn-sm"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
<td class="text-right">
<div class="dropdown">
<a href="#" class="btn btn-sm"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
<td class="text-right">
<div class="dropdown">
<a href="#" class="btn btn-sm"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
# | آواتار | نام | نام خانوادگی | دسته |
---|---|---|---|---|
1 | مارک | زاکربرگ | @mdo | |
2 | بیل | گیتس | @fat | |
3 | پاول | دوروف | ||
2 | بیل | گیتس | @fat |
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Avatar</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<th>
<figure class="avatar avatar-sm">
<img src="assets/media/image/user/women_avatar5.jpg" class="rounded-circle" alt="image">
</figure>
</th>
<td>Jessie</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<th>
<figure class="avatar avatar-sm">
<a href="#">
<span class="avatar-title bg-info rounded-circle">J</span>
</a>
</figure>
</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<th>
<figure class="avatar avatar-sm">
<img src="assets/media/image/user/man_avatar5.jpg" class="rounded-circle" alt="image">
</figure>
</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">2</th>
<th>
<figure class="avatar avatar-sm">
<a href="#">
<span class="avatar-title bg-warning rounded-circle">M</span>
</a>
</figure>
</th>
<td>Mark</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
</tbody>
</table>
</div>
# | آواتار | نام | نام خانوادگی | وضعیت |
---|---|---|---|---|
1 | مارک | زاکربرگ | فعال | |
2 | لورم | گیتس | غیرفعال | |
3 | پاول | دوروف | در انتظار |
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Avatar</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<th>
<figure class="avatar avatar-sm">
<img src="assets/media/image/user/women_avatar5.jpg" class="rounded-circle" alt="image">
</figure>
</th>
<td>Jessie</td>
<td>Otto</td>
<td>
<span class="badge badge-success">Active</span>
</td>
</tr>
<tr>
<th scope="row">2</th>
<th>
<figure class="avatar avatar-sm">
<a href="#">
<span class="avatar-title bg-primary rounded-circle">M</span>
</a>
</figure>
</th>
<td>Morn</td>
<td>Thornton</td>
<td>
<span class="badge badge-danger">Passive</span>
</td>
</tr>
<tr>
<th scope="row">3</th>
<th>
<figure class="avatar avatar-sm">
<img src="assets/media/image/user/man_avatar5.jpg" class="rounded-circle" alt="image">
</figure>
</th>
<td>Larry</td>
<td>the Bird</td>
<td>
<span class="badge badge-warning">Pending</span>
</td>
</tr>
</tbody>
</table>
</div>
سطر های راه راه
# | نام | نام خانوادگی | دسته |
---|---|---|---|
1 | بیل | زاکربرگ | @mdo |
2 | بیل | گیتس | @fat |
3 | پاول | دوروف |
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
جدول دور خط دار
# | نام | نام خانوادگی | دسته |
---|---|---|---|
1 | بیل | زاکربرگ | @mdo |
2 | بیل | گیتس | @fat |
3 | پاول دوروف |
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
جدول بدون دور خط
# | نام | نام خانوادگی | دسته |
---|---|---|---|
1 | بیل | زاکربرگ | @mdo |
2 | بیل | گیتس | @fat |
3 | پاول دوروف |
<div class="table-responsive">
<table class="table table-borderless">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
سطر های قابل Hover
# | نام | نام خانوادگی | دسته |
---|---|---|---|
1 | بیل | زاکربرگ | @mdo |
2 | بیل | گیتس | @fat |
3 | پاول دوروف |
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
جدول کوچک
# | نام | نام خانوادگی | دسته |
---|---|---|---|
1 | بیل | زاکربرگ | @mdo |
2 | بیل | گیتس | @fat |
3 | پاول دوروف |
<div class="table-responsive">
<table class="table table-small">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
جدول با سرتیتر سفارشی
# | نام | نام خانوادگی | دسته |
---|---|---|---|
1 | بیل | زاکربرگ | @mdo |
2 | بیل | گیتس | @fat |
3 | پاول | دوروف |
# | نام | نام خانوادگی | دسته |
---|---|---|---|
1 | بیل | زاکربرگ | @mdo |
2 | بیل | گیتس | @fat |
3 | پاول | دوروف |
<div class="table-responsive">
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive">
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
کلاس های کاربردی
کلاس | سرتیتر | سرتیتر |
---|---|---|
فعال | خانه | خانه |
پیش فرض | خانه | خانه |
اولیه | خانه | خانه |
ثانویه | خانه | خانه |
موفقیت | خانه | خانه |
اخطار | خانه | خانه |
هشدار | خانه | خانه |
اطلاعات | خانه | خانه |
روشن | خانه | خانه |
تیره | خانه | خانه |
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">Class</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
</tr>
</thead>
<tbody>
<tr class="table-active">
<th scope="row">Active</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">Default</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-primary">
<th scope="row">Primary</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-secondary">
<th scope="row">Secondary</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-success">
<th scope="row">Success</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-danger">
<th scope="row">Danger</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-warning">
<th scope="row">Warning</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-info">
<th scope="row">Info</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-light">
<th scope="row">Light</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-dark">
<th scope="row">Dark</th>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
</div>
کلاس های کاربردی
# | سرتیتر | سرتیتر |
---|---|---|
1 | خانه | خانه |
2 | خانه | خانه |
3 | خانه | خانه |
4 | خانه | خانه |
5 | خانه | خانه |
6 | خانه | خانه |
7 | خانه | خانه |
8 | خانه | خانه |
9 | خانه | خانه |
<div class="table-responsive">
<table class="table table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
</tr>
</thead>
<tbody>
<tr>
<th class="bg-primary" scope="row">1</th>
<td class="bg-primary">Cell</td>
<td class="bg-primary">Cell</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th class="bg-success" scope="row">3</th>
<td class="bg-success">Cell</td>
<td class="bg-success">Cell</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th class="bg-info" scope="row">5</th>
<td class="bg-info">Cell</td>
<td class="bg-info">Cell</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th class="bg-warning" scope="row">7</th>
<td class="bg-warning">Cell</td>
<td class="bg-warning">Cell</td>
</tr>
<tr>
<th scope="row">8</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th class="bg-danger" scope="row">9</th>
<td class="bg-danger">Cell</td>
<td class="bg-danger">Cell</td>
</tr>
</tbody>
</table>
</div>
عناوین
# | نام | نام خانوادگی | دسته |
---|---|---|---|
1 | بیل | زاکربرگ | @mdo |
2 | بیل | گیتس | @fat |
3 | پاول | دوروف |
<div class="table-responsive">
<table class="table">
<caption>List of users</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>