سلام با آموزش BootStrap 4 قسمت چهارم در خدمت شما هستیم .در قسمت قبل با آموزش رنگ در بوت استرپ آشنا شدیم.

آموزش کار با جدول (Table) در Bootstrap4:

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

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

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

1<div class="container">

1<h2>Basic Table</h2>

1

1<p>The .table class adds basic styling (light padding and horizontal dividers) to a table:</p>

1

1<table class="table">

1 <thead>

1 <tr>

1 <th>Firstname</th>

1 <th>Lastname</th>

1 <th>Email</th>

1 </tr>

1 </thead>

1 <tbody>

1 <tr>

1 <td>John</td>

1 <td>Doe</td>

1 <td>john@example.com</td>

1 </tr>

1 <tr>

1 <td>Mary</td>

1 <td>Moe</td>

1 <td>mary@example.com</td>

1 </tr>

1 <tr>

1 <td>July</td>

1 <td>Dooley</td>

1 <td>july@example.com</td>

1 </tr>

1 </tbody>

1</table>

12</div> 

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

دوره آموزش BootStrap 4

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

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

1<div class="container">

1<h2>Striped Rows</h2>

1

1<p>The .table-striped class adds zebra-stripes to a table:</p>

1

1<table class="table table-striped">

1 <thead>

1 <tr>

1 <th>Firstname</th>

1 <th>Lastname</th>

1 <th>Email</th>

1 </tr>

1 </thead>

1 <tbody>

1 <tr>

1 <td>John</td>

1 <td>Doe</td>

1 <td>john@example.com</td>

1 </tr>

1 <tr>

1 <td>Mary</td>

1 <td>Moe</td>

1 <td>mary@example.com</td>

1 </tr>

1 <tr>

1 <td>July</td>

1 <td>Dooley</td>

1 <td>july@example.com</td>

1 </tr>

1 </tbody>

1</table>

1</div>

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

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

مثال جدول با خطوط حاشیه در بوت استرپ

1<div class="container">

1 <h2>Bordered Table</h2>

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

1 <table class="table table-bordered">

1 <thead>

1 <tr>

1 <th>Firstname</th>

1 <th>Lastname</th>

1 <th>Email</th>

1 </tr>

1 </thead>

1 <tbody>

1 <tr>

1 <td>John</td>

1 <td>Doe</td>

1 <td>john@example.com</td>

1 </tr>

1 <tr>

1 <td>Mary</td>

1 <td>Moe</td>

1 <td>mary@example.com</td>

1 </tr>

1 <tr>

1 <td>July</td>

1 <td>Dooley</td>

1 <td>july@example.com</td>

1 </tr>

1 </tbody>

1 </table>

1</div>

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

دوره آموزش BootStrap 4

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

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

1<div class="container">

1<h2>Hover Rows</h2>

1

1<p>The .table-hover class enables a hover state (grey background on mouse over) on table rows:</p>

1

1<table class="table table-hover">

1 <thead>

1 <tr>

1 <th>Firstname</th>

1 <th>Lastname</th>

1 <th>Email</th>

1 </tr>

1 </thead>

1 <tbody>

1 <tr>

1 <td>John</td>

1 <td>Doe</td>

1 <td>john@example.com</td>

1 </tr>

1 <tr>

1 <td>Mary</td>

1 <td>Moe</td>

1 <td>mary@example.com</td>

1 </tr>

1 <tr>

1 <td>July</td>

1 <td>Dooley</td>

1 <td>july@example.com</td>

1 </tr>

1 </tbody>

1</table>

1</div>

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

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

مثال جدول دو رنگ در بوت استرپ

1<div class="container">

1 <h2>Black/Dark Table</h2>

1 <p>The .table-dark class adds a black background to the table:</p> 

1 <table class="table table-dark">

1 <thead>

1 <tr>

1 <th>Firstname</th>

1 <th>Lastname</th>

1 <th>Email</th>

1 </tr>

1 </thead>

1 <tbody>

1 <tr>

1 <td>John</td>

1 <td>Doe</td>

1 <td>john@example.com</td>

1 </tr>

1 <tr>

1 <td>Mary</td>

1 <td>Moe</td>

1 <td>mary@example.com</td>

1 </tr>

1 <tr>

1 <td>July</td>

1 <td>Dooley</td>

1 <td>july@example.com</td>

1 </tr>

1 </tbody>

1 </table>

1</div>

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

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

مثال جدول تیره و راه راه در بوت استرپ

1<div class="container">

1<h2>Dark Striped Table</h2>

1

1<p>Combine .table-dark and .table-striped to create a dark, striped table:</p>

1

1<table class="table table-dark table-striped">

1 <thead>

1 <tr>

1 <th>Firstname</th>

1 <th>Lastname</th>

1 <th>Email</th>

1 </tr>

1 </thead>

1 <tbody>

1 <tr>

1 <td>John</td>

1 <td>Doe</td>

1 <td>john@example.com</td>

1 </tr>

1 <tr>

1 <td>Mary</td>

1 <td>Moe</td>

1 <td>mary@example.com</td>

1 </tr>

1 <tr>

1 <td>July</td>

1 <td>Dooley</td>

1 <td>july@example.com</td>

1 </tr>

1 </tbody>

1</table>

1</div>

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

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

مثال جدول تیره hover در bootstrap

1<p><div class="container"><br>

1 <h2>Hoverable Dark Table</h2><br>

1 <p>The .table-hover class adds a hover effect (grey background color) on table rows:</p> <br>

1 <table class="table table-dark table-hover"><br>

1 <thead><br>

1 <tr><br>

1 <th>Firstname</th><br>

1 <th>Lastname</th><br>

1 <th>Email</th><br>

1 </tr><br>

1 </thead><br>

1 <tbody><br>

1 <tr><br>

1 <td>John</td><br>

1 <td>Doe</td><br>

1 <td>john@example.com</td><br>

1 </tr><br>

1 <tr><br>

1 <td>Mary</td><br>

1 <td>Moe</td><br>

1 <td>mary@example.com</td><br>

1 </tr><br>

1 <tr><br>

1 <td>July</td><br>

1 <td>Dooley</td><br>

1 <td>july@example.com</td><br>

1 </tr><br>

1 </tbody><br>

1 </table><br>

1</div></p>

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

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

مثال جدول بدون خطوط حاشیه در بوت استرپ

1<div class="container">

1 <h2>Borderless Table</h2>

1 <p>The .table-borderless class removes borders from the table:</p> 

1 <table class="table table-borderless">

1 <thead>

1 <tr>

1 <th>Firstname</th>

1 <th>Lastname</th>

1 <th>Email</th>

1 </tr>

1 </thead>

1 <tbody>

1 <tr>

1 <td>John</td>

1 <td>Doe</td>

1 <td>john@example.com</td>

1 </tr>

1 <tr>

1 <td>Mary</td>

1 <td>Moe</td>

1 <td>mary@example.com</td>

1 </tr>

1 <tr>

1 <td>July</td>

1 <td>Dooley</td>

1 <td>july@example.com</td>

1 </tr>

1 </tbody>

1 </table>

1</div>

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