آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش کار با جدول (Table) در Bootstrap 4

دوره های مرتبط با این مقاله

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

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

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

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

Basic Table

The .table class adds basic styling (light padding and horizontal dividers) to a table:

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com
امتحان کنید

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

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

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

Striped Rows

The .table-striped class adds zebra-stripes to a table:

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com
امتحان کنید

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

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

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

Bordered Table

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

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com
امتحان کنید

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

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

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

Hover Rows

The .table-hover class enables a hover state (grey background on mouse over) on table rows:

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com
امتحان کنید

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

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

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

Black/Dark Table

The .table-dark class adds a black background to the table:

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com
امتحان کنید

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

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

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

Dark Striped Table

Combine .table-dark and .table-striped to create a dark, striped table:

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com
امتحان کنید

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

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

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

<div class="container">
  <h2>Hoverable Dark Table</h2>
  <p>The .table-hover class adds a hover effect (grey background color) on table rows:</p>            
  <table class="table table-dark table-hover">
    <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-bordeless، باعث از بین رفتن خطوط درونی و خطوط حاشیه در جدول شده و به صورت ساده نشان داده خواهد شد. همانند کد مثال عملی زیر:

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

Borderless Table

The .table-borderless class removes borders from the table:

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com
امتحان کنید
  • 877
  •    436
  • تاریخ ارسال :   1398/07/08

دانلود PDF دانلود فیلم آموزشی دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
آموزش کار با جدول (Table) در Bootstrap 4
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .