कोश्टकां
बूटस्ट्रॅपा वांगडा कोश्टकांचे ऑप्ट-इन स्टायलिंग खातीर दस्तावेजीकरण आनी उदाहरणां (जावास्क्रिप्ट प्लगइनांत तांचो प्रचलित वापर पळयल्यार).
उदाहरणां
कॅलेंडर आनी तारीख पिकर सारकिल्या तिसऱ्या पक्षाच्या विजेटांतल्यान कोश्टकांचो व्यापक वापर जाल्ल्यान, आमी आमचीं कोश्टकां ऑप्ट-इन करपाक डिझायन केल्यात . .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 . | शीर्षक | शीर्षक | शीर्षक | शीर्षक | शीर्षक | शीर्षक | शीर्षक | शीर्षक |
---|---|---|---|---|---|---|---|---|
१ | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी |
२ | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी |
३ | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी | पेशी |