बूटस्ट्रैप कें साथ तालिकाक कें ऑप्ट-इन स्टाइलिंग कें लेल दस्तावेजीकरण आ उदाहरण (जावास्क्रिप्ट प्लगइन मे ओकर प्रचलित उपयोग कें देखयत)।
उदाहरण के लिये
कैलेंडर आरू डेट पिकर जैसनऽ थर्ड-पार्टी विजेट भर म॑ टेबल केरऽ व्यापक उपयोग के कारण, हम अपनऽ टेबल क॑ ऑप्ट-इन लेली डिजाइन करल॑ छै . .tableबस कोनो मे बेस क्लास जोड़ू <table>, फेर कस्टम स्टाइल या हमर विभिन्न शामिल संशोधक वर्ग के संग विस्तार करू.
सबसे बेसिक टेबल मार्कअप कें उपयोग करयत, एतय .table-आधारित टेबल बूटस्ट्रैप मे कोना देखयत छै. सबटा टेबल स्टाइल बूटस्ट्रैप 4 मे विरासत मे भेटल अछि , मतलब कोनो नेस्टेड टेबल कए ओहिना स्टाइल कएल जाएत जेना पैरेंट.
.table-borderedतालिका आ कोष्ठकक सभ कात सीमाक लेल जोड़ू ।
# 2019।
पहिल
अंतिम
संभालनाइ
१
मार्क
ओटो
@ mdo
२
याकूब
थॉर्नटन
@मोट
३
लैरी द बर्ड
@ ट्विटर पर
<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>
# 2019।
पहिल
अंतिम
संभालनाइ
१
मार्क
ओटो
@ mdo
२
याकूब
थॉर्नटन
@मोट
३
लैरी द बर्ड
@ ट्विटर पर
<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बिना सीमा के टेबल के लेल जोड़ू ।
# 2019।
पहिल
अंतिम
संभालनाइ
१
मार्क
ओटो
@ mdo
२
याकूब
थॉर्नटन
@मोट
३
लैरी द बर्ड
@ ट्विटर पर
<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डार्क टेबल पर सेहो प्रयोग कएल जा सकैत अछि ।
# 2019।
पहिल
अंतिम
संभालनाइ
१
मार्क
ओटो
@ mdo
२
याकूब
थॉर्नटन
@मोट
३
लैरी द बर्ड
@ ट्विटर पर
<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>.
# 2019।
पहिल
अंतिम
संभालनाइ
१
मार्क
ओटो
@ mdo
२
याकूब
थॉर्नटन
@मोट
३
लैरी द बर्ड
@ ट्विटर पर
<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>
# 2019।
पहिल
अंतिम
संभालनाइ
१
मार्क
ओटो
@ mdo
२
याकूब
थॉर्नटन
@मोट
३
लैरी द बर्ड
@ ट्विटर पर
<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सेल पैडिंग कें आधा मे काट क टेबल कें बेसि कॉम्पैक्ट बनावा कें लेल जोड़ूं .
# 2019।
पहिल
अंतिम
संभालनाइ
१
मार्क
ओटो
@ mdo
२
याकूब
थॉर्नटन
@मोट
३
लैरी द बर्ड
@ ट्विटर पर
<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>
# 2019।
पहिल
अंतिम
संभालनाइ
१
मार्क
ओटो
@ mdo
२
याकूब
थॉर्नटन
@मोट
३
लैरी द बर्ड
@ ट्विटर पर
<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वर्ग कें साथ छिपल अतिरिक्त पाठ.
.tableककसी भी कक साथ लपेटकर उत्तरदायी तालिका बनाओ , तालिका कको क्रमशः 576px, 768px, 992px, और 1120px तक (लेकिन इसमें शामिल नहीं) के .table-responsive{-sm|-md|-lg|-xl}प्रत्येक ब्रेकपॉइंट पर क्षैतिज रूप स स्क्रॉल करकय |max-width
ए <caption>टेबल के लेल हेडिंग के तरह काज करैत अछि. इ स्क्रीन रीडर वाला उपयोगकर्ताक कें एकटा टेबल खोजय मे मदद करय छै आ इ समझय मे मदद करय छै की इ की बारे मे छै आ इ तय करय मे मदद करय छै की ओ ओकरा पढ़य चाहय छै या नहि.
उपयोगकर्ताओं की सूची
# 2019।
पहिल
अंतिम
संभालनाइ
१
मार्क
ओटो
@ mdo
२
याकूब
थॉर्नटन
@मोट
३
लैरी
चिड़ै के
@ ट्विटर पर
<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}कोनों विशेष ब्रेकपॉइंट तइक रिस्पांसिव टेबल बनावा कें लेल जरूरत कें अनुसार उपयोग करूं . ओहि ब्रेकपॉइंट सं आओर ऊपर, टेबल सामान्य व्यवहार करत आओर क्षैतिज रूप सं स्क्रॉल नहि करत.
ई तालिकाक टूटल प्रतीत भ सकय छै जखन तइक ओकर प्रतिक्रियाशील शैली विशिष्ट दृश्यपोर्ट चौड़ाई पर लागू नै भ जायत.