جدول عناصر توضیحات عنوان صفحه در اینجا می رود...


جدول اصلی

با استفاده از ابتدایی ترین نشانه گذاری جدول ، چگونگی نگاه جدول های مبتنی بر جدول در بوت استرپ آورده شده است. همچنین می توانید رنگها را با متن روشن با زمینه های تاریک معکوس کنید .table-dark.

جدول پیش فرض
# اولین آخرین رسیدگی
1 طاهر نصیری @راست_چین
2 جعفر خان عباسی @راست_چین
3 لاری شری @راست_چین
جدول تیره
# اولین آخرین رسیدگی
1 جعفر خان شیری @راست_چین
2 خان جان شری @راست_چین
3 لاری شری @راست_چین
<!-- default table -->
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    ...
  </tbody>
</table>

<!-- dark table -->
<table class="table table-dark">
  ...
</table>

گزینه های سر جدول

مانند جداول و جداول تاریک ، از کلاس های اصلاح کننده استفاده کنید .thead-light یا .thead-dark ساختن <thead>s روشن یا خاکستری تیره به نظر می رسد.

هدر تیره
# اولین آخرین رسیدگی
1 جعفر خان شیری @راست_چین
2 خان جان شری @راست_چین
3 لاری شری @راست_چین
هدر روشن
# اولین آخرین رسیدگی
1 جعفر خان شیری @راست_چین
2 خان جان شری @راست_چین
3 لاری شری @راست_چین
<!-- thead-light -->
<table class="table">
  <thead class="thead-light">...</thead>
</table>

<!-- thead-dark -->
<table class="table">
  <thead class="thead-dark">...</thead>
</table>

ردیف های راه راه

با استفاده .table-striped برای اضافه کردن نوارهای گورخر به هر سطر جدول در داخل <tbody>.

# اولین آخرین رسیدگی
1 جعفر خان شیری @راست_چین
2 خان جان شری @راست_چین
3 لاری شری @راست_چین
<!-- table-striped -->
<table class="table table-striped">
  ...
</table>

جدول حاشیه

افزودن .table-bordered برای مرزها در همه طرف جدول و سلول.

# اولین آخرین رسیدگی
1 جعفر خان شیری @راست_چین
2 خان جان شری @راست_چین
3 سولشیر @راست_چین
<!-- table-bordered -->
<table class="table table-bordered">
  ...
</table>

جدول بدون مرز

# اولین آخرین رسیدگی
1 جعفر خان شیری @راست_چین
2 خان جان شری @راست_چین
3 سولشیر @راست_چین
<!-- table-borderless -->
<table class="table table-borderless">
  ...
</table>

ردیف های قابل حمل

افزودن .table-hover برای فعال کردن حالت شناور در سطرهای جدول در داخل <tbody>.

# اولین آخرین رسیدگی
1 جعفر خان شیری @راست_چین
2 خان جان شری @راست_چین
3 سولشیر @راست_چین
<!-- table-hover -->
<table class="table table-hover">
  ...
</table>

جدول کوچک

افزودن .table-sm برای جداول فشرده تر با برش بالشتک سلول در نیمه.

# اولین آخرین رسیدگی
1 جعفر خان شیری @راست_چین
2 خان جان شری @راست_چین
3 سولشیر @راست_چین
<!-- table-sm -->
<table class="table table-sm">
  ...
</table>

کلاسهای متنی

از کلاسهای متنی برای رنگ آمیزی سطرهای جدول یا سلولهای فردی استفاده کنید.

کلاس هدینگ هدینگ
فعال تماس تماس
پیش فرض تماس تماس
اولیه تماس تماس
ثانویه تماس تماس
موفق تماس تماس
اخطار تماس تماس
خطر تماس تماس
اطلاعات تماس تماس
روشن تماس تماس
تیره تماس تماس
اخطار تماس تماس
اطلاعات تماس تماس
روشن تماس تماس
تیر تماس تماس
تیر تماس تماس
<!-- On rows -->
<tr class="table-active">...</tr>
<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-active">...</td>
</tr>

<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
</tr>

تنظیکات

یک <caption> توابع مانند عنوان برای جدول. این کمک می کند تا کاربران خواننده صفحه نمایش یک جدول را پیدا کنند و درک کنند که در مورد چه چیزی است و تصمیم می گیرند که بخواهند آن را بخوانند.

لیست کاربران
# اولین آخرین رسیدگی
1 جعفر خان شیری @راست_چین
2 خان جان شری @راست_چین
3 لاری شری @راست_چین
<!-- caption -->
<table class="table">
  <caption>لیست کاربران</caption>
  <thead>...</thead>
  <tbody>...</tbody>
</table>

جدول ریسپانسیو

جداول پاسخگو اجازه می دهد جداول با سهولت به صورت افقی پیمایش شوند. با بسته بندی a ، هر جدول را در بین همه نمایها پاسخگو باشید .table با .table-responsive. یا ، حداکثر نقطه شکست را انتخاب کنید تا با استفاده از آن بتوانید یک جدول پاسخگو داشته باشید .table-responsive{-sm|-md|-lg|-xl}.

# هدینگ هدینگ هدینگ هدینگ هدینگ هدینگ هدینگ هدینگ هدینگ
1 تماس تماس تماس تماس تماس تماس تماس تماس تماس
2 تماس تماس تماس تماس تماس تماس تماس تماس تماس
3 تماس تماس تماس تماس تماس تماس تماس تماس تماس
<!-- table-responsive -->
< class="table-responsive">
  <table class="table">
    ...
  </table>
</div>