बूटस्ट्रॅपा वांगडा कोश्टकांचे ऑप्ट-इन स्टायलिंग खातीर दस्तावेजीकरण आनी उदाहरणां (जावास्क्रिप्ट प्लगइनांत तांचे प्रचलित वापर पळयल्यार).
उदाहरणां
कॅलेंडर आनी तारीख पिकर सारकिल्या तिसऱ्या पक्षाच्या विजेटांतल्यान कोश्टकांचो व्यापक वापर जाल्ल्यान, आमी आमचीं कोश्टकां ऑप्ट-इन करपाक डिझायन केल्यात . .tableफकत खंयच्याय कडेन बेस क्लास जोडात <table>, मागीर सानुकूल शैली वा आमच्या वेगवेगळ्या समाविष्ट केल्ल्या संशोधक वर्गां वांगडा विस्तार करात.
सगळ्यांत मुळावें कोश्टक मार्कअप वापरून, हांगा .tableBootstrap त -आधारीत कोश्टकां कशीं दिसतात तें पळयात. सगळ्यो कोश्टक शैली बूटस्ट्रॅप 4 त वारसा मेळ्ळ्यात , म्हळ्यार खंयचेय नेस्टेड कोश्टक पालकाच्याच पद्दतीन शैली करतले.
.table-borderedकोश्टक आनी कक्षांच्या सगळ्या वटांनी शिमो खातीर जोडात .
# 1 .
पयलें
निमाणें
हँडल
१
मार्क हें नांव
ओटो हांणी केला
@mdo हांणी केला
२
जाकोब
थॉर्नटन हांणी केला
@चरबी
३
लॅरी द बर्ड हांणी केला
@twitter हांणी केला
<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>
# 1 .
पयलें
निमाणें
हँडल
१
मार्क हें नांव
ओटो हांणी केला
@mdo हांणी केला
२
जाकोब
थॉर्नटन हांणी केला
@चरबी
३
लॅरी द बर्ड हांणी केला
@twitter हांणी केला
<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>
<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काळ्या मेजाचेरूय वापरूं येता.
# 1 .
पयलें
निमाणें
हँडल
१
मार्क हें नांव
ओटो हांणी केला
@mdo हांणी केला
२
जाकोब
थॉर्नटन हांणी केला
@चरबी
३
लॅरी द बर्ड हांणी केला
@twitter हांणी केला
<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>.
# 1 .
पयलें
निमाणें
हँडल
१
मार्क हें नांव
ओटो हांणी केला
@mdo हांणी केला
२
जाकोब
थॉर्नटन हांणी केला
@चरबी
३
लॅरी द बर्ड हांणी केला
@twitter हांणी केला
<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>
# 1 .
पयलें
निमाणें
हँडल
१
मार्क हें नांव
ओटो हांणी केला
@mdo हांणी केला
२
जाकोब
थॉर्नटन हांणी केला
@चरबी
३
लॅरी द बर्ड हांणी केला
@twitter हांणी केला
<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>
<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>
# 1 .
पयलें
निमाणें
हँडल
१
मार्क हें नांव
ओटो हांणी केला
@mdo हांणी केला
२
जाकोब
थॉर्नटन हांणी केला
@चरबी
३
लॅरी द बर्ड हांणी केला
@twitter हांणी केला
<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वर्गा वांगडा लिपयल्लो अतिरिक्त मजकूर.
ए <caption>कोश्टकाखातीर शीर्षकाभशेन कार्य करता. स्क्रीन रीडर आशिल्ल्या वापरप्यांक कोश्टक सोदून काडपाक आनी तें कितें तें समजून घेवपाक आनी तें वाचपाचें आसा काय ना तें थारावपाक मदत करता.
वापरप्यांची वळेरी
# 1 .
पयलें
निमाणें
हँडल
१
मार्क हें नांव
ओटो हांणी केला
@mdo हांणी केला
२
जाकोब
थॉर्नटन हांणी केला
@चरबी
३
लॅरी हांणी केला
सुकणें हें
@twitter हांणी केला
<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>
प्रतिसाद दिवपी कोश्टकां
प्रतिसाद दिवपी कोश्टकांक लागून कोश्टकां आडवें स्क्रोल करपाक मेळटात. .tableएक with रेप करून खंयच्याय कोश्टकाक सगळ्या व्यूपोर्टां वयल्यान प्रतिसाद दिवपी करात .table-responsive. वा, वापरून चडांत चड ब्रेकपॉइंट निवडात जाचे कडेन प्रतिसाद दिवपी कोश्टक आसपाक जाय .table-responsive{-sm|-md|-lg|-xl}.
उबें क्लिपिंग/ट्रंकेशन
प्रतिसाद दिवपी कोश्टक वापरतात overflow-y: hidden, जे कोश्टकाच्या सकयल्या वा वयल्या कांठां भायर वचपी खंयचीय सामुग्री क्लिप करता. खासा करून, हाका लागून ड्रॉपडावन मेनू आनी हेर तिसऱ्या पक्षाचे विजेट क्लिप ऑफ करूंक शकता.
सदांच प्रतिसाद दिवपी
दर एका ब्रेकपॉइंटाचेर, .table-responsiveआडव्या स्क्रोल करपा खातीर कोश्टकां वापरात.