कोश्टकां
बूटस्ट्रॅपा वांगडा कोश्टकांचे ऑप्ट-इन स्टायलिंग खातीर दस्तावेजीकरण आनी उदाहरणां (जावास्क्रिप्ट प्लगइनांत तांचो प्रचलित वापर पळयल्यार).
कॅलेंडर आनी तारीख पिकर सारकिल्या तिसऱ्या पक्षाच्या विजेटांतल्यान कोश्टकांचो व्यापक वापर जाल्ल्यान, आमी आमचीं कोश्टकां ऑप्ट-इन करपाक डिझायन केल्यात . .table
फकत खंयच्याय कडेन बेस क्लास जोडात <table>
, मागीर सानुकूल शैली वा आमच्या वेगवेगळ्या समाविष्ट केल्ल्या संशोधक वर्गां वांगडा विस्तार करात.
सगळ्यांत मुळावें कोश्टक मार्कअप वापरून, हांगा .table
Bootstrap त -आधारीत कोश्टकां कशीं दिसतात तें पळयात. सगळ्यो कोश्टक शैली बूटस्ट्रॅप 4 त वारसा मेळ्ळ्यात , म्हळ्यार खंयचेय नेस्टेड कोश्टक पालकाच्याच पद्दतीन शैली करतले.
# 1 . | पयलें | निमाणें | हँडल |
---|---|---|---|
१ | मार्क हें नांव | ओटो हांणी केला | @mdo हांणी केला |
२ | जाकोब | थॉर्नटन हांणी केला | @चरबी |
३ | लॅरी हांणी केला | सुकणें हें | @twitter हांणी केला |
तुमी रंग उलटूंकय शकतात-काळ्या पार्श्वभूंयेर उजवाड मजकूर-सयत .table-dark
.
# 1 . | पयलें | निमाणें | हँडल |
---|---|---|---|
१ | मार्क हें नांव | ओटो हांणी केला | @mdo हांणी केला |
२ | जाकोब | थॉर्नटन हांणी केला | @चरबी |
३ | लॅरी हांणी केला | सुकणें हें | @twitter हांणी केला |
कोश्टकां आनी काळो कोश्टकां सारकेंच, संशोधक वर्ग वापरात .thead-light
वा s हळदुवो वा काळो करडो दिसपाक .thead-dark
.<thead>
# 1 . | पयलें | निमाणें | हँडल |
---|---|---|---|
१ | मार्क हें नांव | ओटो हांणी केला | @mdo हांणी केला |
२ | जाकोब | थॉर्नटन हांणी केला | @चरबी |
३ | लॅरी हांणी केला | सुकणें हें | @twitter हांणी केला |
# 1 . | पयलें | निमाणें | हँडल |
---|---|---|---|
१ | मार्क हें नांव | ओटो हांणी केला | @mdo हांणी केला |
२ | जाकोब | थॉर्नटन हांणी केला | @चरबी |
३ | लॅरी हांणी केला | सुकणें हें | @twitter हांणी केला |
.table-striped
भितर खंयचेय कोश्टक ओळींत झेब्रा-स्ट्राइपिंग जोडपाक वापरात <tbody>
.
# 1 . | पयलें | निमाणें | हँडल |
---|---|---|---|
१ | मार्क हें नांव | ओटो हांणी केला | @mdo हांणी केला |
२ | जाकोब | थॉर्नटन हांणी केला | @चरबी |
३ | लॅरी हांणी केला | सुकणें हें | @twitter हांणी केला |
# 1 . | पयलें | निमाणें | हँडल |
---|---|---|---|
१ | मार्क हें नांव | ओटो हांणी केला | @mdo हांणी केला |
२ | जाकोब | थॉर्नटन हांणी केला | @चरबी |
३ | लॅरी हांणी केला | सुकणें हें | @twitter हांणी केला |
.table-bordered
कोश्टक आनी कक्षांच्या सगळ्या वटांनी शिमो खातीर जोडात .
# 1 . | पयलें | निमाणें | हँडल |
---|---|---|---|
१ | मार्क हें नांव | ओटो हांणी केला | @mdo हांणी केला |
२ | जाकोब | थॉर्नटन हांणी केला | @चरबी |
३ | लॅरी द बर्ड हांणी केला | @twitter हांणी केला |
# 1 . | पयलें | निमाणें | हँडल |
---|---|---|---|
१ | मार्क हें नांव | ओटो हांणी केला | @mdo हांणी केला |
२ | जाकोब | थॉर्नटन हांणी केला | @चरबी |
३ | लॅरी द बर्ड हांणी केला | @twitter हांणी केला |
.table-borderless
शिमो नाशिल्ल्या कोश्टकाखातीर जोडचें .
# 1 . | पयलें | निमाणें | हँडल |
---|---|---|---|
१ | मार्क हें नांव | ओटो हांणी केला | @mdo हांणी केला |
२ | जाकोब | थॉर्नटन हांणी केला | @चरबी |
३ | लॅरी द बर्ड हांणी केला | @twitter हांणी केला |
.table-borderless
काळ्या मेजाचेरूय वापरूं येता.
# 1 . | पयलें | निमाणें | हँडल |
---|---|---|---|
१ | मार्क हें नांव | ओटो हांणी केला | @mdo हांणी केला |
२ | जाकोब | थॉर्नटन हांणी केला | @चरबी |
३ | लॅरी द बर्ड हांणी केला | @twitter हांणी केला |
.table-hover
एक भितर कोश्टक ओळींचेर होवर स्थिती सक्षम करपाक जोडात <tbody>
.
# 1 . | पयलें | निमाणें | हँडल |
---|---|---|---|
१ | मार्क हें नांव | ओटो हांणी केला | @mdo हांणी केला |
२ | जाकोब | थॉर्नटन हांणी केला | @चरबी |
३ | लॅरी द बर्ड हांणी केला | @twitter हांणी केला |
# 1 . | पयलें | निमाणें | हँडल |
---|---|---|---|
१ | मार्क हें नांव | ओटो हांणी केला | @mdo हांणी केला |
२ | जाकोब | थॉर्नटन हांणी केला | @चरबी |
३ | लॅरी द बर्ड हांणी केला | @twitter हांणी केला |
.table-sm
सेल पॅडींग अर्दांत कापून कोश्टकां चड संकुचीत करपाक घालचें .
# 1 . | पयलें | निमाणें | हँडल |
---|---|---|---|
१ | मार्क हें नांव | ओटो हांणी केला | @mdo हांणी केला |
२ | जाकोब | थॉर्नटन हांणी केला | @चरबी |
३ | लॅरी द बर्ड हांणी केला | @twitter हांणी केला |
# 1 . | पयलें | निमाणें | हँडल |
---|---|---|---|
१ | मार्क हें नांव | ओटो हांणी केला | @mdo हांणी केला |
२ | जाकोब | थॉर्नटन हांणी केला | @चरबी |
३ | लॅरी द बर्ड हांणी केला | @twitter हांणी केला |
कोश्टक ओळी वा वैयक्तीक कक्ष रंग दिवपाक संदर्भ वर्ग वापरात.
वर्ग | शीर्षक | शीर्षक |
---|---|---|
सक्रीय | पेशी | पेशी |
डिफॉल्ट | पेशी | पेशी |
प्राथमिक | पेशी | पेशी |
दुय्यम | पेशी | पेशी |
येस | पे��ी | पेशी |
धोको | पेशी | पेशी |
शिटकावणी | पेशी | पेशी |
माहिती | पेशी | पेशी |
उजवाड | पेशी | पेशी |
काळोख | पेशी | पेशी |
काळ्या कोश्टका वांगडा नेमान कोश्टक पार्श्वभूंय वेरिएंट उपलब्ध नात, पूण, तुमी समान शैली साध्य करपाक मजकूर वा पार्श्वभूंय उपयुक्तताय वापरूं येता.
# 1 . | शीर्षक | शीर्षक |
---|---|---|
१ | पेशी | पेशी |
२ | पेशी | पेशी |
३ | पेशी | पेशी |
४ | पेशी | पेशी |
५ | पेशी | पेशी |
६ | पेशी | पेशी |
७ | पेशी | पेशी |
८ | पेशी | पेशी |
९ | पेशी | पेशी |
सहाय्यक तंत्रगिन्यानाक अर्थ दिवप
अर्थ जोडपाक रंग वापरप फकत एक दृश्य संकेत दिता, जो सहाय्यक तंत्रगिन्यानाच्या वापरप्यांक पावोवचो ना – जशें स्क्रीन रीडर. रंगान दाखयल्ली म्हायती एक तर सामुग्रींतल्यानच स्पश्ट आसा (देखीक दिसपी मजकूर), वा पर्यायी साधनां वरवीं आस्पाव केला हाची खात्री करात, जशे की .sr-only
वर्गा वांगडा लिपयल्लो अतिरिक्त मजकूर.
.table
खंयच्याय कडेन गुठलायून प्रतिसाद दिवपी कोश्टकां तयार करात , अनुक्रमान 576px, 768px, 992px, आनी 1120px मेरेन (पूण समाविष्ट करूंक ना) .table-responsive{-sm|-md|-lg|-xl}
दरेक ब्रेकपॉइंटाचेर कोश्टक आडवें स्क्रोल करात .max-width
लक्षांत दवरात की ब्राउझर सद्या श्रेणी संदर्भ क्वेरींक तेंको दिना देखून , आमी ह्या तुळां खातीर चड सुक्ष्मतायेन मोलां वापरून आनी अपूर्णांक रुंदाय आशिल्ल्या उपसर्ग min-
आनीmax-
दृश्यपोर्टां भोंवतणीं काम करतात (जें उच्च-dpi साधनांचेर कांय अटीं खाला घडूंक शकता, देखीक) हें .
ए <caption>
कोश्टकाखातीर शीर्षकाभशेन कार्य करता. स्क्रीन रीडर आशिल्ल्या वापरप्यांक कोश्टक सोदून काडपाक आनी तें कितें तें समजून घेवपाक आनी तें वाचपाचें आसा काय ना तें थारावपाक मदत करता.
# 1 . | पयलें | निमाणें | हँडल |
---|---|---|---|
१ | मार्क हें नांव | ओटो हांणी केला | @mdo हांणी केला |
२ | जाकोब | थॉर्नटन हांणी केला | @चरबी |
३ | लॅरी हांणी केला | सुकणें हें | @twitter हांणी केला |
प्रतिसाद दिवपी कोश्टकांक लागून कोश्टकां आडवें स्क्रोल करपाक मेळटात. .table
एक with रेप करून खंयच्याय कोश्टकाक सगळ्या व्यूपोर्टां वयल्यान प्रतिसाद दिवपी करात .table-responsive
. वा, वापरून चडांत चड ब्रेकपॉइंट निवडात जाचे कडेन प्रतिसाद दिवपी कोश्टक आसपाक जाय .table-responsive{-sm|-md|-lg|-xl}
.
उबें क्लिपिंग/ट्रंकेशन
प्रतिसाद दिवपी कोश्टक वापरतात overflow-y: hidden
, जे कोश्टकाच्या सकयल्या वा वयल्या कांठां भायर वचपी खंयचीय सामुग्री क्लिप करता. खासा करून, हाका लागून ड्रॉपडावन मेनू आनी हेर तिसऱ्या पक्षाचे विजेट क्लिप ऑफ करूंक शकता.
दर एका ब्रेकपॉइंटाचेर, .table-responsive
आडव्या स्क्रोल करपा खातीर कोश्टकां वापरात.
# 1 . | शीर्षक | शीर्षक | शीर्षक | शीर्षक | शीर्षक | शीर्षक | शीर्षक | शीर्षक | शीर्षक |
---|---|---|---|---|---|---|---|---|---|
१ | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी |
२ | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी |
३ | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी |
.table-responsive{-sm|-md|-lg|-xl}
एका विशिश्ट ब्रेकपॉइंट मेरेन प्रतिसाद दिवपी कोश्टकां तयार करपाक गरज पडल्यार वापरात . त्या ब्रेकपॉइंटांतल्यान आनी वयर, कोश्टक सामान्यपणान वागतलें आनी आडवें स्क्रोल करचें ना.
विशिश्ट दृश्यपोर्ट रुंदायेचेर तांची प्रतिसाद शैली लागू जाय मेरेन हीं कोश्टकां मोडिल्लीं दिसूं येतात.
# 1 . | शीर्षक | शीर्षक | शीर्षक | शीर्षक | शीर्षक | शीर्षक | शीर्षक | शीर्षक |
---|---|---|---|---|---|---|---|---|
१ | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी |
२ | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी |
३ | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी |
# 1 . | शीर्षक | शीर्षक | शीर्षक | शीर्षक | शीर्षक | शीर्षक | शीर्षक | शीर्षक |
---|---|---|---|---|---|---|---|---|
१ | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी |
२ | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी |
३ | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी |
# 1 . | शीर्षक | शीर्षक | शीर्षक | शीर्षक | शीर्षक | शीर्षक | शीर्षक | शीर्षक |
---|---|---|---|---|---|---|---|---|
१ | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी |
२ | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी |
३ | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी |
# 1 . | शीर्षक | शीर्षक | शीर्षक | शीर्षक | शीर्षक | शीर्षक | शीर्षक | शीर्षक |
---|---|---|---|---|---|---|---|---|
१ | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी |
२ | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी |
३ | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी |