امتیاز دهید:
نحوه جدول بندی در بوت استرپ

جدول چیست ؟

جداول HTML جهت نمایش اطلاعات به حالت شبکه ای مانند سطر و ستون استفاده میشوند. با استفاده از بوت استرپ میتوان ظاهر جداول را به روشی ساده بهبود بخشید.

بوت استرپ کلاس هایی را برای جداول ایجاد کرده است :

 table : این کلاس جدول پایه بوت استرپ هست که دارای یک padding کم و خطوط افقی است. در زیر شکل این جدول را مشاهده میکنید

نحوه استفاده از این کلاس و جدول به شکل زیر است:

 <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>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>

table-striped : این کلاس ردیفهایی به صورت راه ره ایجاد میکند، یعنی ردیف های جدول به صورت یکی درمیان، رنگ های متفاوت است.

شکل زیر این جدول را به تصویر می کشد:

table-bordered : این کلاس جدولی ایجاد میکند که تمام سطرها و ستون هایش دارای border است.

تصویر زیرنمایانگر این جدول است:

table-hover : این کلاس جدولی ایجاد میکند که با رفتن روی ردیف های آن ، رنگ بک گراند عوض می شود، اصلاحاً ردیف های آن دارای hover است .

table-condensed : این کلاس جدولی فشرده تر که دارای padding های کمتری است ایجاد میکند.

 

کلاس های متنی:

این کلاس ها برای دادن رنگ به ردیف ها و ستون های یک جدول به شرح ذیل استفاده می شود:

active : دارای رنگ توسی و برای نمایش حالت فعال یک ردیف است.

success : دارای رنگ سبز و برای نمایش حالت موفقیت یا اقدام مثبت به کار می رود.

danger : دارای رنگ صورتی و برای نمایش حالت خطر، شکست یا اقدام منفی به کار می رود

warning : دارای رنگ زرد و برای نمایش حالت اخطار یک اقدام است.

info : دارای رنگ آبی و برای نمایش اطلاعاتی در مورد یک اکشن است.

 

نمونه ای از کلاس های بالا را در جدول زیر مشاهده میکنید:

table-responsive : این کلاس برای ایجاد حالت ریسپانسیو جدول برای نمایش در تبلت و موبایل و دیوایس های زیر 768px به کار می رود.


نظرات
نظرات

برای کامنت گذاری، فرم زیر را پر کنید یا ثبت نام کنید ( جهت ورود به سیستم می توانید از استفاده کنید )