باز بدە بۆ ناوەڕۆکی سەرەکی باز بدە بۆ گەشتکردن بە دۆکیومێنتەکان
in English

خشتەکان

بەڵگەنامە و نموونە بۆ شێوازی هەڵبژاردنی خشتەکان (بە لەبەرچاوگرتنی بەکارهێنانی باو لە پێوەکراوەکانی جاڤاسکڕێپتدا) لەگەڵ Bootstrap.

تێڕوانینێکی گشتی

بەهۆی بەکارهێنانی بەربڵاوی <table>توخمەکان لە سەرانسەری ویجتەکانی لایەنی سێیەم وەک ساڵنامە و هەڵگرەکانی بەروار، خشتەکانی Bootstrap بەشداریکردنن . پۆلی بنەڕەتی زیاد بکە .tableبۆ هەر <table>, پاشان درێژ بکەرەوە بە پۆلەکانی دەستکاریکەری هەڵبژاردەمان یان ستایلە تایبەتمەندەکانمان. هەموو ستایلەکانی خشتەکان لە Bootstrapدا بۆماوە نین، واتە هەر خشتەیەکی هێلانەکراو دەتوانرێت سەربەخۆ لە باوک ستایل بکرێت.

بە بەکارهێنانی بنەڕەتیترین نیشاندانی خشتەکان، لێرەدا چۆن .tableخشتەکانی -based لە Bootstrap دەردەکەون.

# . یەکەم دوایین دەسک
1. 1 مارک ئۆتۆ @mdo
2. 2 یاقوب تۆرنتن @قەڵەو
3. 3 لاری باڵندە لە @twitter
<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>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

جۆرەکان

پۆلەکانی کۆنتێکست بەکاربهێنە بۆ ڕەنگکردنی خشتەکان، ڕیزەکانی خشتەکان یان خانە تاکەکەسییەکان.

پۆل سەردێڕ سەردێڕ
بنەڕەتی خانە خانە
سەرەکی خانە خانە
لاوەکی خانە خانە
سەرکەوتن خانە خانە
مەترسی خانە خانە
ئاگادار کردنەوە خانە خانە
زانیاری خانە خانە
ڕووناکی خانە خانە
تاریک خانە خانە
<!-- On tables -->
<table class="table-primary">...</table>
<table class="table-secondary">...</table>
<table class="table-success">...</table>
<table class="table-danger">...</table>
<table class="table-warning">...</table>
<table class="table-info">...</table>
<table class="table-light">...</table>
<table class="table-dark">...</table>

<!-- On rows -->
<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-primary">...</td>
  <td class="table-secondary">...</td>
  <td class="table-success">...</td>
  <td class="table-danger">...</td>
  <td class="table-warning">...</td>
  <td class="table-info">...</td>
  <td class="table-light">...</td>
  <td class="table-dark">...</td>
</tr>
گەیاندنی مانا بۆ تەکنەلۆژیا یارمەتیدەرەکان

بەکارهێنانی ڕەنگ بۆ زیادکردنی مانا تەنیا ئاماژەیەکی بینراو دەدات، کە ناگەیەنرێتە بەکارهێنەرانی تەکنەلۆژیا یارمەتیدەرەکان – وەک خوێنەری شاشە. دڵنیابە لەوەی کە ئەو زانیاریانەی کە بە ڕەنگەکە دیاری دەکرێن یان لە خودی ناوەڕۆکەکەوە دیارن (بۆ نموونە دەقی بینراو)، یان لە ڕێگەی ئامرازی بەدیلەوە جێگیر دەکرێن، وەک دەقی زیادە کە لەگەڵ .visually-hiddenپۆلەکەدا شاراوەتەوە.

خشتەی زەق و زەق

ڕیزەکانی ڕەنگاوڕەنگ

بەکاری بهێنە .table-stripedبۆ زیادکردنی زیبرا-ڕیز بۆ هەر ڕیزێکی خشتەکە لەناو <tbody>.

# . یەکەم دوایین دەسک
1. 1 مارک ئۆتۆ @mdo
2. 2 یاقوب تۆرنتن @قەڵەو
3. 3 لاری باڵندە لە @twitter
<table class="table table-striped">
  ...
</table>

هەروەها دەتوانرێت ئەم پۆلانە زیاد بکرێت بۆ جۆرەکانی خشتەکە:

