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