बूटस्ट्रॅपा वांगडा कोश्टकांचे ऑप्ट-इन स्टायलिंग खातीर दस्तावेजीकरण आनी उदाहरणां (जावास्क्रिप्ट प्लगइनांत तांचो प्रचलित वापर पळयल्यार).
ह्या पानाचेर
नियाळ
<table>कॅलेंडर आनी तारीख पिकर सारकिल्या तिसऱ्या पक्षाच्या विजेटांतल्यान घटकांचो व्यापक वापर जाल्ल्यान , Bootstrap ची कोश्टकां ऑप्ट-इन आसात . .tableखंयच्याय कडेन बेस क्लास जोडात <table>, मागीर आमच्या पर्यायी संशोधक वर्ग वा सानुकूल शैलींनी विस्तार करात. सगळ्यो कोश्टक शैली बूटस्ट्रॅपांत वारसा मेळनात, म्हळ्यार खंयच्याय नेस्टेड कोश्टकांक पालकांतल्यान स्वतंत्र शैली करूं येता.
<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वर्गा वांगडा लिपयल्लो अतिरिक्त मजकूर.
--bs-table-bgआमी सानुकूल गुणधर्म आशिल्ल्या कोश्टक कक्षाची पार्श्वभूंय सेट करून सुरवात करतात . उपरांत सगळे कोश्टक वेरिएंट कोश्टक कक्षांक रंग दिवपाक तो सानुकूल गुणधर्म सेट करतात. अशे तरेन अर्दपारदर्शक रंग कोश्टक पार्श्वभूंय म्हणून वापरल्यार आमी त्रासांत पडनात.
मागीर आमी box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);खंयच्याय निर्दिश्ट केल्ल्याचेर to layer आशिल्ल्या कोश्टक कक्षांचेर एक इनसेट बॉक्स सावळी जोडटात background-color. आमी व्हडलो स्प्रेड वापरतात आनी ब्लर ना म्हणून रंग एकरस आसतलो. डिफॉल्ट रितीन अनसेट केल्ल्यान, आमचे --bs-table-accent-bgकडेन डिफॉल्ट बॉक्स सावळी ना.
दर एका कोश्टक वेरिएंटाक, आमी --bs-table-accent-bgत्या रंगाचेर आदारून सगळ्यांत चड कॉन्ट्रास्ट आशिल्लो रंग तयार करतात. देखीक- खातीर उच्चार रंग .table-primaryगडद आसता जाल्यार .table-darkउच्च उच्चार रंग हळदुवो आसता.
मजकूर आनी शिमेचे रंग सारकेच तयार जातात, आनी तांचे रंग पूर्वनिर्धारीतपणान वारसा मेळटात.
च्या कोश्टक कोशिका <thead>सदांच तळाक उब्यो एके वळीन आसतात. कोश्टक कक्षांत <tbody>तांची संरेखण वारसा दितात <table>आनी पूर्वनिर्धारीतपणान वयल्यान संरेखित करतात. गरज पडटा थंय परतून संरेखित करपाक उबे संरेखित वर्ग वापरात .
शीर्षक 1
शीर्षक 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>a मदीं गुठलायतले , अशे तरेन आमचे निवडक हेतू प्रमाणें काम करतले.<tbody>
शरीररचनाशास्त्र
मेजाचें मुखेली
कोश्टकां आनी काळो कोश्टकां सारकेंच, संशोधक वर्ग वापरात .table-lightवा s हळदुवो वा काळो करडो दिसपाक .table-dark.<thead>
<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एक with रेप करून खंयच्याय कोश्टकाक सगळ्या व्यूपोर्टां वयल्यान प्रतिसाद दिवपी करात .table-responsive. वा, वापरून चडांत चड ब्रेकपॉइंट निवडात जाचे कडेन प्रतिसाद दिवपी कोश्टक आसपाक जाय .table-responsive{-sm|-md|-lg|-xl|-xxl}.
उबें क्लिपिंग/ट्रंकेशन
प्रतिसाद दिवपी कोश्टक वापरतात overflow-y: hidden, जे कोश्टकाच्या सकयल्या वा वयल्या कांठां भायर वचपी खंयचीय सामुग्री क्लिप करता. खासा करून, हाका लागून ड्रॉपडावन मेनू आनी हेर तिसऱ्या पक्षाचे विजेट क्लिप ऑफ करूंक शकता.
सदांच प्रतिसाद दिवपी
दर एका ब्रेकपॉइंटाचेर, .table-responsiveआडव्या स्क्रोल करपा खातीर कोश्टकां वापरात.