دستاويزن ۽ مثالن جي آپٽ-اِن اسٽائلنگ لاءِ جدولن (جيڪو جاوا اسڪرپٽ پلگ ان ۾ انهن جو عام استعمال ڏنو ويو آهي) بوٽ اسٽريپ سان.
هن صفحي تي
اوسر
<table>ٽئين پارٽي ويجيٽس جهڙوڪ ڪئلينڊرن ۽ تاريخ چونڊيندڙن ۾ عناصر جي وسيع استعمال جي ڪري ، بوٽ اسٽريپ جون ٽيبلون آپٽ-ان آهن . .tableڪنهن به ۾ بنيادي ڪلاس شامل ڪريو <table>، پوء اسان جي اختياري ترميمي ڪلاس يا ڪسٽم اسلوب سان وڌايو. سڀئي ٽيبل اسلوب بوٽ اسٽريپ ۾ ورثي ۾ نه مليا آهن، مطلب ته ڪنهن به نيسٽ ٿيل ٽيبل کي والدين کان آزاد انداز ۾ ترتيب ڏئي سگهجي ٿو.
سڀ کان بنيادي ٽيبل مارڪ اپ استعمال ڪندي، ھتي آھي ڪيئن .tableبيسڊ ٽيبل بوٽ اسٽريپ ۾ نظر اچن ٿا.
#
پهريون
آخري
سنڀالڻ
1
نشان
اوٽو
@mdo
2
جيڪب
ٿورنٽن
@ٿلهو
3
ليري دي برڊ
@twitter
<tableclass="table"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
ورهاڱي
رنگين جدولن، ٽيبل جي قطارن يا انفرادي سيلن کي رنگ ڏيڻ لاءِ لاڳاپيل ڪلاس استعمال ڪريو.
ڪلاس
مٿو
مٿو
ڊفالٽ
سيل
سيل
پرائمري
سيل
سيل
ثانوي
سيل
سيل
ڪاميابي
سيل
سيل
خطرو
سيل
سيل
ڊيڄاريندڙ
سيل
سيل
ڄاڻ
سيل
سيل
روشني
سيل
سيل
ڳاڙهو
سيل
سيل
<!-- On tables --><tableclass="table-primary">...</table><tableclass="table-secondary">...</table><tableclass="table-success">...</table><tableclass="table-danger">...</table><tableclass="table-warning">...</table><tableclass="table-info">...</table><tableclass="table-light">...</table><tableclass="table-dark">...</table><!-- On rows --><trclass="table-primary">...</tr><trclass="table-secondary">...</tr><trclass="table-success">...</tr><trclass="table-danger">...</tr><trclass="table-warning">...</tr><trclass="table-info">...</tr><trclass="table-light">...</tr><trclass="table-dark">...</tr><!-- On cells (`td` or `th`) --><tr><tdclass="table-primary">...</td><tdclass="table-secondary">...</td><tdclass="table-success">...</td><tdclass="table-danger">...</td><tdclass="table-warning">...</td><tdclass="table-info">...</td><tdclass="table-light">...</td><tdclass="table-dark">...</td></tr>
مددگار ٽيڪنالاجي جي معني کي پهچائڻ
معنيٰ شامل ڪرڻ لاءِ رنگ استعمال ڪرڻ صرف هڪ بصري اشارو مهيا ڪري ٿو، جيڪو مددگار ٽيڪنالاجي جي استعمال ڪندڙن تائين نه پهچايو ويندو - جهڙوڪ اسڪرين ريڊر. پڪ ڪريو ته رنگ مان ظاهر ڪيل معلومات يا ته مواد مان ئي پڌري آهي (مثال طور ڏيکاريل متن)، يا متبادل طريقن سان شامل ڪيو ويو آهي، جهڙوڪ اضافي متن .visually-hiddenڪلاس سان لڪايو ويو آهي.
تلفظ ٿيل ٽيبل
پٽي ٿيل قطارون
.table-stripedڪنهن به ٽيبل جي قطار ۾ زيبرا-اسٽريپنگ شامل ڪرڻ لاءِ استعمال ڪريو <tbody>.
#
پهريون
آخري
سنڀالڻ
1
نشان
اوٽو
@mdo
2
جيڪب
ٿورنٽن
@ٿلهو
3
ليري دي برڊ
@twitter
<tableclass="table table-striped">
...
</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هلڪو تلفظ رنگ آهي.
متن ۽ سرحد جا رنگ ساڳي طرح ٺاهيا ويا آهن، ۽ انهن جا رنگ ڊفالٽ طرفان ورثي ۾ آهن.
ٽيبل سيلز <thead>جا هميشه هيٺان عمودي ترتيب ڏنل آهن. ٽيبل سيلز کي <tbody>وراثت ۾ انهن جي ترتيب جي ترتيب ڏني وئي آهي <table>۽ ڊفالٽ طور تي مٿي تي ترتيب ڏنل آهن. عمودي ترتيب واري طبقن کي استعمال ڪريو ٻيهر ترتيب ڏيڻ لاءِ جتي ضرورت هجي.
عنوان 1
عنوان 2
عنوان 3
عنوان 4
هي سيل vertical-align: middle;ٽيبل مان ورثي ۾ ملي ٿو
هي سيل vertical-align: middle;ٽيبل مان ورثي ۾ ملي ٿو
هي سيل vertical-align: middle;ٽيبل مان ورثي ۾ ملي ٿو
<divclass="table-responsive"><tableclass="table align-middle"><thead><tr>
...
</tr></thead><tbody><tr>
...
</tr><trclass="align-bottom">
...
</tr><tr><td>...</td><td>...</td><tdclass="align-top">This cell is aligned to the top.</td><td>...</td></tr></tbody></table></div>
نستو
بارڊر اسلوب، فعال انداز، ۽ ٽيبل جي مختلف قسمن کي نراس ٿيل جدولن کان ورثي ۾ نه مليا آهن.
ڪنهن به اسلوب کي nested جدولن تي ليڪ ٿيڻ کان روڪڻ لاءِ، اسان پنهنجي CSS ۾ چائلڊ ڪمبينيٽر ( ) سليڪٽر استعمال ڪندا آهيون >. جيئن ته اسان کي , , ۽ ۾ سڀني tds ۽ ths کي نشانو بڻائڻ جي ضرورت آهي ، اسان جو چونڊيندڙ ان کان سواء تمام ڊگهو نظر ايندو. جيئن ته، اسان استعمال ڪريون ٿا بلڪه عجيب لڳندڙ چونڊيندڙ کي نشانو بڻائڻ لاءِ سڀني s ۽ s کي نشانو بڻائڻ لاءِ ، پر ڪنهن به امڪاني nested جدولن مان ڪو به نه.theadtbodytfoot.table > :not(caption) > * > *tdth.table
نوٽ ڪريو ته جيڪڏھن توھان <tr>s کي ھڪڙي ٽيبل جي سڌي ٻارن طور شامل ڪيو، اھي ڊفالٽ <tr>۾ لپي ويندا ، اھڙيءَ طرح اسان جا چونڊيندڙ ڪم ڪندا جيئن ارادو ڪيو وڃي.<tbody>
اناتومي
ٽيبل سر
جدولن ۽ اونداھين جدولن سان ملندڙ جلندڙ، تبديل ڪندڙ طبقن کي استعمال ڪريو .table-lightيا s کي ھلڪو يا ڪارو ناسي ظاھر .table-darkڪرڻ لاءِ .<thead>
<caption>ٽيبل لاءِ هيڊنگ وانگر ڪم ڪندو آهي . اهو استعمال ڪندڙن کي اسڪرين ريڊرز سان گڏ ٽيبل ڳولڻ ۾ مدد ڪري ٿو ۽ سمجھي ٿو ته اھو ڇا آھي ۽ فيصلو ڪري ٿو ته ڇا اھي ان کي پڙھڻ چاھين ٿا.
صارفين جي فهرست
#
پهريون
آخري
سنڀالڻ
1
نشان
اوٽو
@mdo
2
جيڪب
ٿورنٽن
@ٿلهو
3
ليري دي برڊ
@twitter
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
توھان پڻ <caption>ٽيبل جي چوٽي تي رکي سگھو ٿا .caption-top.
صارفين جي فهرست
#
پهريون
آخري
سنڀالڻ
1
نشان
اوٽو
@mdo
2
جيڪب
ٿورنٽن
@ٿلهو
3
ليري
پکي
@twitter
<tableclass="table caption-top"><caption>List of users</caption><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="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افقي طور تي اسڪرولنگ ٽيبل لاءِ استعمال ڪريو.
.table-responsive{-sm|-md|-lg|-xl|-xxl}هڪ خاص وقفي پوائنٽ تائين جوابي ٽيبل ٺاهڻ لاءِ گهربل طور استعمال ڪريو . انهي بريڪ پوائنٽ کان ۽ مٿي، ٽيبل عام طور تي عمل ڪندو ۽ افقي طور تي اسڪرول نه ڪندو.
اهي ٽيبل ٽٽل ظاهر ٿي سگهن ٿا جيستائين انهن جي جوابي اندازن کي مخصوص ڏيئو پورٽ جي چوٽي تي لاڳو ٿئي.
فيڪٽر متغير ( $table-striped-bg-factor، $table-active-bg-factor۽$table-hover-bg-factor ) ٽيبل جي مختلف قسمن ۾ برعڪس کي طئي ڪرڻ لاء استعمال ڪيو ويندو آهي.
روشني ۽ اونداهي ٽيبل جي مختلف قسمن کان علاوه، موضوع جا رنگ متغير طرفان روشن ڪيا ويا آهن $table-bg-level.