دستاويزن ۽ مثالن جي آپٽ-اِن اسٽائلنگ لاءِ جدولن (جيڪو جاوا اسڪرپٽ پلگ ان ۾ انهن جو عام استعمال ڏنو ويو آهي) بوٽ اسٽريپ سان.
مثال
ٽئين پارٽي ويجيٽس جهڙوڪ ڪئلينڊر ۽ تاريخ چونڊيندڙن ۾ جدولن جي وسيع استعمال جي ڪري، اسان پنهنجي جدولن کي آپٽ اِن ڪرڻ لاءِ ٺاهيو آهي . .tableبس ڪنهن به ۾ بنيادي ڪلاس شامل ڪريو <table>، پوء وڌايو ڪسٽم اسٽائل يا اسان جي مختلف شامل ڪيل ترميمي ڪلاس سان.
.table-borderedٽيبل ۽ سيل جي سڀني پاسن تي سرحدن لاء شامل ڪريو .
#
پهريون
آخري
سنڀالڻ
1
نشان
اوٽو
@mdo
2
جيڪب
ٿورنٽن
@ٿلهو
3
ليري دي برڊ
@twitter
<tableclass="table table-bordered"><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>
#
پهريون
آخري
سنڀالڻ
1
نشان
اوٽو
@mdo
2
جيڪب
ٿورنٽن
@ٿلهو
3
ليري دي برڊ
@twitter
<tableclass="table table-bordered table-dark"><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>
بي سرحد ٽيبل
.table-borderlessبغير سرحد جي ٽيبل لاء شامل ڪريو .
#
پهريون
آخري
سنڀالڻ
1
نشان
اوٽو
@mdo
2
جيڪب
ٿورنٽن
@ٿلهو
3
ليري دي برڊ
@twitter
<tableclass="table table-borderless"><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>
.table-borderlessاونداهي ٽيبل تي پڻ استعمال ڪري سگهجي ٿو.
#
پهريون
آخري
سنڀالڻ
1
نشان
اوٽو
@mdo
2
جيڪب
ٿورنٽن
@ٿلهو
3
ليري دي برڊ
@twitter
<tableclass="table table-borderless table-dark"><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>
لڙڪيل قطارون
شامل ڪريو .table-hoverھوور اسٽيٽ کي فعال ڪرڻ لاءِ ٽيبل جي قطارن تي <tbody>.
#
پهريون
آخري
سنڀالڻ
1
نشان
اوٽو
@mdo
2
جيڪب
ٿورنٽن
@ٿلهو
3
ليري دي برڊ
@twitter
<tableclass="table table-hover"><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>
#
پهريون
آخري
سنڀالڻ
1
نشان
اوٽو
@mdo
2
جيڪب
ٿورنٽن
@ٿلهو
3
ليري دي برڊ
@twitter
<tableclass="table table-hover table-dark"><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>
ننڍي ٽيبل
.table-smسيل پيڊنگ کي اڌ ۾ ڪٽڻ سان ٽيبل کي وڌيڪ ٺهڪندڙ بڻائڻ لاءِ شامل ڪريو .
#
پهريون
آخري
سنڀالڻ
1
نشان
اوٽو
@mdo
2
جيڪب
ٿورنٽن
@ٿلهو
3
ليري دي برڊ
@twitter
<tableclass="table table-sm"><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>
#
پهريون
آخري
سنڀالڻ
1
نشان
اوٽو
@mdo
2
جيڪب
ٿورنٽن
@ٿلهو
3
ليري دي برڊ
@twitter
<tableclass="table table-sm table-dark"><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 rows --><trclass="table-active">...</tr><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-active">...</td><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>
<!-- On rows --><trclass="bg-primary">...</tr><trclass="bg-success">...</tr><trclass="bg-warning">...</tr><trclass="bg-danger">...</tr><trclass="bg-info">...</tr><!-- On cells (`td` or `th`) --><tr><tdclass="bg-primary">...</td><tdclass="bg-success">...</td><tdclass="bg-warning">...</td><tdclass="bg-danger">...</td><tdclass="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
<tableclass="table"><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}.
عمودي ڪلپنگ / ڪٽڻ
جوابي ٽيبل استعمال ڪن ٿا overflow-y: hidden، جيڪو ڪنهن به مواد کي ڪلپ ڪري ٿو جيڪو ٽيبل جي هيٺان يا مٿين ڪنڊن کان ٻاهر وڃي ٿو. خاص طور تي، هي ڊراپ ڊائون مينيو ۽ ٻين ٽئين پارٽي ويجٽ کي ڪلپ ڪري سگھي ٿو.
هميشه جوابدار
هر بريڪ پوائنٽ تي، .table-responsiveافقي طور تي اسڪرولنگ ٽيبل لاءِ استعمال ڪريو.
.table-responsive{-sm|-md|-lg|-xl}هڪ خاص وقفي پوائنٽ تائين جوابي ٽيبل ٺاهڻ لاءِ گهربل طور استعمال ڪريو . انهي وقفي پوائنٽ کان ۽ مٿي، ٽيبل عام طور تي عمل ڪندو ۽ افقي طور تي اسڪرول نه ڪندو.
اهي ٽيبل ٽٽل ظاهر ٿي سگهن ٿا جيستائين انهن جي جوابي اندازن کي مخصوص وييو پورٽ جي چوٽي تي لاڳو ٿئي.