مکيه مواد ڏانهن وڃو Docs نيويگيشن ڏانھن وڃو
in English

ٽيبل

دستاويزن ۽ مثالن جي آپٽ-اِن اسٽائلنگ لاءِ جدولن (جيڪو جاوا اسڪرپٽ پلگ ان ۾ انهن جو عام استعمال ڏنو ويو آهي) بوٽ اسٽريپ سان.

اوسر

<table>ٽئين پارٽي ويجيٽس جهڙوڪ ڪئلينڊرن ۽ تاريخ چونڊيندڙن ۾ عناصر جي وسيع استعمال جي ڪري ، بوٽ اسٽريپ جون ٽيبلون آپٽ-ان آهن . .tableڪنهن به ۾ بنيادي ڪلاس شامل ڪريو <table>، پوء اسان جي اختياري ترميمي ڪلاس يا ڪسٽم اسلوب سان وڌايو. سڀئي ٽيبل اسلوب بوٽ اسٽريپ ۾ ورثي ۾ نه مليا آهن، مطلب ته ڪنهن به نيسٽ ٿيل ٽيبل کي والدين کان آزاد انداز ۾ ترتيب ڏئي سگهجي ٿو.

سڀ کان بنيادي ٽيبل مارڪ اپ استعمال ڪندي، ھتي آھي ڪيئن .tableبيسڊ ٽيبل بوٽ اسٽريپ ۾ نظر اچن ٿا.

# پهريون آخري سنڀالڻ
1 نشان اوٽو @mdo
2 جيڪب ٿورنٽن @ٿلهو
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 نشان اوٽو @mdo
2 جيڪب ٿورنٽن @ٿلهو
3 ليري دي برڊ @twitter
<table class="table table-striped">
  ...
</table>

اهي طبقا به شامل ڪري سگھجن ٿا جدول جي مختلف قسمن ۾:

# پهريون آخري سنڀالڻ
1 نشان اوٽو @mdo
2 جيڪب ٿورنٽن @ٿلهو
3 ليري دي برڊ @twitter
<table class="table table-dark table-striped">
  ...
</table>
# پهريون آخري سنڀالڻ
1 نشان اوٽو @mdo
2 جيڪب ٿورنٽن @ٿلهو
3 ليري دي برڊ @twitter
<table class="table table-success table-striped">
  ...
</table>

لڙڪيل قطارون

شامل ڪريو .table-hoverھوور اسٽيٽ کي فعال ڪرڻ لاءِ ٽيبل جي قطارن تي <tbody>.

# پهريون آخري سنڀالڻ
1 نشان اوٽو @mdo
2 جيڪب ٿورنٽن @ٿلهو
3 ليري دي برڊ @twitter
<table class="table table-hover">
  ...
</table>
# پهريون آخري سنڀالڻ
1 نشان اوٽو @mdo
2 جيڪب ٿورنٽن @ٿلهو
3 ليري دي برڊ @twitter
<table class="table table-dark table-hover">
  ...
</table>

اهي ڇڪڻ واريون قطارون پڻ پٽي ٿيل قسم سان گڏ ڪري سگهجن ٿيون:

# پهريون آخري سنڀالڻ
1 نشان اوٽو @mdo
2 جيڪب ٿورنٽن @ٿلهو
3 ليري دي برڊ @twitter
<table class="table table-striped table-hover">
  ...
</table>

فعال ٽيبل

.table-activeڪلاس شامل ڪندي ٽيبل جي قطار يا سيل کي نمايان ڪريو .

# پهريون آخري سنڀالڻ
1 نشان اوٽو @mdo
2 جيڪب ٿورنٽن @ٿلهو
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 نشان اوٽو @mdo
2 جيڪب ٿورنٽن @ٿلهو
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اسان ڪسٽم ملڪيت سان ٽيبل سيل جي پس منظر کي ترتيب ڏيڻ شروع ڪريون ٿا . سڀئي ٽيبل مختلف قسمون وري سيٽ ڪريو ڪسٽم ملڪيت کي ٽيبل سيلز کي رنگ ڏيڻ لاء. اهو طريقو، اسان کي مصيبت ۾ نه اينديون آهن جيڪڏهن نيم شفاف رنگ ٽيبل پس منظر طور استعمال ڪيا وڃن.
  • ان کان پوء اسان ٽيبل جي سيلز تي هڪ انسيٽ باڪس شيڊ شامل ڪندا آهيون box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);ڪنهن به مخصوص جي چوٽي تي پرت سان background-color. ڇاڪاڻ ته اسان هڪ وڏي اسپريڊ استعمال ڪندا آهيون ۽ ڪو به بلور ناهي، رنگ هڪجهڙائي وارو هوندو. جيئن ته --bs-table-accent-bgڊفالٽ طور غير سيٽ ٿيل آهي، اسان وٽ ڊفالٽ باڪس شيڊ نه آهي.
  • جڏهن يا ته .table-striped، .table-hoverيا .table-activeڪلاس شامل ڪيا ويندا آهن، --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 نشان اوٽو @mdo
