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

آموزش کار با جدولسلام با آموزش BootStrap 4 قسمت چهارم در خدمت شما هستیم .در قسمت قبل با آموزش رنگ در بوت استرپ آشنا شدیم.آموزش کار با جدول (Table) در Bootstrap4:آموزش ساخت جدول ساده در Bootstrap4:یک جدول ساده در Bootstrap 4 دارای حاشیه درونی کم و جداکننده های افقی است. کلاس .table، استایل ساده ای همانند خروجی زیر را به جدول ها می دهد :مثال آموزش ساخت جدول ساده:<div class=&quotcontainer&quot><h2>Basic Table</h2> <p>The .table class adds basic styling (light padding and horizontal dividers) to a table:</p> <table class=&quottable&quot> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody></table></div> آموزش ساخت ردیف های راه راه در جدول Bootstrap 4 :دوره آموزش BootStrap 4 https://www.aparat.com/v/FI4VE با اضافه کردن کلاس .table-striped به جدول در Bootstrap 4 ، ردیف های جدول به صورت یک در میان رنگی و سفید (راه راه) می شود. در کد مثال عملی زیر، نحوه استفاده از کلاس .table-striped به صورت عملی نشان داده شده است :مثال جدول Striped در بوت استرپ<div class=&quotcontainer&quot><h2>Striped Rows</h2> <p>The .table-striped class adds zebra-stripes to a table:</p> <table class=&quottable table-striped&quot> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody></table></div>آموزش ساخت جدول با خطوط حاشیه در Bootstrap 4 :با اضافه کردن کلاس .table-bordered به جدول، خطوط حاشیه به دور کل جدول اضافه می شود. در مثال زیر، نحوه استفاده از این کلاس در عمل نشان داده شده است:مثال جدول با خطوط حاشیه در بوت استرپ<div class=&quotcontainer&quot> <h2>Bordered Table</h2> <p>The .table-bordered class adds borders on all sides of the table and the cells:</p> <table class=&quottable table-bordered&quot> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table></div>آموزش ساخت ردیف های hover در جدول:دوره آموزش BootStrap 4در صورت استفاده از کلاس .table-hover در یک جدول Bootstrap 4 ، در صورت عبور موس (hover) از روی هر ردیف جدول، رنگ پس زمینه آن به خاکستری تغییر می کند، هماننند کد مثال عملی زیر :مثال جدول hover در بوت استرپ<div class=&quotcontainer&quot><h2>Hover Rows</h2> <p>The .table-hover class enables a hover state (grey background on mouse over) on table rows:</p> <table class=&quottable table-hover&quot> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody></table></div>آموزش ساخت جدول سیاه و تیره در Bootstrap 4 :با اضافه کردن کلاس .table-dark به جدول در Bootstrap 4، جدول با پس زمینه تیره، نوشته سفید و خطوط حاشیه روشن به صورت زیر نمایش داده خواهد شد :مثال جدول دو رنگ در بوت استرپ<div class=&quotcontainer&quot> <h2>Black/Dark Table</h2> <p>The .table-dark class adds a black background to the table:</p> <table class=&quottable table-dark&quot> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table></div>آموزش ساخت جدول تیره و راه راه در Bootstrap 4:در صورت استفاده همزمان از کلاس های .table-darkو .table-striped، جدول با پس زمینه تیره، نوشته سفید و ردیف های یک در میان روشن تر و تیره تر، به صورت راه راه همانند کد زیر، نشان داده می شود :مثال جدول تیره و راه راه در بوت استرپ<div class=&quotcontainer&quot><h2>Dark Striped Table</h2> <p>Combine .table-dark and .table-striped to create a dark, striped table:</p> <table class=&quottable table-dark table-striped&quot> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody></table></div>آموزش ساخت جدول تیره با قابلیت hover:در صورت استفاده همزمان از کلاس های .table-hover و .table-dark جدول به صورت تیره نشان داده شده ولی در هنگام عبور موس از روی هر ردیف، رنگ ردیف کلی روشن تر می شود. همانند کد مثال عملی زیر:مثال جدول تیره hover در bootstrap<p><div class=&quotcontainer&quot><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=&quottable table-dark table-hover&quot><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>john@example.com</td><br> </tr><br> <tr><br> <td>Mary</td><br> <td>Moe</td><br> <td>mary@example.com</td><br> </tr><br> <tr><br> <td>July</td><br> <td>Dooley</td><br> <td>july@example.com</td><br> </tr><br> </tbody><br> </table><br></div></p>آموزش ساخت جدول بدون خطوط در Bootstrap 4 :اضافه کردن کلاس .table-bordeless، باعث از بین رفتن خطوط درونی و خطوط حاشیه در جدول شده و به صورت ساده نشان داده خواهد شد. همانند کد مثال عملی زیر:مثال جدول بدون خطوط حاشیه در بوت استرپ<div class=&quotcontainer&quot> <h2>Borderless Table</h2> <p>The .table-borderless class removes borders from the table:</p> <table class=&quottable table-borderless&quot> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table></div>آموزش بوت استرپ ادامه دارد