दस्तऐवजीकरण आणि टेबल्सच्या स्टाइलची निवड करण्यासाठी उदाहरणे (जावास्क्रिप्ट प्लगइनमध्ये त्यांचा प्रचलित वापर दिल्याने) बूटस्ट्रॅपसह.
या पृष्ठावर
आढावा
कॅलेंडर आणि तारीख निवडक<table> यांसारख्या तृतीय-पक्ष विजेट्समध्ये घटकांच्या व्यापक वापरामुळे , बूटस्ट्रॅपचे टेबल्स निवडले जातात . कोणत्याही मध्ये बेस क्लास जोडा , नंतर आमच्या पर्यायी सुधारक वर्ग किंवा सानुकूल शैलींसह विस्तारित करा. सर्व सारणी शैली बूटस्ट्रॅपमध्ये वारशाने मिळत नाहीत, याचा अर्थ कोणत्याही नेस्टेड टेबल्स पालकांपासून स्वतंत्रपणे शैलीबद्ध केल्या जाऊ शकतात..table<table>
सर्वात मूलभूत टेबल मार्कअप वापरून, .tableबूटस्ट्रॅपमध्ये आधारित सारण्या कशा दिसतात ते येथे आहे.
#
पहिला
शेवटचा
हाताळा
१
खूण करा
ओटो
@mdo
2
जेकब
थॉर्नटन
@फॅट
3
लॅरी द बर्ड
@ट्विटर
<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>मिळते आणि ते डीफॉल्टनुसार शीर्षस्थानी संरेखित केले जातात. आवश्यक तेथे पुन्हा संरेखित करण्यासाठी अनुलंब संरेखित वर्ग वापरा .
मथळा १
मथळा 2
मथळा 3
मथळा 4
हा सेल 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
2
जेकब
थॉर्नटन
@फॅट
3
लॅरी द बर्ड
@ट्विटर
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
आपण <caption>टेबलच्या शीर्षस्थानी देखील सोबत ठेवू शकता .caption-top.
वापरकर्त्यांची यादी
#
पहिला
शेवटचा
हाताळा
१
खूण करा
ओटो
@mdo
2
जेकब
थॉर्नटन
@फॅट
3
लॅरी
पक्षी
@ट्विटर
<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>
प्रतिसाद सारण्या
रिस्पॉन्सिव्ह टेबल्स सहजतेने टेबल्स क्षैतिजरित्या स्क्रोल करण्याची परवानगी देतात. कोणत्याही टेबलला सर्व व्ह्यूपोर्टवर a .tableसह रॅप करून प्रतिसादात्मक बनवा .table-responsive. किंवा, वापरून जास्तीत जास्त ब्रेकपॉईंट निवडा ज्यामध्ये प्रतिसाद तक्ता असेल .table-responsive{-sm|-md|-lg|-xl|-xxl}.
अनुलंब क्लिपिंग/ट्रंकेशन
रिस्पॉन्सिव्ह टेबल्सचा वापर करतात overflow-y: hidden, जे टेबलच्या तळाशी किंवा वरच्या कडांच्या पलीकडे जाणारी कोणतीही सामग्री काढून टाकते. विशेषतः, हे ड्रॉपडाउन मेनू आणि इतर तृतीय-पक्ष विजेट बंद करू शकते.
नेहमी प्रतिसाद
प्रत्येक ब्रेकपॉइंटवर, .table-responsiveक्षैतिज स्क्रोलिंग टेबलसाठी वापरा.
.table-responsive{-sm|-md|-lg|-xl|-xxl}विशिष्ट ब्रेकपॉइंटपर्यंत प्रतिसादात्मक सारण्या तयार करण्यासाठी आवश्यकतेनुसार वापरा . त्या ब्रेकपॉईंटपासून आणि वर, टेबल सामान्यपणे वागेल आणि क्षैतिजरित्या स्क्रोल होणार नाही.
विशिष्ट व्ह्यूपोर्ट रुंदीवर त्यांच्या प्रतिसादात्मक शैली लागू होईपर्यंत या सारण्या तुटलेल्या दिसू शकतात.
फॅक्टर व्हेरिएबल्स ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) हे टेबल वेरिएंटमधील कॉन्ट्रास्ट निर्धारित करण्यासाठी वापरले जातात.
प्रकाश आणि गडद टेबल प्रकारांव्यतिरिक्त, थीम रंग $table-bg-levelव्हेरिएबलद्वारे हलके केले जातात.