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