# . یەکەم دوایین دەسک
1. 1 مارک ئۆتۆ @mdo
2. 2 یاقوب تۆرنتن @قەڵەو
3. 3 لاری باڵندە لە @twitter
<table class="table table-dark table-striped">
  ...
</table>
# . یەکەم دوایین دەسک
1. 1 مارک ئۆتۆ @mdo
2. 2 یاقوب تۆرنتن @قەڵەو
3. 3 لاری باڵندە لە @twitter
<table class="table table-success table-striped">
  ...
</table>

ڕیزەکانی هەڵواسراو

زیادکردن .table-hoverبۆ چالاککردنی دۆخی هۆڤەر لەسەر ڕیزەکانی خشتەکان لەناو <tbody>.

# . یەکەم دوایین دەسک
1. 1 مارک ئۆتۆ @mdo
2. 2 یاقوب تۆرنتن @قەڵەو
3. 3 لاری باڵندە لە @twitter
<table class="table table-hover">
  ...
</table>
# . یەکەم دوایین دەسک
1. 1 مارک ئۆتۆ @mdo
2. 2 یاقوب تۆرنتن @قەڵەو
3. 3 لاری باڵندە لە @twitter
<table class="table table-dark table-hover">
  ...
</table>

هەروەها دەتوانرێت ئەم ڕیزە هەڵواسراوانە لەگەڵ جۆری ڕەنگاوڕەنگدا تێکەڵ بکرێت:

# . یەکەم دوایین دەسک
1. 1 مارک ئۆتۆ @mdo
2. 2 یاقوب تۆرنتن @قەڵەو
3. 3 لاری باڵندە لە @twitter
<table class="table table-striped table-hover">
  ...
</table>

خشتەی چالاک

ڕیزێک یان خانەیەک بە زیادکردنی .table-activeپۆلێک تیشک بخەرە سەر.

# . یەکەم دوایین دەسک
1. 1 مارک ئۆتۆ @mdo
2. 2 یاقوب تۆرنتن @قەڵەو
3. 3 لاری باڵندە لە @twitter
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# . یەکەم دوایین دەسک
1. 1 مارک ئۆتۆ @mdo
2. 2 یاقوب تۆرنتن @قەڵەو
3. 3 لاری باڵندە لە @twitter
<table class="table table-dark">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

چۆن جۆرەکان و خشتەکانی زەق کاردەکەن؟

بۆ خشتەکانی زەق ( ڕیزەکانی ڕەنگاوڕەنگ , ڕیزەکانی هەڵواسراو , و خشتەی چالاک ) )، ئێمە هەندێک تەکنیکمان بەکارهێنا بۆ ئەوەی ئەم کاریگەریانە بۆ هەموو جۆرەکانی خشتەکەمان کاربکەن :

  • ئێمە بە دانانی پاشبنەمای خانەیەکی خشتەی بە --bs-table-bgتایبەتمەندی custom دەست پێدەکەین. پاشان هەموو جۆرەکانی خشتەکە ئەو تایبەتمەندییە تایبەتمەندە دادەنێن بۆ ڕەنگکردنی خانەکانی خشتەکە. بەم شێوەیە، ئێمە تووشی کێشە نابین ئەگەر ڕەنگی نیمچە شەفاف وەک پاشبنەمای مێز بەکاربهێنرێت.
  • پاشان سێبەری سندوقی ئینسێت زیاد دەکەین لەسەر خانەکانی خشتەکە لەگەڵ box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);چینێک لەسەر هەر دیاریکراوێک background-color. چونکە ئێمە بڵاوبوونەوەی گەورە بەکاردەهێنین و هیچ کاڵبوونەوەیەکی نییە، ڕەنگەکەی یەک ڕەنگ دەبێت. بەو پێیەی --bs-table-accent-bgبە شێوەی پێشوەختە unset ە، ئێمە سێبەری بۆکسی پێشوەختەمان نییە.
  • کاتێک یان .table-striped, .table-hoverیان .table-activeپۆلەکان زیاد دەکرێن، the --bs-table-accent-bgڕێکدەخرێت بۆ ڕەنگێکی نیمچە شەفاف بۆ ڕەنگکردنی پاشبنەما.
  • بۆ هەر جۆرێکی خشتەکە، ئێمە --bs-table-accent-bgڕەنگێک دروست دەکەین کە بەرزترین کۆنتراستی هەبێت بەپێی ئەو ڕەنگە. بۆ نموونە ڕەنگی لەهجە بۆ .table-primaryتۆخترە لە کاتێکدا .table-darkڕەنگی لەهجەی سووکترە.
  • ڕەنگی دەق و سنوور بە هەمان شێوە دروست دەکرێن، و ڕەنگەکانیان بە شێوازی پێشوەختە بۆماوەیی دەکرێن.