2 جيڪب ٿورنٽن @ٿلهو
3 ليري دي برڊ @twitter
<table class="table table-bordered">
  ...
</table>

رنگ تبديل ڪرڻ لاءِ بارڊر رنگ جون افاديتون شامل ڪري سگھجن ٿيون:

# پهريون آخري سنڀالڻ
1 نشان اوٽو @mdo
2 جيڪب ٿورنٽن @ٿلهو
3 ليري دي برڊ @twitter
<table class="table table-bordered border-primary">
  ...
</table>

سرحدون بغير ٽيبل

.table-borderlessبغير سرحد جي ٽيبل لاء شامل ڪريو .

# پهريون آخري سنڀالڻ
1 نشان اوٽو @mdo
2 جيڪب ٿورنٽن @ٿلهو
3 ليري دي برڊ @twitter
<table class="table table-borderless">
  ...
</table>
# پهريون آخري سنڀالڻ
1 نشان اوٽو @mdo
2 جيڪب ٿورنٽن @ٿلهو
3 ليري دي برڊ @twitter
<table class="table table-dark table-borderless">
  ...
</table>

ننڍيون ٽيبلون

سڀني سيلن کي اڌ ۾ ڪٽڻ سان وڌيڪ ڪمپيڪٽ .table-smٺاهڻ لاءِ شامل ڪريو ..tablepadding

# پهريون آخري سنڀالڻ
1 نشان اوٽو @mdo
2 جيڪب ٿورنٽن @ٿلهو
3 ليري دي برڊ @twitter
<table class="table table-sm">
  ...
</table>
# پهريون آخري سنڀالڻ
1 نشان اوٽو @mdo
2 جيڪب ٿورنٽن @ٿلهو
3 ليري دي برڊ @twitter
<table class="table table-dark table-sm">
  ...
</table>

عمودي ترتيب

ٽيبل سيلز <thead>جا هميشه هيٺان عمودي ترتيب ڏنل آهن. ٽيبل سيلز کي <tbody>وراثت ۾ انهن جي ترتيب جي ترتيب ڏني وئي آهي <table>۽ ڊفالٽ طور تي مٿي تي ترتيب ڏنل آهن. عمودي ترتيب واري طبقن کي استعمال ڪريو ٻيهر ترتيب ڏيڻ لاءِ جتي ضرورت هجي.

عنوان 1 عنوان 2 عنوان 3 عنوان 4
هي سيل 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 نشان اوٽو @mdo
مٿو مٿو مٿو
اي پهريون آخري
ب پهريون آخري
سي پهريون آخري
3 ليري پکي @twitter
<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

ڪيئن nesting ڪم

ڪنهن به اسلوب کي nested جدولن تي ليڪ ٿيڻ کان روڪڻ لاءِ، اسان پنهنجي CSS ۾ چائلڊ ڪمبينيٽر ( ) سليڪٽر استعمال ڪندا آهيون >. جيئن ته اسان کي , , ۽ ۾ سڀني tds ۽ ths کي نشانو بڻائڻ جي ضرورت آهي ، اسان جو چونڊيندڙ ان کان سواء تمام ڊگهو نظر ايندو. جيئن ته، اسان استعمال ڪريون ٿا بلڪه عجيب لڳندڙ چونڊيندڙ کي نشانو بڻائڻ لاءِ سڀني s ۽ s کي نشانو بڻائڻ لاءِ ، پر ڪنهن به امڪاني nested جدولن مان ڪو به نه.theadtbodytfoot.table > :not(caption) > * > *tdth.table

نوٽ ڪريو ته جيڪڏھن توھان <tr>s کي ھڪڙي ٽيبل جي سڌي ٻارن طور شامل ڪيو، اھي ڊفالٽ <tr>۾ لپي ويندا ، اھڙيءَ طرح اسان جا چونڊيندڙ ڪم ڪندا جيئن ارادو ڪيو وڃي.<tbody>

