Source

कोश्टकां

बूटस्ट्रॅपा वांगडा कोश्टकांचे ऑप्ट-इन स्टायलिंग खातीर दस्तावेजीकरण आनी उदाहरणां (जावास्क्रिप्ट प्लगइनांत तांचो प्रचलित वापर पळयल्यार).

उदाहरणां

कॅलेंडर आनी तारीख पिकर सारकिल्या तिसऱ्या पक्षाच्या विजेटांतल्यान कोश्टकांचो व्यापक वापर जाल्ल्यान, आमी आमचीं कोश्टकां ऑप्ट-इन करपाक डिझायन केल्यात . .tableफकत खंयच्याय कडेन बेस क्लास जोडात <table>, मागीर सानुकूल शैली वा आमच्या वेगवेगळ्या समाविष्ट केल्ल्या संशोधक वर्गां वांगडा विस्तार करात.

सगळ्यांत मुळावें कोश्टक मार्कअप वापरून, हांगा .tableBootstrap त -आधारीत कोश्टकां कशीं दिसतात तें पळयात. सगळ्यो कोश्टक शैली बूटस्ट्रॅप 4 त वारसा मेळ्ळ्यात , म्हळ्यार खंयचेय नेस्टेड कोश्टक पालकाच्याच पद्दतीन शैली करतले.

# 1 . पयलें निमाणें हँडल
१ मार्क हें नांव ओटो हांणी केला @mdo हांणी केला
२ जाकोब थॉर्नटन हांणी केला @चरबी
३ लॅरी हांणी केला सुकणें हें @twitter हांणी केला 
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

तुमी रंग उलटूंकय शकतात-काळ्या पार्श्वभूंयेर उजवाड मजकूर-सयत .table-dark.

# 1 . पयलें निमाणें हँडल
१ मार्क हें नांव ओटो हांणी केला @mdo हांणी केला
२ जाकोब थॉर्नटन हांणी केला @चरबी
३ लॅरी हांणी केला सुकणें हें @twitter हांणी केला 
<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

कोश्टक मुखेल पर्याय

कोश्टकां आनी काळो कोश्टकां सारकेंच, संशोधक वर्ग वापरात .thead-lightवा s हळदुवो वा काळो करडो दिसपाक .thead-dark.<thead>

# 1 . पयलें निमाणें हँडल
१ मार्क हें नांव ओटो हांणी केला @mdo हांणी केला
२ जाकोब थॉर्नटन हांणी केला @चरबी
३ लॅरी हांणी केला सुकणें हें @twitter हांणी केला
# 1 . पयलें निमाणें हँडल
१ मार्क हें नांव ओटो हांणी केला @mdo हांणी केला
२ जाकोब थॉर्नटन हांणी केला @चरबी
३ लॅरी हांणी केला सुकणें हें @twitter हांणी केला 
<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table">
  <thead class="thead-light">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

पट्टीदार वळी

.table-stripedभितर खंयचेय कोश्टक ओळींत झेब्रा-स्ट्राइपिंग जोडपाक वापरात <tbody>.

# 1 . पयलें निमाणें हँडल
१ मार्क हें नांव ओटो हांणी केला @mdo हांणी केला
२ जाकोब थॉर्नटन हांणी केला @चरबी
३ लॅरी हांणी केला सुकणें हें @twitter हांणी केला 
<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# 1 . पयलें निमाणें हँडल
१ मार्क हें नांव ओटो हांणी केला @mdo हांणी केला
२ जाकोब थॉर्नटन हांणी केला @चरबी
३ लॅरी हांणी केला सुकणें हें @twitter हांणी केला 
<table class="table table-striped table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

शिमेचेर आशिल्लें मेज

.table-borderedकोश्टक आनी कक्षांच्या सगळ्या वटांनी शिमो खातीर जोडात .

# 1 . पयलें निमाणें हँडल
१ मार्क हें नांव ओटो हांणी केला @mdo हांणी केला
२ जाकोब थॉर्नटन हांणी केला @चरबी
३ लॅरी द बर्ड हांणी केला @twitter हांणी केला 
<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# 1 . पयलें निमाणें हँडल
१ मार्क हें नांव ओटो हांणी केला @mdo हांणी केला
२ जाकोब थॉर्नटन हांणी केला @चरबी
३ लॅरी द बर्ड हांणी केला @twitter हांणी केला 
<table class="table table-bordered table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

होवर करपाक येवपी वळी

.table-hoverएक भितर कोश्टक ओळींचेर होवर स्थिती सक्षम करपाक जोडात <tbody>.

# 1 . पयलें निमाणें हँडल
१ मार्क हें नांव ओटो हांणी केला @mdo हांणी केला
२ जाकोब थॉर्नटन हांणी केला @चरबी
३ लॅरी द बर्ड हांणी केला @twitter हांणी केला 
<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# 1 . पयलें निमाणें हँडल
१ मार्क हें नांव ओटो हांणी केला @mdo हांणी केला
२ जाकोब थॉर्नटन हांणी केला @चरबी
३ लॅरी द बर्ड हांणी केला @twitter हांणी केला 
<table class="table table-hover table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

ल्हान मेज

.table-smसेल पॅडींग अर्दांत कापून कोश्टकां चड संकुचीत करपाक घालचें .

# 1 . पयलें निमाणें हँडल
१ मार्क हें नांव ओटो हांणी केला @mdo हांणी केला
२ जाकोब थॉर्नटन हांणी केला @चरबी
३ लॅरी द बर्ड हांणी केला @twitter हांणी केला 
<table class="table table-sm">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# 1 . पयलें निमाणें हँडल
१ मार्क हें नांव ओटो हांणी केला @mdo हांणी केला
२ जाकोब थॉर्नटन हांणी केला @चरबी
३ लॅरी द बर्ड हांणी केला @twitter हांणी केला 
<table class="table table-sm table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