لە پشت پەردەوە بەم شێوەیە دەردەکەوێت:

@mixin table-variant($state, $background) {
  .table-#{$state} {
    $color: color-contrast(opaque($body-bg, $background));
    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
    $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
    $active-bg: mix($color, $background, percentage($table-active-bg-factor));

    --#{$variable-prefix}table-bg: #{$background};
    --#{$variable-prefix}table-striped-bg: #{$striped-bg};
    --#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)};
    --#{$variable-prefix}table-active-bg: #{$active-bg};
    --#{$variable-prefix}table-active-color: #{color-contrast($active-bg)};
    --#{$variable-prefix}table-hover-bg: #{$hover-bg};
    --#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)};

    color: $color;
    border-color: mix($color, $background, percentage($table-border-factor));
  }
}

سنووری خشتەکان

مێزەکانی سنووردار

زیاد بکە .table-borderedبۆ سنوورەکان لە هەموو لاکانی خشتەکە و خانەکان.

# . یەکەم دوایین دەسک
1. 1 مارک ئۆتۆ @mdo
2. 2 یاقوب تۆرنتن @قەڵەو
3. 3 لاری باڵندە لە @twitter
<table class="table table-bordered">
  ...
</table>

دەتوانرێت سوودمەندییەکانی ڕەنگی سنوور زیاد بکرێت بۆ گۆڕینی ڕەنگەکان:

# . یەکەم دوایین دەسک
1. 1 مارک ئۆتۆ @mdo
2. 2 یاقوب تۆرنتن @قەڵەو
3. 3 لاری باڵندە لە @twitter
<table class="table table-bordered border-primary">
  ...
</table>

مێزەکانی بێ سنوور

زیاد بکە .table-borderlessبۆ مێزێکی بێ سنوور.

# . یەکەم دوایین دەسک
1. 1 مارک ئۆتۆ @mdo
2. 2 یاقوب تۆرنتن @قەڵەو
3. 3 لاری باڵندە لە @twitter
<table class="table table-borderless">
  ...
</table>
# . یەکەم دوایین دەسک
1. 1 مارک ئۆتۆ @mdo
2. 2 یاقوب تۆرنتن @قەڵەو
3. 3 لاری باڵندە لە @twitter
<table class="table table-dark table-borderless">
  ...
</table>

مێزی بچووک

زیاد بکە .table-smبۆ ئەوەی .tableچڕتر بێت بە بڕینی هەموو خانەکان paddingلە نیوە.

# . یەکەم دوایین دەسک
1. 1 مارک ئۆتۆ @mdo
2. 2 یاقوب تۆرنتن @قەڵەو
3. 3 لاری باڵندە لە @twitter
<table class="table table-sm">
  ...
</table>
# . یەکەم دوایین دەسک
1. 1 مارک ئۆتۆ @mdo
2. 2 یاقوب تۆرنتن @قەڵەو
3. 3 لاری باڵندە لە @twitter
<table class="table table-dark table-sm">
  ...
</table>

ڕێکخستنی ڕاست

خانەکانی خشتەی <thead>هەمیشە ڕاست ڕێکخراون بۆ خوارەوە. خانەکانی خشتەکان لە <tbody>میراتی ڕێکخستنی خۆیان لە <table>و ڕێکدەخرێن بۆ سەرەوە بە شێوازی پێشوەختە. پۆلەکانی ڕێکخستنی ڕاست بەکاربهێنە بۆ دووبارە ڕێکخستنەوە لە شوێنی پێویست.

