बूटस्ट्रैप कें साथ तालिकाक कें ऑप्ट-इन स्टाइलिंग कें लेल दस्तावेजीकरण आ उदाहरण (जावास्क्रिप्ट प्लगइन मे ओकर प्रचलित उपयोग कें देखयत).
इस पेज पर
अवलोकन
<table>कैलेंडर आ डेट पिकर जैना तृतीय पक्ष विजेट भर मे तत्वक कें व्यापक उपयोग कें कारण , बूटस्ट्रैप कें टेबल ऑप्ट-इन छै . .tableकोनो मे बेस क्लास जोड़ू <table>, फेर हमर वैकल्पिक संशोधक वर्ग या कस्टम शैली क संग विस्तारित करू. बूटस्ट्रैप मे सबटा टेबल स्टाइल विरासत मे नहि भेटल अछि, मतलब कोनो नेस्टेड टेबल कए अभिभावक स स्वतंत्र रूप स स्टाइल कैल जा सकैत अछि ।
सबसे बेसिक टेबल मार्कअप कें उपयोग करयत, एतय .table-आधारित टेबल बूटस्ट्रैप मे कोना देखयत छै.
# 2019।
पहिल
अंतिम
संभालनाइ
१
मार्क
ओटो
@ mdo
२
याकूब
थॉर्नटन
@मोट
३
लैरी द बर्ड
@ ट्विटर पर
<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>.
# 2019।
पहिल
अंतिम
संभालनाइ
१
मार्क
ओटो
@ mdo
२
याकूब
थॉर्नटन
@मोट
३
लैरी द बर्ड
@ ट्विटर पर
<tableclass="table table-striped">
...
</table>
इ वर्गक कें तालिका वेरिएंट मे सेहो जोडल जा सकय छै:
--bs-table-bgहम कस्टम प्रॉपर्टी के साथ एक टेबल सेल के बैकग्राउंड सेट करके शुरू करते हैं | तखन सभ टेबल वेरिएंट ओहि कस्टम गुण केँ टेबल सेल केँ रंगीन करबाक लेल सेट करैत अछि. एहि तरहेँ जँ अर्ध-पारदर्शी रंगक प्रयोग टेबल बैकग्राउंडक रूपमे कएल जाए तँ हमरा सभकेँ कोनो दिक्कत नहि होइत अछि ।
box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);तखन हम कोनो निर्दिष्ट के ऊपर to layer के संग टेबल सेल पर एकटा इनसेट बॉक्स छाया जोड़ैत छी 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;तालिका सँ विरासत मे लैत अछि
ई यहाँ कुछ प्लेसहोल्डर पाठ छै, जेकरऽ उद्देश्य काफी ऊर्ध्वाधर स्थान लेबै के छै, ई दर्शाबै लेली कि पूर्ववर्ती कोष्ठकऽ म॑ ऊर्ध्वाधर संरेखण केना काम करै छै ।
ई सेल vertical-align: bottom;तालिका पंक्ति सँ विरासत मे लैत अछि
ई सेल vertical-align: bottom;तालिका पंक्ति सँ विरासत मे लैत अछि
ई सेल vertical-align: bottom;तालिका पंक्ति सँ विरासत मे लैत अछि
ई यहाँ कुछ प्लेसहोल्डर पाठ छै, जेकरऽ उद्देश्य काफी ऊर्ध्वाधर स्थान लेबै के छै, ई दर्शाबै लेली कि पूर्ववर्ती कोष्ठकऽ म॑ ऊर्ध्वाधर संरेखण केना काम करै छै ।
ई कोशिका 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>
घोंसला बनाना
सीमा शैली, सक्रिय शैली, आओर तालिका वेरिएंट नेस्टेड तालिका द्वारा विरासत मे नहि भेटैत अछि.
नेस्टेड टेबल म॑ कोनो भी स्टाइल क॑ लीक होय स॑ रोकै लेली , हम्मं॑ >अपनऽ CSS म॑ चाइल्ड कॉम्बिनेटर ( ) चयनकर्ता के उपयोग करै छियै । चूँकि हमरा सभकेँ , , आ , मे सभटा tds आ ths केँ लक्षित करबाक आवश्यकता अछि , हमर चयनकर्ता एकर बिना काफी लम्बा लागत । ऐन्हऽ म॑, हम , के सब s आरू s क॑ लक्षित करै लेली बल्कि विषम दिखै वाला चयनकर्ता के उपयोग करै छियै , लेकिन कोनो संभावित नेस्टेड तालिका म॑ स॑ कोय भी नै ।theadtbodytfoot.table > :not(caption) > * > *tdth.table
ध्यान रहे कि अगर आप <tr>s क॑ कोनो टेबल केरऽ डायरेक्ट चिल्ड्रेन के रूप म॑ जोड़ै छियै त॑ वू डिफ़ॉल्ट रूप स॑ <tr>a म॑ लपेटलऽ जैतै , जेकरा स॑ हमरऽ चयनकर्ता इरादा के अनुसार काम करतै ।<tbody>
शरीर रचना विज्ञान
टेबल हेड
तालिका आरू गहरे रंग के तालिका के समान, संशोधक वर्गों क॑ प्रयोग करलऽ जाय .table-lightया s क॑ हल्का या गहरे धूसर रंग के देखाबै .table-darkलेली ।<thead>
ए <caption>टेबल के लेल हेडिंग के तरह काज करैत अछि. इ स्क्रीन रीडर वाला उपयोगकर्ताक कें एकटा टेबल खोजय मे मदद करय छै आ इ समझय मे मदद करय छै की इ की बारे मे छै आ इ तय करय मे मदद करय छै की ओ ओकरा पढ़य चाहय छै या नहि.
उपयोगकर्ताओं की सूची
# 2019।
पहिल
अंतिम
संभालनाइ
१
मार्क
ओटो
@ mdo
२
याकूब
थॉर्नटन
@मोट
३
लैरी द बर्ड
@ ट्विटर पर
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
अहां <caption>टेबुल के ऊपर के संग सेहो राखि सकय छी .caption-top.
उपयोगकर्ताओं की सूची
# 2019।
पहिल
अंतिम
संभालनाइ
१
मार्क
ओटो
@ mdo
२
याकूब
थॉर्नटन
@मोट
३
लैरी
चिड़ै के
@ ट्विटर पर
<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}कोनों विशेष ब्रेकपॉइंट तइक रिस्पांसिव टेबल बनावा कें लेल जरूरत कें अनुसार उपयोग करूं . ओहि ब्रेकपॉइंट सं आओर ऊपर, टेबल सामान्य व्यवहार करत आओर क्षैतिज रूप सं स्क्रॉल नहि करत.
ई तालिकाक कें टूटल प्रतीत भ सकय छै, जब तइक ओकर प्रतिक्रियाशील शैली विशिष्ट दृश्यपोर्ट चौड़ाई पर लागू नै भ जाय.