बूटस्ट्रैप कें साथ तालिकाक कें ऑप्ट-इन स्टाइलिंग कें लेल दस्तावेजीकरण आ उदाहरण (जावास्क्रिप्ट प्लगइन मे ओकर प्रचलित उपयोग कें देखयत).
उदाहरण के लिये
कैलेंडर आरू डेट पिकर जैसनऽ थर्ड-पार्टी विजेट भर म॑ टेबल केरऽ व्यापक उपयोग के कारण, हम अपनऽ टेबल क॑ ऑप्ट-इन लेली डिजाइन करल॑ छै . .tableबस कोनो मे बेस क्लास जोड़ू <table>, फेर कस्टम स्टाइल या हमर विभिन्न शामिल संशोधक वर्ग के संग विस्तार करू.
सबसे बेसिक टेबल मार्कअप कें उपयोग करयत, एतय .table-आधारित टेबल बूटस्ट्रैप मे कोना देखयत छै. सबटा टेबल स्टाइल बूटस्ट्रैप 4 मे विरासत मे भेटल अछि , मतलब कोनो नेस्टेड टेबल कए ओहिना स्टाइल कएल जाएत जेना पैरेंट.
# 2019।
पहिल
अंतिम
संभालनाइ
१
मार्क
ओटो
@ mdo
२
याकूब
थॉर्नटन
@मोट
३
लैरी
चिड़ै के
@ ट्विटर पर
अहां रंगक कें उल्टा सेहो कयर सकय छी-गहरे रंग कें पृष्ठभूमि पर हल्का पाठ कें साथ-के साथ .table-dark.
# 2019।
पहिल
अंतिम
संभालनाइ
१
मार्क
ओटो
@ mdo
२
याकूब
थॉर्नटन
@मोट
३
लैरी
चिड़ै के
@ ट्विटर पर
टेबल हेड विकल्प
तालिका आरू गहरे रंग के तालिका के समान, संशोधक वर्गों क॑ प्रयोग करलऽ जाय .thead-lightया s क॑ हल्का या गहरे धूसर रंग के देखाबै .thead-darkलेली ।<thead>
# 2019।
पहिल
अंतिम
संभालनाइ
१
मार्क
ओटो
@ mdo
२
याकूब
थॉर्नटन
@मोट
३
लैरी
चिड़ै के
@ ट्विटर पर
# 2019।
पहिल
अंतिम
संभालनाइ
१
मार्क
ओटो
@ mdo
२
याकूब
थॉर्नटन
@मोट
३
लैरी
चिड़ै के
@ ट्विटर पर
धारीदार पंक्तियाँ
.table-stripedके भीतर कोनो तालिका पंक्ति मे ज़ेबरा-स्ट्राइपिंग जोड़बाक लेल प्रयोग करू <tbody>.
# 2019।
पहिल
अंतिम
संभालनाइ
१
मार्क
ओटो
@ mdo
२
याकूब
थॉर्नटन
@मोट
३
लैरी
चिड़ै के
@ ट्विटर पर
# 2019।
पहिल
अंतिम
संभालनाइ
१
मार्क
ओटो
@ mdo
२
याकूब
थॉर्नटन
@मोट
३
लैरी
चिड़ै के
@ ट्विटर पर
सीमाबद्ध टेबल
.table-borderedतालिका आ कोष्ठकक सभ कात सीमाक लेल जोड़ू ।
# 2019।
पहिल
अंतिम
संभालनाइ
१
मार्क
ओटो
@ mdo
२
याकूब
थॉर्नटन
@मोट
३
लैरी द बर्ड
@ ट्विटर पर
# 2019।
पहिल
अंतिम
संभालनाइ
१
मार्क
ओटो
@ mdo
२
याकूब
थॉर्नटन
@मोट
३
लैरी द बर्ड
@ ट्विटर पर
सीमा रहित टेबल
.table-borderlessबिना सीमा के टेबल के लेल जोड़ू ।
# 2019।
पहिल
अंतिम
संभालनाइ
१
मार्क
ओटो
@ mdo
२
याकूब
थॉर्नटन
@मोट
३
लैरी द बर्ड
@ ट्विटर पर
.table-borderlessडार्क टेबल पर सेहो प्रयोग कएल जा सकैत अछि ।
# 2019।
पहिल
अंतिम
संभालनाइ
१
मार्क
ओटो
@ mdo
२
याकूब
थॉर्नटन
@मोट
३
लैरी द बर्ड
@ ट्विटर पर
मंडराइत पंक्तियाँ
.table-hoverएकटा के भीतर तालिका पंक्ति पर एकटा होवर स्थिति सक्षम करबाक लेल जोड़ू <tbody>.
# 2019।
पहिल
अंतिम
संभालनाइ
१
मार्क
ओटो
@ mdo
२
याकूब
थॉर्नटन
@मोट
३
लैरी द बर्ड
@ ट्विटर पर
# 2019।
पहिल
अंतिम
संभालनाइ
१
मार्क
ओटो
@ mdo
२
याकूब
थॉर्नटन
@मोट
३
लैरी द बर्ड
@ ट्विटर पर
छोट टेबुल
.table-smसेल पैडिंग कें आधा मे काट क टेबल कें बेसि कॉम्पैक्ट बनावा कें लेल जोड़ूं .
# 2019।
पहिल
अंतिम
संभालनाइ
१
मार्क
ओटो
@ mdo
२
याकूब
थॉर्नटन
@मोट
३
लैरी द बर्ड
@ ट्विटर पर
# 2019।
पहिल
अंतिम
संभालनाइ
१
मार्क
ओटो
@ mdo
२
याकूब
थॉर्नटन
@मोट
३
लैरी द बर्ड
@ ट्विटर पर
सन्दर्भ कक्षाएँ
तालिका पंक्तियों या व्यक्तिगत कोशिकाओं को रंगने के लिये संदर्भ वर्गों का प्रयोग करें |
अर्थ जोड़य कें लेल रंग कें उपयोग करनाय केवल एकटा दृश्य संकेत प्रदान करय छै, जे सहायक प्रौद्योगिकी कें उपयोगकर्ताक कें – जेना स्क्रीन रीडर – कें संप्रेषित नहि कैल जेतय. सुनिश्चित करूं कि रंग सं संकेत कैल गेल जानकारी या त सामग्री सं ही स्पष्ट छै (जैना दृश्यमान पाठ), या वैकल्पिक साधन कें माध्यम सं शामिल कैल गेल छै, जेना कि .sr-onlyवर्ग कें साथ छिपल अतिरिक्त पाठ.
.tableककसी भी कक साथ लपेटकर उत्तरदायी तालिका बनाओ , तालिका कको क्रमशः 576px, 768px, 992px, और 1120px तक (लेकिन इसमें शामिल नहीं) के .table-responsive{-sm|-md|-lg|-xl}प्रत्येक ब्रेकपॉइंट पर क्षैतिज रूप स स्क्रॉल करकय |max-width
ए <caption>टेबल के लेल हेडिंग के तरह काज करैत अछि. इ स्क्रीन रीडर वाला उपयोगकर्ताक कें एकटा टेबल खोजय मे मदद करय छै आ इ समझय मे मदद करय छै की इ की बारे मे छै आ इ तय करय मे मदद करय छै की ओ ओकरा पढ़य चाहय छै या नहि.
उपयोगकर्ताओं की सूची
# 2019।
पहिल
अंतिम
संभालनाइ
१
मार्क
ओटो
@ mdo
२
याकूब
थॉर्नटन
@मोट
३
लैरी
चिड़ै के
@ ट्विटर पर
प्रतिक्रियाशील तालिकाएँ
रिस्पांसिव टेबल टेबल कें आसानी सं क्षैतिज रूप सं स्क्रॉल करय कें अनुमति देयत छै. .tableएकटा केँ संग लपेट क' सभ व्यूपोर्ट पर कोनो तालिका केँ उत्तरदायी बनाउ .table-responsive. अथवा, एकटा अधिकतम ब्रेकपॉइंट चुनू जकरा संग एकटा उत्तरदायी तालिका क उपयोग कए कए .table-responsive{-sm|-md|-lg|-xl}.
ऊर्ध्वाधर कतरन/छटना
प्रतिक्रियाशील तालिकाक कें उपयोग करय छै overflow-y: hidden, जे कोनों सामग्री कें क्लिप करय छै जे तालिका कें निचला या ऊपरी किनारे सं आगू बढ़य छै. विशेष रूप सं, इ ड्रॉपडाउन मेनू आ अन्य थर्ड पार्टी विजेट कें क्लिप ऑफ कयर सकय छै.
हमेशा प्रतिक्रियाशील
हर ब्रेकपॉइंट कें पार, .table-responsiveक्षैतिज रूप सं स्क्रॉल करय वाला तालिकाक कें लेल उपयोग करूं.
# 2019।
शीर्षक
शीर्षक
शीर्षक
शीर्षक
शीर्षक
शीर्षक
शीर्षक
शीर्षक
शीर्षक
१
कक्ष
कक्ष
कक्ष
कक्ष
कक्ष
कक्ष
कक्ष
कक्ष
कक्ष
२
कक्ष
कक्ष
कक्ष
कक्ष
कक्ष
कक्ष
कक्ष
कक्ष
कक्ष
३
कक्ष
कक्ष
कक्ष
कक्ष
कक्ष
कक्ष
कक्ष
कक्ष
कक्ष
ब्रेकपॉइंट विशिष्ट
.table-responsive{-sm|-md|-lg|-xl}कोनों विशेष ब्रेकपॉइंट तइक रिस्पांसिव टेबल बनावा कें लेल जरूरत कें अनुसार उपयोग करूं . ओहि ब्रेकपॉइंट सं आओर ऊपर, टेबल सामान्य व्यवहार करत आओर क्षैतिज रूप सं स्क्रॉल नहि करत.
ई तालिकाक कें टूटल प्रतीत भ सकय छै, जब तइक ओकर प्रतिक्रियाशील शैली विशिष्ट दृश्यपोर्ट चौड़ाई पर लागू नै भ जाय.