سەردێڕی یەکەم سەردێڕی ٢ سەردێڕی سێیەم سەردێڕی ٤
ئەم خانەیە vertical-align: middle;لە خشتەکەوە میرات دەگرێت ئەم خانەیە vertical-align: middle;لە خشتەکەوە میرات دەگرێت ئەم خانەیە vertical-align: middle;لە خشتەکەوە میرات دەگرێت ئەمە لێرەدا هەندێک دەقی شوێنگرەوەیە، کە مەبەست لێی وەرگرتنی کەمێک شوێنی ڕاستە، بۆ ئەوەی نیشان بدات کە چۆن ڕێکخستنی ڕاست لە خانەکانی پێشوودا کاردەکات.
ئەم خانەیە vertical-align: bottom;لە ڕیزی خشتەکەوە میرات دەگرێت ئەم خانەیە vertical-align: bottom;لە ڕیزی خشتەکەوە میرات دەگرێت ئەم خانەیە vertical-align: bottom;لە ڕیزی خشتەکەوە میرات دەگرێت ئەمە لێرەدا هەندێک دەقی شوێنگرەوەیە، کە مەبەست لێی وەرگرتنی کەمێک شوێنی ڕاستە، بۆ ئەوەی نیشان بدات کە چۆن ڕێکخستنی ڕاست لە خانەکانی پێشوودا کاردەکات.
ئەم خانەیە vertical-align: middle;لە خشتەکەوە میرات دەگرێت ئەم خانەیە vertical-align: middle;لە خشتەکەوە میرات دەگرێت ئەم خانەیە لەگەڵ سەرەوە ڕێکدەخرێت. ئەمە لێرەدا هەندێک دەقی شوێنگرەوەیە، کە مەبەست لێی وەرگرتنی کەمێک شوێنی ڕاستە، بۆ ئەوەی نیشان بدات کە چۆن ڕێکخستنی ڕاست لە خانەکانی پێشوودا کاردەکات.
<div class="table-responsive">
  <table class="table align-middle">
    <thead>
      <tr>
        ...
      </tr>
    </thead>
    <tbody>
      <tr>
        ...
      </tr>
      <tr class="align-bottom">
        ...
      </tr>
      <tr>
        <td>...</td>
        <td>...</td>
        <td class="align-top">This cell is aligned to the top.</td>
        <td>...</td>
      </tr>
    </tbody>
  </table>
</div>

هێلانەکردن

شێوازەکانی سنوور، شێوازە چالاکەکان و جۆرەکانی خشتەکان لەلایەن خشتەکانی هێلانەکراوەوە بە میرات ناگیرێن.

# . یەکەم دوایین دەسک
1. 1 مارک ئۆتۆ @mdo
سەردێڕ سەردێڕ سەردێڕ
ئە یەکەم دوایین
ب یەکەم دوایین
ج یەکەم دوایین
3. 3 لاری باڵندەکە لە @twitter
<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

چۆنێتی کارکردنی هێلانەکردن

بۆ ڕێگریکردن لە دزەکردنی هەر ستایلێک بۆ خشتەکانی هێلانەکراو، ئێمە هەڵبژێرەری کۆکەرەوەی منداڵ ( >) لە CSS ـەکەماندا بەکاردەهێنین. بەو پێیەی پێویستە هەموو tds و ths ی ناو thead, tbody, و tfoot، بکەینە ئامانج، هەڵبژێرەرەکەمان بەبێ ئەو زۆر درێژ دەردەکەوێت. بەم شێوەیە، ئێمە .table > :not(caption) > * > *هەڵبژێرەری تا ڕادەیەک نامۆ بەکاردەهێنین بۆ بە ئامانجگرتنی هەموو tds و ths ی .table, بەڵام هیچ کام لە هیچ خشتەی هێلانەکراو.

تێبینی بکە کە ئەگەر <tr>s وەک منداڵی ڕاستەوخۆی خشتەیەک زیاد بکەیت، ئەوانە بە شێوەی پێشوەختە <tr>لە a دەپێچرێن <tbody>، بەم شێوەیە هەڵبژێرەرەکانمان وەک مەبەست کاردەکەن.

ئەناتۆمی

سەری مێز

هاوشێوەی خشتەکان و خشتەکانی تۆخ، پۆلەکانی دەستکاریکەر بەکاربهێنە .table-lightیان .table-darkبۆ ئەوەی <thead>s بە خۆڵەمێشی سووک یان تۆخ دەربکەوێت.