संदर्भात्मक वर्ग

कोश्टक ओळी वा वैयक्तीक कक्ष रंग दिवपाक संदर्भ वर्ग वापरात.

वर्ग शीर्षक शीर्षक
सक्रीय पेशी पेशी
डिफॉल्ट पेशी पेशी
प्राथमिक पेशी पेशी
दुय्यम पेशी पेशी
येस पेशी पेशी
धोको पेशी पेशी
शिटकावणी पेशी पेशी
माहिती पेशी पेशी
उजवाड पेशी पेशी
काळोख पेशी पेशी 
<!-- On rows -->
<tr class="table-active">...</tr>

<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-active">...</td>

  <td class="table-primary">...</td>
  <td class="table-secondary">...</td>
  <td class="table-success">...</td>
  <td class="table-danger">...</td>
  <td class="table-warning">...</td>
  <td class="table-info">...</td>
  <td class="table-light">...</td>
  <td class="table-dark">...</td>
</tr>

काळ्या कोश्टका वांगडा नेमान कोश्टक पार्श्वभूंय वेरिएंट उपलब्ध नात, पूण, तुमी समान शैली साध्य करपाक मजकूर वा पार्श्वभूंय उपयुक्तताय वापरूं येता.

# 1 . शीर्षक शीर्षक
१ पेशी पेशी
२ पेशी पेशी
३ पेशी पेशी
४ पेशी पेशी
५ पेशी पेशी
६ पेशी पेशी
७ पेशी पेशी
८ पेशी पेशी
९ पेशी पेशी 
<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</td>
</tr>
सहाय्यक तंत्रगिन्यानाक अर्थ दिवप

अर्थ जोडपाक रंग वापरप फकत एक दृश्य संकेत दिता, जो सहाय्यक तंत्रगिन्यानाच्या वापरप्यांक पावोवचो ना – जशें स्क्रीन रीडर. रंगान दाखयल्ली म्हायती एक तर सामुग्रींतल्यानच स्पश्ट आसा (देखीक दिसपी मजकूर), वा पर्यायी साधनां वरवीं आस्पाव केला हाची खात्री करात, जशे की .sr-onlyवर्गा वांगडा लिपयल्लो अतिरिक्त मजकूर.

.tableखंयच्याय कडेन गुठलायून प्रतिसाद दिवपी कोश्टकां तयार करात , अनुक्रमान 576px, 768px, 992px, आनी 1120px मेरेन (पूण समाविष्ट करूंक ना) .table-responsive{-sm|-md|-lg|-xl}दरेक ब्रेकपॉइंटाचेर कोश्टक आडवें स्क्रोल करात .max-width

लक्षांत दवरात की ब्राउझर सद्या श्रेणी संदर्भ क्वेरींक तेंको दिना देखून , आमी ह्या तुळां खातीर चड सुक्ष्मतायेन मोलां वापरून आनी अपूर्णांक रुंदाय आशिल्ल्या उपसर्ग min-आनीmax- दृश्यपोर्टां भोंवतणीं काम करतात (जें उच्च-dpi साधनांचेर कांय अटीं खाला घडूंक शकता, देखीक) हें .

कॅप्शनां

ए <caption>कोश्टकाखातीर शीर्षकाभशेन कार्य करता. स्क्रीन रीडर आशिल्ल्या वापरप्यांक कोश्टक सोदून काडपाक आनी तें कितें तें समजून घेवपाक आनी तें वाचपाचें आसा काय ना तें थारावपाक मदत करता.

वापरप्यांची वळेरी
# 1 . पयलें निमाणें हँडल
१ मार्क हें नांव ओटो हांणी केला @mdo हांणी केला
२ जाकोब थॉर्नटन हांणी केला @चरबी
३ लॅरी हांणी केला सुकणें हें @twitter हांणी केला 
<table class="table">
  <caption>List of users</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="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आडव्या स्क्रोल करपा खातीर कोश्टकां वापरात.

# 1 . शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक
१ पेशी पेशी पेशी पेशी पेशी पेशी पेशी पेशी पेशी
२ पेशी पेशी पेशी पेशी पेशी पेशी पेशी पेशी पेशी
३ पेशी पेशी पेशी पेशी पेशी पेशी पेशी पेशी पेशी 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

ब्रेकपॉइंट विशिश्ट

.table-responsive{-sm|-md|-lg|-xl}एका विशिश्ट ब्रेकपॉइंट मेरेन प्रतिसाद दिवपी कोश्टकां तयार करपाक गरज पडल्यार वापरात . त्या ब्रेकपॉइंटांतल्यान आनी वयर, कोश्टक सामान्यपणान वागतलें आनी आडवें स्क्रोल करचें ना.

# 1 . शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक
१ पेशी पेशी पेशी पेशी पेशी
२ पेशी पेशी पेशी पेशी पेशी
३ पेशी पेशी पेशी पेशी पेशी
# 1 . शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक
१ पेशी पेशी पेशी पेशी पेशी
२ पेशी पेशी पेशी पेशी पेशी
३ पेशी पेशी पेशी पेशी पेशी
# 1 . शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक
१ पेशी पेशी पेशी पेशी पेशी
२ पेशी पेशी पेशी पेशी पेशी
३ पेशी पेशी पेशी पेशी पेशी
# 1 . शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक
१ पेशी पेशी पेशी पेशी पेशी
२ पेशी पेशी पेशी पेशी पेशी
३ पेशी पेशी पेशी पेशी पेशी 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>