बूटस्ट्रैप कन्नै तालिकाएं दी ऑप्ट-इन स्टाइलिंग आस्तै दस्तावेजीकरण ते उदाहरण (जावास्क्रिप्ट प्लगइन्स च उंदा प्रचलित इस्तेमाल दिक्खदे होई)।
इस पेज पर
अवलोकन करना
<table>कैलेंडर ते डेट पिकर जनेह् त्रीयें पार्टी विजेटें च तत्वें दे व्यापक इस्तेमाल दे कारण , बूटस्ट्रैप दी तालिकाएं च ऑप्ट-इन ऐ . आधार वर्ग .tableगी कुसै बी च जोड़ो <table>, फिर साढ़े वैकल्पिक संशोधक वर्गें जां कस्टम शैलियें कन्नै विस्तार करो. बूटस्ट्रैप च सारी तालिका शैलियां विरासत च नेईं मिलदियां न, मत��ब कुसै बी नेस्टेड तालिका गी माता-पिता थमां स्वतंत्र शैली कीती जाई सकदी ऐ.
सब्भनें शा बुनियादी तालिका मार्कअप दा इस्तेमाल करदे होई, इत्थै दिक्खेआ गेआ ऐ जे .tableबूटस्ट्रैप च -आधारत तालिकाएं किस चाल्ली दिक्खियां जंदियां न.
# ऐ
पैहला
अंतम
हैंडल
१
मार्क करो
ओटो ने दी
@ एमडीओ
२
याकूब दा
थॉर्नटन ने दी
@मुट्टा
३
लैरी द बर्ड
@ ट्विटर पर
<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>.
अस --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हल्के उच्चारण रंग ऐ।
पाठ ते सीमा रंग इक गै चाल्लीं पैदा कीते जंदे न, ते उंदे रंग डिफाल्ट रूप कन्नै विरासत च होंदे न.
<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 च चाइल्ड कम्बिएनेटर ( ) चयनकर्ता दा इस्तेमाल करदे आं. चूंकि असेंगी , , ते च सारे tdएस ते thएस गी निशाना बनाने दी लोड़ ऐ , इस करी साढ़ा चयनकर्ता इसदे बगैर काफी लंबा दिक्खना होग। इस चाल्ली, अस , दे सारे s ते s गी निशाना बनाने आस्तै बल्के विषम दिखने आह् ले चयनकर्ता दा उपयोग करदे आं , पर कुसै बी संभावित नेस्टेड तालिकाएं च कोई बी नेईं।theadtbodytfoot.table > :not(caption) > * > *tdth.table
ध्यान रक्खो जेकर तुस <tr>s गी कुसै तालिका दे सीधे बच्चें दे रूप च जोड़दे ओ तां ओह् डिफ़ॉल्ट रूप कन्नै <tr>a च लपेटे दे होङन , इस चाल्ली साढ़े चयनकर्ताएं गी इरादा दे मताबक कम्म करदे न.<tbody>
शरीर रचना विज्ञान
टेबल सिर
तालिकाएं ते गहरे रंगें दी तालिकाएं दे समान, संशोधक वर्गें दा इस्तेमाल करो .table-lightजां s गी हल्के जां गहरे धूसर रंग दे प्रदर्शत .table-darkकरने आस्तै .<thead>
ए <caption>इक तालिका आस्तै इक हेडिंग दी तर्ज पर कम्म करदा ऐ। एह् स्क्रीन रीडर आह् ले बरतूनी गी इक तालिका गी ढूँढने ते एह् समझने च मदद करदा ऐ जे एह् किस गल्लै दे बारे च ऐ ते फैसला करदा ऐ जे ओह् इसगी पढ़ना चांह् दे न जां नेईं।
बरतूनी दी सूची
# ऐ
पैहला
अंतम
हैंडल
१
मार्क करो
ओटो ने दी
@ एमडीओ
२
याकूब दा
थॉर्नटन ने दी
@मुट्टा
३
लैरी द बर्ड
@ ट्विटर पर
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
तुस <caption>टेबल दे उपर गी बी .caption-top.
बरतूनी दी सूची
# ऐ
पैहला
अंतम
हैंडल
१
मार्क करो
ओटो ने दी
@ एमडीओ
२
याकूब दा
थॉर्नटन ने दी
@मुट्टा
३
लैरी ने दी
चिड़िया दा
@ ट्विटर पर
<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}इक खास ब्रेकपॉइंट तगर प्रतिक्रियाशील तालिकाएं बनाने लेई जरूरत मताबक इस्तेमाल करो . उस ब्रेकपॉइंट थमां ते उप्पर, तालिका सामान्य रूप कन्नै व्यवहार करग ते क्षैतिज रूप कन्नै स्क्रॉल नेईं करग।
एह् तालिकाएं उस बेल्लै तगर टूटी दिक्खी सकदियां न जदूं तगर उंदी प्रतिक्रियाशील शैलियां विशिष्ट दृष्टिकोण चौड़ाई पर लागू नेईं होंदियां न.