# . یەکەم دوایین دەسک
1. 1 مارک ئۆتۆ @mdo
2. 2 یاقوب تۆرنتن @قەڵەو
3. 3 لاری باڵندەکە لە @twitter
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# . یەکەم دوایین دەسک
1. 1 مارک ئۆتۆ @mdo
2. 2 یاقوب تۆرنتن @قەڵەو
3. 3 لاری باڵندەکە لە @twitter
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

پێی مێز

# . یەکەم دوایین دەسک
1. 1 مارک ئۆتۆ @mdo
2. 2 یاقوب تۆرنتن @قەڵەو
3. 3 لاری باڵندەکە لە @twitter
ژێرەوە ژێرەوە ژێرەوە ژێرەوە
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

کەپشنەکان

A <caption>وەک سەردێڕێک بۆ خشتەیەک کاردەکات. یارمەتی بەکارهێنەران دەدات کە خوێنەری شاشەیان هەیە بۆ دۆزینەوەی خشتەیەک و تێبگەن کە باسی چی دەکات و بڕیار بدەن کە ئایا دەیانەوێت بیخوێننەوە یان نا.

لیستی بەکارهێنەران
# . یەکەم دوایین دەسک
1. 1 مارک ئۆتۆ @mdo
2. 2 یاقوب تۆرنتن @قەڵەو
3. 3 لاری باڵندە لە @twitter
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

هەروەها دەتوانیت <caption>لەسەر سەرەوەی مێزەکە بە .caption-top.

لیستی بەکارهێنەران
# . یەکەم دوایین دەسک
1. 1 مارک ئۆتۆ @mdo
2. 2 یاقوب تۆرنتن @قەڵەو
3. 3 لاری باڵندەکە لە @twitter
<table class="table caption-top">
  <caption>List of users</caption>
  <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>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

خشتەکانی وەڵامدەرەوە

خشتەکانی وەڵامدەرەوە ڕێگە بە خشتەکان دەدەن بە ئاسانی بە شێوەی ئاسۆیی سکڕۆڵ بکرێن. هەر خشتەیەک بکە بە وەڵامدەرەوە لە سەرانسەری هەموو دەرگاکانی بینین بە پێچانی .tableبە .table-responsive. یان، زۆرترین خاڵێکی شکاندن هەڵبژێرە کە لەگەڵیدا خشتەی وەڵامدەرەوەت هەبێت تا بە بەکارهێنانی .table-responsive{-sm|-md|-lg|-xl|-xxl}.

بڕین/بڕینی ڕاست

خشتەکانی وەڵامدەرەوە سوود لە overflow-y: hidden, وەردەگرن، کە هەر ناوەڕۆکێک کە لە لێوارەکانی خوارەوە یان سەرەوەی خشتەکە تێپەڕێت، دەبڕێت. بە تایبەتی ئەمە دەتوانێت مینیوەکانی دابەزین و ویجتەکانی تری لایەنی سێیەم ببڕێت.

هەمیشە وەڵامدەرەوە

لە سەرانسەری هەموو خاڵێکی شکاندن، .table-responsiveبۆ خشتەکان بە شێوەی ئاسۆیی بەکاری بهێنە.

# . سەردێڕ سەردێڕ سەردێڕ سەردێڕ سەردێڕ سەردێڕ سەردێڕ سەردێڕ سەردێڕ
1. 1 خانە خانە خانە خانە خانە خانە خانە خانە خانە
2. 2 خانە خانە خانە خانە خانە خانە خانە خانە خانە
3. 3 خانە خانە خانە خانە خانە خانە خانە خانە خانە
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

تایبەت بە خاڵی شکاندن

بەپێی پێویست بەکاری بهێنە .table-responsive{-sm|-md|-lg|-xl|-xxl}بۆ دروستکردنی خشتەی وەڵامدەرەوە تا خاڵێکی شکاندنی دیاریکراو. لەو خاڵە شکاندنەوە و بەرەو سەرەوە، خشتەکە بە شێوەیەکی ئاسایی ڕەفتار دەکات و بە شێوەی ئاسۆیی سکڕۆڵ ناکات.

ئەم خشتانە لەوانەیە شکاو دەرکەون تا ئەو کاتەی شێوازە وەڵامدەرەوەکانیان لە پانایی دەرچەی بینینی تایبەتدا جێبەجێ دەکرێن.

