दस्तऐवजीकरण आणि टेबल्सच्या स्टाइलची निवड करण्यासाठी उदाहरणे (जावास्क्रिप्ट प्लगइनमध्ये त्यांचा प्रचलित वापर दिल्याने) बूटस्ट्रॅपसह.
उदाहरणे
कॅलेंडर आणि तारीख निवडक यांसारख्या तृतीय-पक्ष विजेट्सवर सारण्यांच्या व्यापक वापरामुळे, आम्ही आमची सारणी निवडण्यासाठी डिझाइन केली आहे . फक्त बेस क्लास .tableकोणत्याही मध्ये जोडा <table>, नंतर कस्टम शैली किंवा आमच्या विविध समाविष्ट केलेल्या सुधारक वर्गांसह विस्तारित करा.
सर्वात मूलभूत टेबल मार्कअप वापरून, .tableबूटस्ट्रॅपमध्ये आधारित सारण्या कशा दिसतात ते येथे आहे. सर्व सारणी शैली Bootstrap 4 मध्ये वारशाने मिळतात , याचा अर्थ कोणत्याही नेस्टेड टेबलची शैली पालकांप्रमाणेच केली जाईल.
.table-borderedटेबल आणि सेलच्या सर्व बाजूंच्या सीमांसाठी जोडा .
#
पहिला
शेवटचा
हाताळा
१
खूण करा
ओटो
@mdo
2
जेकब
थॉर्नटन
@फॅट
3
लॅरी द बर्ड
@ट्विटर
<tableclass="table table-bordered"><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>
#
पहिला
शेवटचा
हाताळा
१
खूण करा
ओटो
@mdo
2
जेकब
थॉर्नटन
@फॅट
3
लॅरी द बर्ड
@ट्विटर
<tableclass="table table-bordered table-dark"><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>
बॉर्डरलेस टेबल
.table-borderlessसीमा नसलेल्या टेबलसाठी जोडा .
#
पहिला
शेवटचा
हाताळा
१
खूण करा
ओटो
@mdo
2
जेकब
थॉर्नटन
@फॅट
3
लॅरी द बर्ड
@ट्विटर
<tableclass="table table-borderless"><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>
.table-borderlessगडद टेबलवर देखील वापरले जाऊ शकते.
#
पहिला
शेवटचा
हाताळा
१
खूण करा
ओटो
@mdo
2
जेकब
थॉर्नटन
@फॅट
3
लॅरी द बर्ड
@ट्विटर
<tableclass="table table-borderless table-dark"><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>
फिरवता येण्याजोग्या पंक्ती
.table-hoverटेबलच्या पंक्तींवर होव्हर स्थिती सक्षम करण्यासाठी जोडा <tbody>.
#
पहिला
शेवटचा
हाताळा
१
खूण करा
ओटो
@mdo
2
जेकब
थॉर्नटन
@फॅट
3
लॅरी द बर्ड
@ट्विटर
<tableclass="table table-hover"><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>
#
पहिला
शेवटचा
हाताळा
१
खूण करा
ओटो
@mdo
2
जेकब
थॉर्नटन
@फॅट
3
लॅरी द बर्ड
@ट्विटर
<tableclass="table table-hover table-dark"><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>
लहान टेबल
.table-smसेल पॅडिंग अर्ध्यामध्ये कापून टेबल अधिक कॉम्पॅक्ट करण्यासाठी जोडा .
#
पहिला
शेवटचा
हाताळा
१
खूण करा
ओटो
@mdo
2
जेकब
थॉर्नटन
@फॅट
3
लॅरी द बर्ड
@ट्विटर
<tableclass="table table-sm"><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>
#
पहिला
शेवटचा
हाताळा
१
खूण करा
ओटो
@mdo
2
जेकब
थॉर्नटन
@फॅट
3
लॅरी द बर्ड
@ट्विटर
<tableclass="table table-sm table-dark"><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 rows --><trclass="table-active">...</tr><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-active">...</td><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>
<!-- On rows --><trclass="bg-primary">...</tr><trclass="bg-success">...</tr><trclass="bg-warning">...</tr><trclass="bg-danger">...</tr><trclass="bg-info">...</tr><!-- On cells (`td` or `th`) --><tr><tdclass="bg-primary">...</td><tdclass="bg-success">...</td><tdclass="bg-warning">...</td><tdclass="bg-danger">...</td><tdclass="bg-info">...</td></tr>
सहाय्यक तंत्रज्ञानाचा अर्थ सांगणे
अर्थ जोडण्यासाठी रंग वापरणे केवळ एक दृश्य संकेत प्रदान करते, जे सहाय्यक तंत्रज्ञानाच्या वापरकर्त्यांना - जसे की स्क्रीन वाचकांपर्यंत पोहोचवले जाणार नाही. याची खात्री करा की रंगाने दर्शविलेली माहिती एकतर सामग्रीमधूनच स्पष्ट आहे (उदा. दृश्यमान मजकूर), किंवा पर्यायी माध्यमांद्वारे समाविष्ट केली आहे, जसे की .sr-onlyवर्गात लपवलेला अतिरिक्त मजकूर.
अनुक्रमे 576px, 768px, 992px, आणि 1120px पर्यंत प्रत्येक ब्रेकपॉईंटवर टेबल क्षैतिजरित्या स्क्रोल करून, .tableकोणत्याहीसह रॅप करून प्रतिसादात्मक सारण्या तयार करा ..table-responsive{-sm|-md|-lg|-xl}max-width
लक्षात घ्या की ब्राउझर सध्या श्रेणी संदर्भ क्वेरींना
समर्थन देत नसल्यामुळे
, आम्ही या तुलनेसाठी उच्च सुस्पष्टता असलेली मूल्ये वापरून फ्रॅक्शनल रुंदीसह (जे काही विशिष्ट परिस्थितींमध्ये उच्च-डीपीआय डिव्हाइसेसवर येऊ शकते) सह उपसर्ग min-आणिmax- व्ह्यूपोर्टच्या मर्यादांवर कार्य करतो.
.
मथळे
टेबलसाठी हेडिंग सारखे <caption>कार्य. हे स्क्रीन रीडर असलेल्या वापरकर्त्यांना टेबल शोधण्यात आणि ते कशाबद्दल आहे हे समजून घेण्यात आणि त्यांना ते वाचायचे आहे का ते ठरवण्यात मदत करते.
वापरकर्त्यांची यादी
#
पहिला
शेवटचा
हाताळा
१
खूण करा
ओटो
@mdo
2
जेकब
थॉर्नटन
@फॅट
3
लॅरी
पक्षी
@ट्विटर
<tableclass="table"><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}.
अनुलंब क्लिपिंग/ट्रंकेशन
रिस्पॉन्सिव्ह टेबल्सचा वापर करतात overflow-y: hidden, जे टेबलच्या तळाशी किंवा वरच्या कडांच्या पलीकडे जाणारी कोणतीही सामग्री काढून टाकते. विशेषतः, हे ड्रॉपडाउन मेनू आणि इतर तृतीय-पक्ष विजेट बंद करू शकते.
नेहमी प्रतिसाद
प्रत्येक ब्रेकपॉइंटवर, .table-responsiveक्षैतिज स्क्रोलिंग टेबलसाठी वापरा.
.table-responsive{-sm|-md|-lg|-xl}विशिष्ट ब्रेकपॉइंटपर्यंत प्रतिसादात्मक सारण्या तयार करण्यासाठी आवश्यकतेनुसार वापरा . त्या ब्रेकपॉईंटपासून आणि वर, टेबल सामान्यपणे वागेल आणि क्षैतिजरित्या स्क्रोल होणार नाही.
विशिष्ट व्ह्यूपोर्ट रुंदीवर त्यांच्या प्रतिसादात्मक शैली लागू होईपर्यंत या सारण्या तुटलेल्या दिसू शकतात.