बूटस्ट्रैप कन्नै तालिकाएं दी ऑप्ट-इन स्टाइलिंग आस्तै दस्तावेजीकरण ते उदाहरण (जावास्क्रिप्ट प्लगइन्स च उंदा प्रचलित इस्तेमाल दिक्खदे होई)।
उदाहरण दे
कैलेंडर ते डेट पिकर जनेह् त्रीयें पार्टी विजेटें च तालिकाएं दे व्यापक इस्तेमाल दे कारण, असें अपनी तालिकाएं गी ऑप्ट-इन होने आस्तै डिजाइन कीता ऐ . बस आधार वर्ग .tableगी कुसै बी च जोड़ो <table>, फिर कस्टम शैलियें कन्नै विस्तार करो जां साढ़े बक्ख-बक्ख शामल संशोधक वर्गें कन्नै।
सब्भनें शा बुनियादी तालिका मार्कअप दा इस्तेमाल करदे होई, इत्थै दिक्खेआ गेआ ऐ जे .tableबूटस्ट्रैप च -आधारत तालिकाएं किस चाल्ली दिक्खियां जंदियां न. सारे तालिका शैलियां बूटस्ट्रैप 4 च विरासत च हासल कीतियां गेदियां न , मतलब कुसै बी नेस्टेड तालिका गी उस्सै चाल्ली शैली कीती जाग जिस्सै चाल्ली माता-पिता गी.
तालिकाएं ते गहरे रंगें दी तालिकाएं दे समान, संशोधक वर्गें दा इस्तेमाल करो .thead-lightजां s गी हल्के जां गहरे धूसर रंग दे प्रदर्शत .thead-darkकरने आस्तै .<thead>
.table-borderedतालिका ते कोशिकाएं दे सारे पास्सै सीमाएं आस्तै जोड़ो ।
# ऐ
पैहला
अंतम
हैंडल
१
मार्क करो
ओटो ने दी
@ एमडीओ
२
याकूब दा
थॉर्नटन ने दी
@मुट्टा
३
लैरी द बर्ड
@ ट्विटर पर
<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>
# ऐ
पैहला
अंतम
हैंडल
१
मार्क करो
ओटो ने दी
@ एमडीओ
२
याकूब दा
थॉर्नटन ने दी
@मुट्टा
३
लैरी द बर्ड
@ ट्विटर पर
<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बिना सीमाएं दे टेबल लेई जोड़ो ।
# ऐ
पैहला
अंतम
हैंडल
१
मार्क करो
ओटो ने दी
@ एमडीओ
२
याकूब दा
थॉर्नटन ने दी
@मुट्टा
३
लैरी द बर्ड
@ ट्विटर पर
<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काले रंग दी मेज पर बी इस्तेमाल कीता जाई सकदा ऐ।
# ऐ
पैहला
अंतम
हैंडल
१
मार्क करो
ओटो ने दी
@ एमडीओ
२
याकूब दा
थॉर्नटन ने दी
@मुट्टा
३
लैरी द बर्ड
@ ट्विटर पर
<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>.
# ऐ
पैहला
अंतम
हैंडल
१
मार्क करो
ओटो ने दी
@ एमडीओ
२
याकूब दा
थॉर्नटन ने दी
@मुट्टा
३
लैरी द बर्ड
@ ट्विटर पर
<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>
# ऐ
पैहला
अंतम
हैंडल
१
मार्क करो
ओटो ने दी
@ एमडीओ
२
याकूब दा
थॉर्नटन ने दी
@मुट्टा
३
लैरी द बर्ड
@ ट्विटर पर
<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सेल पैडिंग गी आधे च कट्टियै टेबल गी होर कॉम्पैक्ट बनाने लेई जोड़ो ।
# ऐ
पैहला
अंतम
हैंडल
१
मार्क करो
ओटो ने दी
@ एमडीओ
२
याकूब दा
थॉर्नटन ने दी
@मुट्टा
३
लैरी द बर्ड
@ ट्विटर पर
<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>
# ऐ
पैहला
अंतम
हैंडल
१
मार्क करो
ओटो ने दी
@ एमडीओ
२
याकूब दा
थॉर्नटन ने दी
@मुट्टा
३
लैरी द बर्ड
@ ट्विटर पर
<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>इक तालिका आस्तै इक हेडिंग दी तर्ज पर कम्म करदा ऐ। एह् स्क्रीन रीडर आह् ले बरतूनी गी इक तालिका गी ढूँढने ते एह् समझने च मदद करदा ऐ जे एह् किस गल्लै दे बारे च ऐ ते फैसला करदा ऐ जे ओह् इसगी पढ़ना चांह् दे न जां नेईं।
बरतूनी दी सूची
# ऐ
पैहला
अंतम
हैंडल
१
मार्क करो
ओटो ने दी
@ एमडीओ
२
याकूब दा
थॉर्नटन ने दी
@मुट्टा
३
लैरी ने दी
चिड़िया दा
@ ट्विटर पर
<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}इक खास ब्रेकपॉइंट तगर प्रतिक्रियाशील तालिकाएं बनाने लेई जरूरत मताबक इस्तेमाल करो . उस ब्रेकपॉइंट थमां ते उप्पर, तालिका सामान्य रूप कन्नै व्यवहार करग ते क्षैतिज रूप कन्नै स्क्रॉल नेईं करग।
एह् तालिकाएं उस बेल्लै तगर टूटी दिक्खी सकदियां न जदूं तगर उंदी प्रतिक्रियाशील शैलियां विशिष्ट दृष्टिकोण चौड़ाई पर लागू नेईं होंदियां न.