Source

ٽيبل

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

مثال

ٽئين پارٽي ويجيٽس جهڙوڪ ڪئلينڊر ۽ تاريخ چونڊيندڙن ۾ جدولن جي وسيع استعمال جي ڪري، اسان پنهنجي جدولن کي آپٽ اِن ڪرڻ لاءِ ٺاهيو آهي . .tableبس ڪنهن به ۾ بنيادي ڪلاس شامل ڪريو <table>، پوء وڌايو ڪسٽم اسٽائل يا اسان جي مختلف شامل ڪيل ترميمي ڪلاس سان.

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

# پهريون آخري سنڀالڻ
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>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

توھان پڻ رنگن کي ڦيرائي سگھو ٿا - اونداھي پس منظر تي ھلڪي متن سان - سان .table-dark.

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

ٽيبل سر جا اختيار

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

# پهريون آخري سنڀالڻ
1 نشان اوٽو @mdo
2 جيڪب ٿورنٽن @ٿلهو
3 ليري پکي @twitter
# پهريون آخري سنڀالڻ
1 نشان اوٽو @mdo
2 جيڪب ٿورنٽن @ٿلهو
3 ليري پکي @twitter 
<table class="table">
  <thead class="thead-dark">
    <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 class="table">
  <thead class="thead-light">
    <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-stripedڪنهن به ٽيبل جي قطار ۾ زيبرا-اسٽريپنگ شامل ڪرڻ لاءِ استعمال ڪريو <tbody>.

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

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

بي سرحد ٽيبل

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

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

.table-borderlessاونداهي ٽيبل تي پڻ استعمال ڪري سگهجي ٿو.

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

لڙڪيل قطارون

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

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

ننڍي ٽيبل

.table-smسيل پيڊنگ کي اڌ ۾ ڪٽڻ سان ٽيبل کي وڌيڪ ٺهڪندڙ بڻائڻ لاءِ شامل ڪريو .

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

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

باقاعده جدول جي پس منظر وارين قسمون موجود نه آھن ڊارڪ ٽيبل سان، پر توھان استعمال ڪري سگھوٿا متن يا پس منظر جي افاديت کي ساڳي انداز کي حاصل ڪرڻ لاءِ.

# مٿو مٿو
1 سيل سيل
2 سيل سيل
3 سيل سيل
4 سيل سيل
5 سيل سيل
6 سيل سيل
7 سيل سيل
8 سيل سيل
9 سيل سيل 
<!-- 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>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</td>
</tr>
مددگار ٽيڪنالاجي جي معني کي پهچائڻ

معنيٰ شامل ڪرڻ لاءِ رنگ استعمال ڪرڻ صرف هڪ بصري اشارو مهيا ڪري ٿو، جيڪو مددگار ٽيڪنالاجي جي استعمال ڪندڙن تائين نه پهچايو ويندو - جهڙوڪ اسڪرين ريڊر. پڪ ڪريو ته رنگ مان ظاهر ڪيل معلومات يا ته مواد مان ئي پڌري آهي (مثال طور ڏيکاريل متن)، يا متبادل طريقن سان شامل ڪيو ويو آهي، جهڙوڪ اضافي متن .sr-onlyڪلاس سان لڪايو ويو آهي.

576px، 768px، 992px، ۽ 1120px تائين (پر ان ۾ شامل نه) جي هر بريڪ پوائنٽ تي ٽيبل کي افقي طور تي اسڪرول ڪرڻ .tableسان ، ڪنهن به سان ويپ ڪندي جوابي ٽيبل ٺاهيو ..table-responsive{-sm|-md|-lg|-xl}max-width

نوٽ ڪريو ته جيئن برائوزر في الحال رينج جي حوالي سان سوالن کي سپورٽ نٿا ڪن ، اسان ڪم ڪريون ٿا حدن min-۽ max-اڳياڙين ۽ ويو پورٽس جي حدن جي وچ ۾ جزوي ويڪر سان (جيڪي ڪجهه حالتن ۾ ٿي سگهن ٿيون هاءِ ڊي پي آئي ڊوائيسز تي، مثال طور) انهن موازن لاءِ اعليٰ درستگي سان قدر استعمال ڪندي. .

ڪيپشن

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

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

جوابي ٽيبل

جوابي جدولن کي آساني سان افقي طور تي اسڪرول ڪرڻ جي اجازت ڏين ٿا. ڪنهن به ٽيبل کي سڀني وييو پورٽن تي جوابي بڻائي ڇڏيو a .tableسان گڏ لفافي ڪندي .table-responsive. يا، هڪ وڌ ۾ وڌ بريڪ پوائنٽ چونڊيو جنهن سان استعمال ڪندي جوابي ٽيبل اپ هجي .table-responsive{-sm|-md|-lg|-xl}.

عمودي ڪلپنگ / ڪٽڻ

جوابي ٽيبل استعمال ڪن ٿا overflow-y: hidden، جيڪو ڪنهن به مواد کي ڪلپ ڪري ٿو جيڪو ٽيبل جي هيٺان يا مٿين ڪنڊن کان ٻاهر وڃي ٿو. خاص طور تي، هي ڊراپ ڊائون مينيو ۽ ٻين ٽئين پارٽي ويجٽ کي ڪلپ ڪري سگھي ٿو.

هميشه جوابدار

هر بريڪ پوائنٽ تي، .table-responsiveافقي طور تي اسڪرولنگ ٽيبل لاءِ استعمال ڪريو.

# مٿو مٿو مٿو مٿو مٿو مٿو مٿو مٿو مٿو
1 سيل سيل سيل سيل سيل سيل سيل سيل سيل
2 سيل سيل سيل سيل سيل سيل سيل سيل سيل
3 سيل سيل سيل سيل سيل سيل سيل سيل سيل 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

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

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

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

# مٿو مٿو مٿو مٿو مٿو مٿو مٿو مٿو
1 سيل سيل سيل سيل سيل سيل سيل سيل
2 سيل سيل سيل سيل سيل سيل سيل سيل
3 سيل سيل سيل سيل سيل سيل سيل سيل 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# مٿو مٿو مٿو مٿو مٿو مٿو مٿو مٿو
1 سيل سيل سيل سيل سيل سيل سيل سيل
2 سيل سيل سيل سيل سيل سيل سيل سيل
3 سيل سيل سيل سيل سيل سيل سيل سيل 
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>
# مٿو مٿو مٿو مٿو مٿو مٿو مٿو مٿو
1 سيل سيل سيل سيل سيل سيل سيل سيل
2 سيل سيل سيل سيل سيل سيل سيل سيل
3 سيل سيل سيل سيل سيل سيل سيل سيل 
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>
# مٿو مٿو مٿو مٿو مٿو مٿو مٿو مٿو
1 سيل سيل سيل سيل سيل سيل سيل سيل
2 سيل سيل سيل سيل سيل سيل سيل سيل
3 سيل سيل سيل سيل سيل سيل سيل سيل 
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>