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