آموزش 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

با اضافه کردن کلاس .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>

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