बुटस्ट्र्यापको साथ (जाभास्क्रिप्ट प्लगइनहरूमा तिनीहरूको प्रचलित प्रयोग दिएर) तालिकाहरूको अप्ट-इन स्टाइलको लागि कागजात र उदाहरणहरू।
यस पृष्ठमा
अवलोकन
क्यालेन्डर र मिति पिकरहरू जस्ता तेस्रो-पक्ष विजेटहरूमा तत्वहरूको व्यापक प्रयोगको कारण <table>, बुटस्ट्र्यापको तालिकाहरू अप्ट-इन छन् । .tableकुनै पनि मा आधार वर्ग थप्नुहोस् <table>, त्यसपछि हाम्रो वैकल्पिक परिमार्जक वर्गहरू वा अनुकूलन शैलीहरूसँग विस्तार गर्नुहोस्। सबै तालिका शैलीहरू बुटस्ट्र्यापमा इनहेरिट गरिएका छैनन्, यसको मतलब कुनै पनि नेस्टेड तालिकाहरू अभिभावकबाट स्वतन्त्र रूपमा शैलीबद्ध गर्न सकिन्छ।
सबैभन्दा आधारभूत तालिका मार्कअप प्रयोग गर्दै, यहाँ .tableबुटस्ट्र्यापमा कसरी आधारित तालिकाहरू देखिन्छन्।
#
पहिले
अन्तिम
ह्यान्डल
१
मार्क
ओटो
@mdo
२
याकूब
थोरन्टन
@मोटो
३
ल्यारी द बर्ड
@twitter
<tableclass="table"><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>
भेरियन्टहरू
रङ तालिका, तालिका पङ्क्तिहरू वा व्यक्तिगत कक्षहरूमा सन्दर्भ वर्गहरू प्रयोग गर्नुहोस्।
कक्षा
हेडिङ
हेडिङ
पूर्वनिर्धारित
सेल
सेल
प्राथमिक
सेल
सेल
माध्यमिक
सेल
सेल
सफलता
सेल
सेल
खतरा
सेल
सेल
चेतावनी
सेल
सेल
जानकारी
सेल
सेल
उज्यालो
सेल
सेल
अँध्यारो
सेल
सेल
<!-- On tables --><tableclass="table-primary">...</table><tableclass="table-secondary">...</table><tableclass="table-success">...</table><tableclass="table-danger">...</table><tableclass="table-warning">...</table><tableclass="table-info">...</table><tableclass="table-light">...</table><tableclass="table-dark">...</table><!-- On rows --><trclass="table-primary">...</tr><trclass="table-secondary">...</tr><trclass="table-success">...</tr><trclass="table-danger">...</tr><trclass="table-warning">...</tr><trclass="table-info">...</tr><trclass="table-light">...</tr><trclass="table-dark">...</tr><!-- On cells (`td` or `th`) --><tr><tdclass="table-primary">...</td><tdclass="table-secondary">...</td><tdclass="table-success">...</td><tdclass="table-danger">...</td><tdclass="table-warning">...</td><tdclass="table-info">...</td><tdclass="table-light">...</td><tdclass="table-dark">...</td></tr>
सहयोगी टेक्नोलोजीहरूको अर्थ बुझाउँदै
अर्थ थप्न रङको प्रयोगले मात्र दृश्य सङ्केत प्रदान गर्दछ, जुन सहायक प्रविधिहरूका प्रयोगकर्ताहरूलाई जानकारी दिइने छैन - जस्तै स्क्रिन रिडरहरू। सुनिश्चित गर्नुहोस् कि रङद्वारा संकेत गरिएको जानकारी या त सामग्रीबाट नै स्पष्ट छ (जस्तै देखिने पाठ), वा वैकल्पिक माध्यमहरू मार्फत समावेश गरिएको छ, जस्तै .visually-hiddenकक्षासँग लुकेको अतिरिक्त पाठ।
एक्सेन्टेड टेबलहरू
धारीदार पङ्क्तिहरू
.table-stripedभित्र कुनै पनि तालिका पङ्क्तिमा जेब्रा-स्ट्रिपिङ थप्न प्रयोग गर्नुहोस् <tbody>।
--bs-table-bgहामी अनुकूलन गुणको साथ तालिका कक्षको पृष्ठभूमि सेट गरेर सुरु गर्छौं । सबै तालिका भेरियन्टहरूले त्यसपछि तालिका कक्षहरूलाई रंगीन गर्नको लागि अनुकूल गुण सेट गर्दछ। यस तरिकाले, यदि अर्ध-पारदर्शी रंगहरू तालिका पृष्ठभूमिको रूपमा प्रयोग गरिन्छ भने हामी समस्यामा पर्दैनौं।
box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);त्यसपछि हामी तालिका कक्षहरूमा कुनै पनि निर्दिष्टको माथिको तहमा इनसेट बाकस छाया थप्छौं background-color। किनभने हामीले ठूलो स्प्रेड प्रयोग गर्छौं र कुनै धमिलो छैन, रङ मोनोटोन हुनेछ। देखि--bs-table-accent-bg , हामीसँग पूर्वनिर्धारित बाकस छाया छैन।
जब या त .table-striped, .table-hoverवा .table-activeवर्गहरू थपिन्छन्, --bs-table-accent-bgपृष्ठभूमिलाई रङ लगाउन अर्धपारदर्शी रङमा सेट गरिन्छ।
--bs-table-accent-bgप्रत्येक तालिका भेरियन्टको लागि, हामी त्यो रङको आधारमा उच्चतम कन्ट्रास्ट भएको रङ उत्पन्न गर्छौं । उदाहरण को लागी, को लागि उच्चारण रंग .table-primaryगाढा .table-darkछ जबकि हल्का उच्चारण रंग छ।
पाठ र किनारा रङहरू समान रूपमा उत्पन्न हुन्छन्, र तिनीहरूका रङहरू पूर्वनिर्धारित रूपमा इनहेरिट हुन्छन्।
तालिका कक्षहरू <thead>सधैं तलको ठाडो पङ्क्तिबद्ध हुन्छन्। तालिका कक्षहरूले <tbody>तिनीहरूको पङ्क्तिबद्धता इनहेरिट गर्छन् <table>र पूर्वनिर्धारित रूपमा शीर्षमा पङ्क्तिबद्ध हुन्छन्। जहाँ आवश्यक छ पुन: पङ्क्तिबद्ध गर्न ठाडो पङ्क्तिबद्ध वर्गहरू प्रयोग गर्नुहोस् ।
शीर्षक १
शीर्षक २
हेडिङ ३
हेडिङ ४
यो कक्ष vertical-align: middle;तालिकाबाट प्राप्त हुन्छ
यो कक्ष vertical-align: middle;तालिकाबाट प्राप्त हुन्छ
यो कक्ष vertical-align: middle;तालिकाबाट प्राप्त हुन्छ
यो यहाँ केहि प्लेसहोल्डर पाठ हो, जुन ठाडो ठाडो ठाउँ लिने उद्देश्यले, अघिल्लो कक्षहरूमा ठाडो पङ्क्तिबद्धताले कसरी काम गर्छ भनेर देखाउनको लागि।
यो कक्ष vertical-align: bottom;तालिका पङ्क्तिबाट प्राप्त हुन्छ
यो कक्ष vertical-align: bottom;तालिका पङ्क्तिबाट प्राप्त हुन्छ
यो कक्ष vertical-align: bottom;तालिका पङ्क्तिबाट प्राप्त हुन्छ
यो यहाँ केहि प्लेसहोल्डर पाठ हो, जुन ठाडो ठाडो ठाउँ लिने उद्देश्यले, अघिल्लो कक्षहरूमा ठाडो पङ्क्तिबद्धताले कसरी काम गर्छ भनेर देखाउनको लागि।
यो कक्ष vertical-align: middle;तालिकाबाट प्राप्त हुन्छ
यो कक्ष vertical-align: middle;तालिकाबाट प्राप्त हुन्छ
यो कक्ष शीर्षमा पङ्क्तिबद्ध छ।
यो यहाँ केहि प्लेसहोल्डर पाठ हो, जुन ठाडो ठाडो ठाउँ लिने उद्देश्यले, अघिल्लो कक्षहरूमा ठाडो पङ्क्तिबद्धताले कसरी काम गर्छ भनेर देखाउनको लागि।
<divclass="table-responsive"><tableclass="table align-middle"><thead><tr>
...
</tr></thead><tbody><tr>
...
</tr><trclass="align-bottom">
...
</tr><tr><td>...</td><td>...</td><tdclass="align-top">This cell is aligned to the top.</td><td>...</td></tr></tbody></table></div>
नेस्टिङ
सीमा शैलीहरू, सक्रिय शैलीहरू, र तालिका भेरियन्टहरू नेस्टेड तालिकाहरूद्वारा इनहेरिट गरिएका छैनन्।
कुनै पनि शैलीहरू नेस्टेड तालिकाहरूमा चुहावट हुनबाट रोक्नको लागि , हामी >हाम्रो CSS मा चाइल्ड कम्बिनेटर ( ) चयनकर्ता प्रयोग गर्छौं। हामीले , , र मा सबै tds र ths लाई लक्षित गर्नु पर्ने हुनाले , हाम्रो चयनकर्ता यो बिना धेरै लामो देखिनेछ। जस्तै, हामी सबै s र s लाई लक्षित गर्न बरु अनौठो देखिने चयनकर्ता प्रयोग गर्छौंtheadtbodytfoot.table > :not(caption) > * > *tdth.table प्रयोग गर्छौं , तर कुनै पनि सम्भावित नेस्टेड तालिकाहरू होइन।
ध्यान दिनुहोस् कि यदि तपाइँ <tr>तालिकाको प्रत्यक्ष बच्चाहरूको रूपमा s थप्नुहुन्छ भने, ती पूर्वनिर्धारित <tr>रूपमा र्याप हुनेछन् <tbody>, यसरी हाम्रा चयनकर्ताहरूले उद्देश्य अनुसार काम गर्नेछन्।
शरीर रचना
टेबल टाउको
तालिका र गाढा तालिकाहरू जस्तै, परिमार्जक वर्गहरू प्रयोग गर्नुहोस् .table-lightवा s .table-darkलाई <thead>हल्का वा गाढा खैरो देखाउनको लागि।
एउटा <caption>कार्य तालिकाको लागि हेडिङ जस्तै। यसले स्क्रिन रिडर भएका प्रयोगकर्ताहरूलाई एउटा तालिका फेला पार्न र यो के हो भनेर बुझ्न र उनीहरूले यसलाई पढ्न चाहनुहुन्छ कि भनेर निर्णय गर्न मद्दत गर्छ।
प्रयोगकर्ताहरूको सूची
#
पहिले
अन्तिम
ह्यान्डल
१
मार्क
ओटो
@mdo
२
याकूब
थोरन्टन
@मोटो
३
ल्यारी द बर्ड
@twitter
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
<caption>तपाईले तालिकाको शीर्षमा पनि राख्न सक्नुहुन्छ .caption-top।
प्रयोगकर्ताहरूको सूची
#
पहिले
अन्तिम
ह्यान्डल
१
मार्क
ओटो
@mdo
२
याकूब
थोरन्टन
@मोटो
३
ल्यारी
चरा
@twitter
<tableclass="table caption-top"><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|-xxl}।
ठाडो क्लिपिङ/ट्रङ्केसन
प्रतिक्रियाशील तालिकाहरूले तालिकाको overflow-y: hiddenतल्लो वा माथिल्लो किनारहरूभन्दा बाहिर जाने कुनै पनि सामग्रीलाई क्लिप गर्ने प्रयोग गर्दछ। विशेष गरी, यसले ड्रपडाउन मेनु र अन्य तेस्रो-पक्ष विजेटहरू क्लिप गर्न सक्छ।
सधैं उत्तरदायी
प्रत्येक ब्रेकपोइन्टमा, .table-responsiveतेर्सो रूपमा स्क्रोलिङ तालिकाहरूको लागि प्रयोग गर्नुहोस्।
.table-responsive{-sm|-md|-lg|-xl|-xxl}एक विशेष ब्रेकपोइन्ट सम्म उत्तरदायी तालिकाहरू सिर्जना गर्न आवश्यक रूपमा प्रयोग गर्नुहोस् । त्यो ब्रेकपोइन्ट र माथिबाट, तालिकाले सामान्य रूपमा व्यवहार गर्नेछ र तेर्सो रूपमा स्क्रोल गर्दैन।
यी तालिकाहरू भ्युपोर्ट चौडाइहरूमा तिनीहरूको प्रतिक्रियाशील शैलीहरू लागू नभएसम्म बिग्रेको देखिन सक्छ।