बूटस्ट्रैप के साथ टेबल सभ के ऑप्ट-इन स्टाइलिंग खातिर दस्तावेजीकरण आ उदाहरण (जावास्क्रिप्ट प्लगइन सभ में इनहन के प्रचलित इस्तेमाल के देखत)।
एह पन्ना पर दिहल गइल बा
अवलोकन कइल जाव
<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>a में लपेटल जाई <tbody>, एह तरीका से हमनी के चयनकर्ता सभ के इरादा के अनुसार काम हो जाई।
एनाटॉमी के बारे में बतावल गइल बा
टेबल हेड के बा
टेबल आ डार्क टेबल सभ के समान, संशोधक क्लास सभ के इस्तेमाल करीं .table-lightया s के हल्का भा गहिरा ग्रे रंग के देखावे .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& 1 के बा।$table-hover-bg-factor ) के इस्तेमाल तालिका वेरिएंट में कंट्रास्ट के निर्धारण करे खातिर कइल जाला।
लाइट & डार्क टेबल वेरिएंट के अलावा, थीम रंग के $table-bg-levelचर द्वारा हल्का कइल जाला।