آموزش bootstrap 4 -آموزش کار با جدول

سلام با آموزش BootStrap 4 قسمت چهارم در خدمت شما هستیم .در قسمت قبل با آموزش رنگ در بوت استرپ آشنا شدیم.
آموزش کار با جدول (Table) در Bootstrap4:

آموزش ساخت جدول ساده در Bootstrap4:

یک جدول ساده در Bootstrap 4 دارای حاشیه درونی کم و جداکننده های افقی است. کلاس .table، استایل ساده ای همانند خروجی زیر را به جدول ها می دهد :

1مثال آموزش ساخت جدول ساده:

<div class="container">
<h2>Basic Table</h2>
<p>The .table class adds basic styling (light padding and horizontal dividers) to a table:</p>

<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>[e-mail]</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>[e-mail]</td>
</tr>
 <tr>
<td>July</td>
 <td>Dooley</td>
<td>[e-mail]</td>
</tr>
</tbody>
</table>
</div>

آموزش ساخت ردیف های راه راه در جدول Bootstrap 4 :

دوره آموزش BootStrap 4

با اضافه کردن کلاس .table-striped به جدول در Bootstrap 4 ، ردیف های جدول به صورت یک در میان رنگی و سفید (راه راه) می شود. در کد مثال عملی زیر، نحوه استفاده از کلاس .table-striped به صورت عملی نشان داده شده است :

1مثال جدول Striped در بوت استرپ

<div class="container">
<h2>Striped Rows</h2>
<p>The .table-striped class adds zebra-stripes to a table:</p>
<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>[e-mail]</td>
</tr>
<tr>
<td>Mary</td>
 <td>Moe</td>
<td>[e-mail]</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>[e-mail]</td>
</tr>
</tbody>
</table>
</div>

آموزش ساخت جدول با خطوط حاشیه در Bootstrap 4 :

با اضافه کردن کلاس .table-bordered به جدول، خطوط حاشیه به دور کل جدول اضافه می شود. در مثال زیر، نحوه استفاده از این کلاس در عمل نشان داده شده است:
مثال جدول با خطوط حاشیه در بوت استرپ

<div class="container">

<h2>Bordered Table</h2>

<p>The .table-bordered class adds borders on all sides of the table and the cells:</p>            

<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>[e-mail]</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>[e-mail]</td>
</tr>
 <tr>
 <td>July</td>
<td>Dooley</td>
<td>[e-mail]</td>
</tr>
</tbody>
</table>
</div>

آموزش ساخت ردیف های hover در جدول:

دوره آموزش BootStrap 4

در صورت استفاده از کلاس .table-hover در یک جدول Bootstrap 4 ، در صورت عبور موس (hover) از روی هر ردیف جدول، رنگ پس زمینه آن به خاکستری تغییر می کند، هماننند کد مثال عملی زیر :

1مثال جدول hover در بوت استرپ

<div class="container">
<h2>Hover Rows</h2>
<p>The .table-hover class enables a hover state (grey background on mouse over) on table rows:</p>
<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>[e-mail]</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>[e-mail]</td>
</tr>
<tr>
<td>July</td>
 <td>Dooley</td>
<td>[e-mail]</td>
</tr>
</tbody>
</table>
</div>

آموزش ساخت جدول سیاه و تیره در Bootstrap 4 :

با اضافه کردن کلاس .table-dark به جدول در Bootstrap 4، جدول با پس زمینه تیره، نوشته سفید و خطوط حاشیه روشن به صورت زیر نمایش داده خواهد شد :
مثال جدول دو رنگ در بوت استرپ

<div class="container">
<h2>Black/Dark Table</h2>
<p>The .table-dark class adds a black background to the table:</p>            
<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>[e-mail]</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>[e-mail]</td>
 </tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>[e-mail]</td>
</tr>
</tbody>
</table>
</div>

آموزش ساخت جدول تیره و راه راه در Bootstrap 4:

در صورت استفاده همزمان از کلاس های .table-darkو .table-striped، جدول با پس زمینه تیره، نوشته سفید و ردیف های یک در میان روشن تر و تیره تر، به صورت راه راه همانند کد زیر، نشان داده می شود :
مثال جدول تیره و راه راه در بوت استرپ

<div class="container">
<h2>Dark Striped Table</h2>
<p>Combine .table-dark and .table-striped to create a dark, striped table:</p>
<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>[e-mail]</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>[e-mail]</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>[e-mail]</td>
</tr>
</tbody>
</table>
</div>

آموزش ساخت جدول تیره با قابلیت hover:

در صورت استفاده همزمان از کلاس های .table-hover و .table-dark جدول به صورت تیره نشان داده شده ولی در هنگام عبور موس از روی هر ردیف، رنگ ردیف کلی روشن تر می شود. همانند کد مثال عملی زیر:
مثال جدول تیره hover در bootstrap

<p><div class="container"><br>
 <h2>Hoverable Dark Table</h2><br>
 <p>The .table-hover class adds a hover effect (grey background color) on table rows:</p>            <br>
<table class="table table-dark table-hover"><br>
<thead><br>
<tr><br>
<th>Firstname</th><br>
<th>Lastname</th><br>
<th>Email</th><br>
</tr><br>
</thead><br>
<tbody><br>
<tr><br>
<td>John</td><br>
<td>Doe</td><br>
<td>[e-mail]</td><br>
</tr><br>
<tr><br>
<td>Mary</td><br>
 <td>Moe</td><br>
<td>[e-mail]</td><br>
</tr><br>
<tr><br>
<td>July</td><br>
<td>Dooley</td><br>
 <td>[e-mail]</td><br>
</tr><br>
</tbody><br>
</table><br>
</div></p>

آموزش ساخت جدول بدون خطوط در Bootstrap 4 :

اضافه کردن کلاس .table-bordeless، باعث از بین رفتن خطوط درونی و خطوط حاشیه در جدول شده و به صورت ساده نشان داده خواهد شد. همانند کد مثال عملی زیر:
مثال جدول بدون خطوط حاشیه در بوت استرپ

<div class="container">
<h2>Borderless Table</h2>
<p>The .table-borderless class removes borders from the table:</p>            
<table class="table table-borderless">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>[e-mail]</td>
 </tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>[e-mail]</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>[e-mail]</td>
</tr>
</tbody>
</table>
</div>

آموزش بوت استرپ ادامه دارد