# . سەردێڕ سەردێڕ سەردێڕ سەردێڕ سەردێڕ سەردێڕ سەردێڕ سەردێڕ
1. 1 خانە خانە خانە خانە خانە خانە خانە خانە
2. 2 خانە خانە خانە خانە خانە خانە خانە خانە
3. 3 خانە خانە خانە خانە خانە خانە خانە خانە
# . سەردێڕ سەردێڕ سەردێڕ سەردێڕ سەردێڕ سەردێڕ سەردێڕ سەردێڕ
1. 1 خانە خانە خانە خانە خانە خانە خانە خانە
2. 2 خانە خانە خانە خانە خانە خانە خانە خانە
3. 3 خانە خانە خانە خانە خانە خانە خانە خانە
# . سەردێڕ سەردێڕ سەردێڕ سەردێڕ سەردێڕ سەردێڕ سەردێڕ سەردێڕ
1. 1 خانە خانە خانە خانە خانە خانە خانە خانە
2. 2 خانە خانە خانە خانە خانە خانە خانە خانە
3. 3 خانە خانە خانە خانە خانە خانە خانە خانە
# . سەردێڕ سەردێڕ سەردێڕ سەردێڕ سەردێڕ سەردێڕ سەردێڕ سەردێڕ
1. 1 خانە خانە خانە خانە خانە خانە خانە خانە
2. 2 خانە خانە خانە خانە خانە خانە خانە خانە
3. 3 خانە خانە خانە خانە خانە خانە خانە خانە
# . سەردێڕ سەردێڕ سەردێڕ سەردێڕ سەردێڕ سەردێڕ سەردێڕ سەردێڕ
1. 1 خانە خانە خانە خانە خانە خانە خانە خانە
2. 2 خانە خانە خانە خانە خانە خانە خانە خانە
3. 3 خانە خانە خانە خانە خانە خانە خانە خانە
# . سەردێڕ سەردێڕ سەردێڕ سەردێڕ سەردێڕ سەردێڕ سەردێڕ سەردێڕ
1. 1 خانە خانە خانە خانە خانە خانە خانە خانە
2. 2 خانە خانە خانە خانە خانە خانە خانە خانە
3. 3 خانە خانە خانە خانە خانە خانە خانە خانە
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-xxl">
  <table class="table">
    ...
  </table>
</div>

ساس

گۆڕاوەکان

$table-cell-padding-y:        .5rem;
$table-cell-padding-x:        .5rem;
$table-cell-padding-y-sm:     .25rem;
$table-cell-padding-x-sm:     .25rem;

$table-cell-vertical-align:   top;

$table-color:                 $body-color;
$table-bg:                    transparent;
$table-accent-bg:             transparent;

$table-th-font-weight:        null;

$table-striped-color:         $table-color;
$table-striped-bg-factor:     .05;
$table-striped-bg:            rgba($black, $table-striped-bg-factor);

$table-active-color:          $table-color;
$table-active-bg-factor:      .1;
$table-active-bg:             rgba($black, $table-active-bg-factor);

$table-hover-color:           $table-color;
$table-hover-bg-factor:       .075;
$table-hover-bg:              rgba($black, $table-hover-bg-factor);

$table-border-factor:         .1;
$table-border-width:          $border-width;
$table-border-color:          $border-color;

$table-striped-order:         odd;

$table-group-separator-color: currentColor;

$table-caption-color:         $text-muted;

$table-bg-scale:              -80%;

ئەڵقە

$table-variants: (
  "primary":    shift-color($primary, $table-bg-scale),
  "secondary":  shift-color($secondary, $table-bg-scale),
  "success":    shift-color($success, $table-bg-scale),
  "info":       shift-color($info, $table-bg-scale),
  "warning":    shift-color($warning, $table-bg-scale),
  "danger":     shift-color($danger, $table-bg-scale),
  "light":      $light,
  "dark":       $dark,
);

خۆکارکردن

  • گۆڕاوە فاکتەرەکان ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) بەکاردەهێنرێن بۆ دیاریکردنی کۆنتراست لە جۆرەکانی خشتەکەدا.
  • جگە لە جۆرەکانی خشتەی ڕووناکی و تاریک، ڕەنگەکانی تەوەر بەهۆی $table-bg-levelگۆڕاوەکەوە ڕووناک دەکرێنەوە.