اناتومي

ٽيبل سر

جدولن ۽ اونداھين جدولن سان ملندڙ جلندڙ، تبديل ڪندڙ طبقن کي استعمال ڪريو .table-lightيا s کي ھلڪو يا ڪارو ناسي ظاھر .table-darkڪرڻ لاءِ .<thead>

# پهريون آخري سنڀالڻ
1 نشان اوٽو @mdo
2 جيڪب ٿورنٽن @ٿلهو
3 ليري پکي @twitter
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# پهريون آخري سنڀالڻ
1 نشان اوٽو @mdo
2 جيڪب ٿورنٽن @ٿلهو
3 ليري پکي @twitter
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

ٽيبل فوٽ

# پهريون آخري سنڀالڻ
1 نشان اوٽو @mdo
2 جيڪب ٿورنٽن @ٿلهو
3 ليري پکي @twitter
فوٽر فوٽر فوٽر فوٽر
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

ڪيپشن

<caption>ٽيبل لاءِ هيڊنگ وانگر ڪم ڪندو آهي . اهو استعمال ڪندڙن کي اسڪرين ريڊرز سان گڏ ٽيبل ڳولڻ ۾ مدد ڪري ٿو ۽ سمجھي ٿو ته اھو ڇا آھي ۽ فيصلو ڪري ٿو ته ڇا اھي ان کي پڙھڻ چاھين ٿا.

صارفين جي فهرست
# پهريون آخري سنڀالڻ
1 نشان اوٽو @mdo
2 جيڪب ٿورنٽن @ٿلهو
3 ليري دي برڊ @twitter
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

توھان پڻ <caption>ٽيبل جي چوٽي تي رکي سگھو ٿا .caption-top.

صارفين جي فهرست
# پهريون آخري سنڀالڻ
1 نشان اوٽو @mdo
2 جيڪب ٿورنٽن @ٿلهو
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 سيل سيل سيل سيل سيل سيل سيل سيل سيل
2 سيل سيل سيل سيل سيل سيل سيل سيل سيل
3 سيل سيل سيل سيل سيل سيل سيل سيل سيل
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

بريڪ پوائنٽ مخصوص

.table-responsive{-sm|-md|-lg|-xl|-xxl}هڪ خاص وقفي پوائنٽ تائين جوابي ٽيبل ٺاهڻ لاءِ گهربل طور استعمال ڪريو . انهي بريڪ پوائنٽ کان ۽ مٿي، ٽيبل عام طور تي عمل ڪندو ۽ افقي طور تي اسڪرول نه ڪندو.

اهي ٽيبل ٽٽل ظاهر ٿي سگهن ٿا جيستائين انهن جي جوابي اندازن کي مخصوص ڏيئو پورٽ جي چوٽي تي لاڳو ٿئي.

# مٿو مٿو مٿو مٿو مٿو مٿو مٿو مٿو
1 سيل سيل سيل سيل سيل سيل سيل سيل
2 سيل سيل سيل سيل سيل سيل سيل سيل
3 سيل سيل سيل سيل سيل سيل سيل سيل
# مٿو مٿو مٿو مٿو مٿو مٿو مٿو مٿو
1 سيل سيل سيل سيل سيل سيل سيل سيل
2 سيل سيل سيل سيل سيل سيل سيل سيل
3 سيل سيل سيل سيل سيل سيل سيل سيل
# مٿو مٿو مٿو مٿو مٿو مٿو مٿو مٿو
1 سيل سيل سيل سيل سيل سيل سيل سيل
2 سيل سيل سيل سيل سيل سيل سيل سيل
3 سيل سيل سيل سيل سيل سيل سيل سيل
# مٿو مٿو مٿو مٿو مٿو مٿو مٿو مٿو
1 سيل سيل سيل سيل سيل سيل سيل سيل
2 سيل سيل سيل سيل سيل سيل سيل سيل
3 سيل سيل سيل سيل سيل سيل سيل سيل
# مٿو مٿو مٿو مٿو مٿو مٿو مٿو مٿو
1 سيل سيل سيل سيل سيل سيل سيل سيل
2 سيل سيل سيل سيل سيل سيل سيل سيل
3 سيل سيل سيل سيل سيل سيل سيل سيل
# مٿو مٿو مٿو مٿو مٿو مٿو مٿو مٿو
1 سيل سيل سيل سيل سيل سيل سيل سيل
2 سيل سيل سيل سيل سيل سيل سيل سيل
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.