बूटस्ट्रैप के साथ टेबल सभ के ऑप्ट-इन स्टाइलिंग खातिर दस्तावेजीकरण आ उदाहरण (जावास्क्रिप्ट प्लगइन सभ में इनहन के प्रचलित इस्तेमाल के देखत)।
उदाहरण खातिर दिहल गइल बा
कैलेंडर आ डेट पिकर जइसन थर्ड पार्टी विजेट सभ में टेबल सभ के व्यापक इस्तेमाल के कारण, हमनी के आपन टेबल सभ के ऑप्ट-इन होखे खातिर डिजाइन कइले बानी जा । .tableबस कवनो में बेस क्लास जोड़ीं <table>, फिर कस्टम स्टाइल या हमनी के विभिन्न शामिल संशोधक वर्ग के साथ विस्तार करीं।
सबसे बेसिक टेबल मार्कअप के इस्तेमाल करत, इहाँ बतावल गइल बा कि .tableबूटस्ट्रैप में -आधारित टेबल कइसे लउके लें। सभ टेबल स्टाइल सभ के बूटस्ट्रैप 4 में इनहेरिट कइल गइल बा , मने कि कौनों भी नेस्टेड टेबल सभ के ओही तरीका से स्टाइल कइल जाई जइसे कि पैरेंट के।
.table-borderedटेबल आ सेल के चारो ओर के सीमा खातिर जोड़ल जाला।
# भोजपुरी में पढ़ें:
पहिला
अंतिम
हेंडिल
1 के बा
मार्क कइल जाव
ओटो के नाम से जानल जाला
@mdo के बा
2 के बा
याकूब के नाम से जानल जाला
थॉर्नटन के नाम से जानल जाला
@मोट
3 के बा
लैरी द बर्ड के नाम से जानल जाला
@ट्विटर पर दिहल गइल बा
<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>
# भोजपुरी में पढ़ें:
पहिला
अंतिम
हेंडिल
1 के बा
मार्क कइल जाव
ओटो के नाम से जानल जाला
@mdo के बा
2 के बा
याकूब के नाम से जानल जाला
थॉर्नटन के नाम से जानल जाला
@मोट
3 के बा
लैरी द बर्ड के नाम से जानल जाला
@ट्विटर पर दिहल गइल बा
<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-hoverएगो के भीतर टेबल पंक्तियन पर एगो होवर स्टेट के सक्षम करे खातिर जोड़ीं <tbody>.
# भोजपुरी में पढ़ें:
पहिला
अंतिम
हेंडिल
1 के बा
मार्क कइल जाव
ओटो के नाम से जानल जाला
@mdo के बा
2 के बा
याकूब के नाम से जानल जाला
थॉर्नटन के नाम से जानल जाला
@मोट
3 के बा
लैरी द बर्ड के नाम से जानल जाला
@ट्विटर पर दिहल गइल बा
<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>
# भोजपुरी में पढ़ें:
पहिला
अंतिम
हेंडिल
1 के बा
मार्क कइल जाव
ओटो के नाम से जानल जाला
@mdo के बा
2 के बा
याकूब के नाम से जानल जाला
थॉर्नटन के नाम से जानल जाला
@मोट
3 के बा
लैरी द बर्ड के नाम से जानल जाला
@ट्विटर पर दिहल गइल बा
<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सेल पैडिंग के आधा में काट के टेबल के अउरी कॉम्पैक्ट बनावे खातिर जोड़ दीं ।
# भोजपुरी में पढ़ें:
पहिला
अंतिम
हेंडिल
1 के बा
मार्क कइल जाव
ओटो के नाम से जानल जाला
@mdo के बा
2 के बा
याकूब के नाम से जानल जाला
थॉर्नटन के नाम से जानल जाला
@मोट
3 के बा
लैरी द बर्ड के नाम से जानल जाला
@ट्विटर पर दिहल गइल बा
<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>
# भोजपुरी में पढ़ें:
पहिला
अंतिम
हेंडिल
1 के बा
मार्क कइल जाव
ओटो के नाम से जानल जाला
@mdo के बा
2 के बा
याकूब के नाम से जानल जाला
थॉर्नटन के नाम से जानल जाला
@मोट
3 के बा
लैरी द बर्ड के नाम से जानल जाला
@ट्विटर पर दिहल गइल बा
<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>
संदर्भ के कक्षा के बारे में बतावल गइल बा
तालिका पंक्ति भा अलग-अलग कोशिका सभ के रंग देवे खातिर संदर्भ वर्ग सभ के इस्तेमाल करीं।
अर्थ जोड़े खातिर रंग के इस्तेमाल से खाली एगो दृश्य संकेत मिलेला, जवन सहायक तकनीक के प्रयोगकर्ता लोग के ना पहुँचावल जाई – जइसे कि स्क्रीन रीडर। सुनिश्चित करीं कि रंग से चिन्हित जानकारी या त खुद सामग्री से स्पष्ट होखे (जइसे कि दृश्यमान पाठ), या फिर वैकल्पिक तरीका से शामिल कइल गइल होखे, जइसे कि .sr-onlyक्लास के साथ छिपल अतिरिक्त पाठ।
.tableके साथ कौनों भी के लपेट के रिस्पांसिव टेबल बनाईं .table-responsive{-sm|-md|-lg|-xl}, टेबल के हर max-widthब्रेकपॉइंट पर क्रम से 576px, 768px, 992px, आ 1120px तक ले (लेकिन एह में शामिल ना कइल गइल) पर क्षैतिज रूप से स्क्रॉल करीं।
ए <caption>टेबल खातिर हेडिंग निहन काम करेला। ई स्क्रीन रीडर वाला प्रयोगकर्ता लोग के एगो टेबल खोजे में मदद करे ला आ ई समझे में मदद करे ला कि ई का बारे में बा आ ई तय करे ला कि ऊ लोग एकरा के पढ़ल चाहत बा कि ना।
प्रयोगकर्ता लोग के सूची बा
# भोजपुरी में पढ़ें:
पहिला
अंतिम
हेंडिल
1 के बा
मार्क कइल जाव
ओटो के नाम से जानल जाला
@mdo के बा
2 के बा
याकूब के नाम से जानल जाला
थॉर्नटन के नाम से जानल जाला
@मोट
3 के बा
लैरी के नाम से जानल जाला
चिरई के नाम से जानल जाला
@ट्विटर पर दिहल गइल बा
<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क्षैतिज रूप से स्क्रॉल करे वाला टेबल खातिर इस्तेमाल करीं।
# भोजपुरी में पढ़ें:
हेडिंग के बा
हेडिंग के बा
हेडिंग के बा
हेडिंग के बा
हेडिंग के बा
हेडिंग के बा
हेडिंग के बा
हेडिंग के बा
हेडिंग के बा
1 के बा
कक्ष
कक्ष
कक्ष
कक्ष
कक्ष
कक्ष
कक्ष
कक्ष
कक्ष
2 के बा
कक्ष
कक्ष
कक्ष
कक्ष
कक्ष
कक्ष
कक्ष
कक्ष
कक्ष
3 के बा
कक्ष
कक्ष
कक्ष
कक्ष
कक्ष
कक्ष
कक्ष
कक्ष
कक्ष
ब्रेकपॉइंट विशिष्ट बा
.table-responsive{-sm|-md|-lg|-xl}कवनो खास ब्रेकपॉइंट तक ले रिस्पांसिव टेबल बनावे खातिर जरूरत के हिसाब से इस्तेमाल करीं . ओह ब्रेकपॉइंट से आ ऊपर, टेबल सामान्य व्यवहार करी आ क्षैतिज रूप से स्क्रॉल ना करी।