बूटस्ट्रैप के साथ तालिकाओं की ऑप्ट-इन स्टाइलिंग के लिए दस्तावेज़ीकरण और उदाहरण (जावास्क्रिप्ट प्लगइन्स में उनके प्रचलित उपयोग को देखते हुए)।
इस पृष्ठ पर
अवलोकन
<table>कैलेंडर और दिनांक पिकर जैसे तृतीय-पक्ष विजेट में तत्वों के व्यापक उपयोग के कारण , बूटस्ट्रैप की तालिकाएँ ऑप्ट-इन हैं । आधार वर्ग .tableको किसी में जोड़ें <table>, फिर हमारे वैकल्पिक संशोधक वर्गों या कस्टम शैलियों के साथ विस्तार करें। बूटस्ट्रैप में सभी तालिका शैलियों को विरासत में नहीं मिला है, जिसका अर्थ है कि किसी भी नेस्टेड टेबल को माता-पिता से स्वतंत्र रूप से स्टाइल किया जा सकता है।
सबसे बुनियादी तालिका मार्कअप का उपयोग करते हुए, यहां बताया गया है कि कैसे- .tableआधारित तालिकाएँ बूटस्ट्रैप में दिखती हैं।
#
प्रथम
अंतिम
सँभालना
1
निशान
ओटो
@mdo
2
याकूब
थार्नटन
@मोटा
3
लैरी द बर्ड
@ट्विटर
<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
लैरी द बर्ड
@ट्विटर
<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;तालिका से विरासत में मिला है
यह यहां कुछ प्लेसहोल्डर टेक्स्ट है, जिसका उद्देश्य काफी कुछ लंबवत स्थान लेना है, यह प्रदर्शित करने के लिए कि पूर्ववर्ती कक्षों में लंबवत संरेखण कैसे काम करता है।
यह कोशिका विरासत में मिलती है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>से एक में लिपटे रहेंगे <tbody>, इस प्रकार हमारे चयनकर्ता इच्छित के अनुसार काम करेंगे।
शरीर रचना
टेबल हेड
टेबल और डार्क टेबल की तरह ही, मॉडिफायर क्लासेस का इस्तेमाल करें .table-lightया हल्का या गहरा ग्रे दिखाने .table-darkके लिए ।<thead>
एक <caption>तालिका के लिए शीर्षक की तरह कार्य करता है। यह स्क्रीन रीडर वाले उपयोगकर्ताओं को एक तालिका खोजने और यह समझने में मदद करता है कि यह किस बारे में है और यह तय करता है कि क्या वे इसे पढ़ना चाहते हैं।
उपयोगकर्ताओं की सूची
#
प्रथम
अंतिम
सँभालना
1
निशान
ओटो
@mdo
2
याकूब
थार्नटन
@मोटा
3
लैरी द बर्ड
@ट्विटर
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
<caption>आप टेबल के शीर्ष पर भी रख सकते हैं .caption-top।
उपयोगकर्ताओं की सूची
#
प्रथम
अंतिम
सँभालना
1
निशान
ओटो
@mdo
2
याकूब
थार्नटन
@मोटा
3
लैरी
पक्षी
@ट्विटर
<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लाइट और डार्क टेबल वेरिएंट के अलावा, वेरिएबल द्वारा थीम कलर्स को हल्का किया जाता है।