Source

तालिकाएं

बूटस्ट्रैप कन्नै तालिकाएं दी ऑप्ट-इन स्टाइलिंग आस्तै दस्तावेजीकरण ते उदाहरण (जावास्क्रिप्ट प्लगइन्स च उंदा प्रचलित इस्तेमाल दिक्खदे होई)।

उदाहरण दे

कैलेंडर ते तारीख चुनने आह् ले जनेह् त्रीयें पार्टी विजेटें च तालिकाएं दे व्यापक इस्तेमाल दे कारण, असें अपनी तालिकाएं गी ऑप्ट-इन बनाने आस्तै डिजाइन कीता ऐ . बस आधार वर्ग .tableगी कुसै बी च जोड़ो <table>, फिर कस्टम शैलियें कन्नै विस्तार करो जां साढ़े बक्ख-बक्ख शामल संशोधक वर्गें कन्नै।

सब्भनें शा बुनियादी तालिका मार्कअप दा उपयोग करदे होई, इत्थै दिक्खेआ गेआ ऐ जे .tableबूटस्ट्रैप च -आधारत तालिकाएं किस चाल्ली दिक्खियां जंदियां न. सारे तालिका शैलियां बूटस्ट्रैप 4 च विरासत च हासल कीतियां गेदियां न , मतलब कुसै बी नेस्टेड तालिका गी उस्सै चाल्ली शैली कीती जाग जिस्सै चाल्ली माता-पिता गी.

# ऐ	पैहला	अंतम	हैंडल
१	मार्क करो	ओटो ने दी	@ एमडीओ
२	याकूब दा	थॉर्नटन ने दी	@मुट्टा
३	लैरी ने दी	चिड़िया दा	@ ट्विटर पर

<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.

# ऐ	पैहला	अंतम	हैंडल
१	मार्क करो	ओटो ने दी	@ एमडीओ
२	याकूब दा	थॉर्नटन ने दी	@मुट्टा
३	लैरी ने दी	चिड़िया दा	@ ट्विटर पर

<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>

# ऐ	पैहला	अंतम	हैंडल
१	मार्क करो	ओटो ने दी	@ एमडीओ
२	याकूब दा	थॉर्नटन ने दी	@मुट्टा
३	लैरी ने दी	चिड़िया दा	@ ट्विटर पर

# ऐ	पैहला	अंतम	हैंडल
१	मार्क करो	ओटो ने दी	@ एमडीओ
२	याकूब दा	थॉर्नटन ने दी	@मुट्टा
३	लैरी ने दी	चिड़िया दा	@ ट्विटर पर

<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>.

# ऐ	पैहला	अंतम	हैंडल
१	मार्क करो	ओटो ने दी	@ एमडीओ
२	याकूब दा	थॉर्नटन ने दी	@मुट्टा
३	लैरी ने दी	चिड़िया दा	@ ट्विटर पर

<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>

# ऐ	पैहला	अंतम	हैंडल
१	मार्क करो	ओटो ने दी	@ एमडीओ
२	याकूब दा	थॉर्नटन ने दी	@मुट्टा
३	लैरी ने दी	चिड़िया दा	@ ट्विटर पर

<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तालिका ते कोशिकाएं दे सारे पास्सै सीमाएं आस्तै जोड़ो ।

# ऐ	पैहला	अंतम	हैंडल
१	मार्क करो	ओटो ने दी	@ एमडीओ
२	याकूब दा	थॉर्नटन ने दी	@मुट्टा
३	लैरी द बर्ड		@ ट्विटर पर

<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>

# ऐ	पैहला	अंतम	हैंडल
१	मार्क करो	ओटो ने दी	@ एमडीओ
२	याकूब दा	थॉर्नटन ने दी	@मुट्टा
३	लैरी द बर्ड		@ ट्विटर पर

<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>.

# ऐ	पैहला	अंतम	हैंडल
१	मार्क करो	ओटो ने दी	@ एमडीओ
२	याकूब दा	थॉर्नटन ने दी	@मुट्टा
३	लैरी द बर्ड		@ ट्विटर पर

<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>

# ऐ	पैहला	अंतम	हैंडल
१	मार्क करो	ओटो ने दी	@ एमडीओ
२	याकूब दा	थॉर्नटन ने दी	@मुट्टा
३	लैरी द बर्ड		@ ट्विटर पर

<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सेल पैडिंग गी आधे च कट्टियै टेबल गी होर कॉम्पैक्ट बनाने लेई जोड़ो ।

# ऐ	पैहला	अंतम	हैंडल
१	मार्क करो	ओटो ने दी	@ एमडीओ
२	याकूब दा	थॉर्नटन ने दी	@मुट्टा
३	लैरी द बर्ड		@ ट्विटर पर

<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>

# ऐ	पैहला	अंतम	हैंडल
१	मार्क करो	ओटो ने दी	@ एमडीओ
२	याकूब दा	थॉर्नटन ने दी	@मुट्टा
३	लैरी द बर्ड		@ ट्विटर पर

<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>

नियमित तालिका पृष्ठभूमि वेरिएंट डार्क टेबल कन्नै उपलब्ध नेईं न, हालांकि, तुस इसी जनेही शैलियें गी हासल करने आस्तै पाठ जां पृष्ठभूमि उपयोगिताएं दा इस्तेमाल करी सकदे ओ.

# ऐ	हेडिंग करना	हेडिंग करना
१	कोठरी	कोठरी
२	कोठरी	कोठरी
३	कोठरी	कोठरी
४	कोठरी	कोठरी
५	कोठरी	कोठरी
६	कोठरी	कोठरी
७	कोठरी	कोठरी
८	कोठरी	कोठरी
९	कोठरी	कोठरी

<!-- 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- दृश्यपोर्टें दी सीमाएं दे आसपास कम्म करदे आं (जेह् ड़े उच्च-डीपीआई उपकरणें पर किश शर्तें दे अंतर्गत होई सकदे न , मसाल दे तौर पर ) ऐ .

कैप्शन

ए <caption>इक तालिका आस्तै इक हेडिंग दी तर्ज पर कम्म करदा ऐ। एह् स्क्रीन रीडर आह् ले बरतूनी गी इक तालिका गी ढूँढने ते एह् समझने च मदद करदा ऐ जे एह् केह् ऐ ते एह् फैसला करने च मदद करदा ऐ जे ओह् इसगी पढ़ना चांह् दे न जां नेईं।

बरतूनी दी सूची
# ऐ	पैहला	अंतम	हैंडल
१	मार्क करो	ओटो ने दी	@ एमडीओ
२	याकूब दा	थॉर्नटन ने दी	@मुट्टा
३	लैरी ने दी	चिड़िया दा	@ ट्विटर पर

<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इक कन्नै लपेटियै सारे व्यूपोर्टें च कुसै बी तालिका गी उत्तरदायी बनाओ .table-responsive. या, इक ज़्यादा शा ज़्यादा ब्रेकपॉइंट चुनो जिसदे कन्नै .table-responsive{-sm|-md|-lg|-xl}.

ऊर्ध्वाधर कतरन / कटौती करना

प्रतिक्रियाशील तालिकाएं दा इस्तेमाल कीता जंदा ऐ overflow-y: hidden, जेह् ड़ी कुसै बी सामग्री गी क्लिप करदी ऐ जेह् ड़ी तालिका दे निचले जां शीर्शक किनारे थमां परे ऐ । खास करियै, एह् ड्रॉपडाउन मेनू ते होर त्रीयें पार्टी विजेटें गी क्लिप करी सकदा ऐ।

हमेशा जवाबदेही

हर ब्रेकपॉइंट दे पार, .table-responsiveक्षैतिज रूप कन्नै स्क्रॉल करने आह् ली तालिकाएं आस्तै इस्तेमाल करो।

# ऐ	हेडिंग करना	हेडिंग करना	हेडिंग करना	हेडिंग करना	हेडिंग करना	हेडिंग करना	हेडिंग करना	हेडिंग करना	हेडिंग करना
१	कोठरी	कोठरी	कोठरी	कोठरी	कोठरी	कोठरी	कोठरी	कोठरी	कोठरी
२	कोठरी	कोठरी	कोठरी	कोठरी	कोठरी	कोठरी	कोठरी	कोठरी	कोठरी
३	कोठरी	कोठरी	कोठरी	कोठरी	कोठरी	कोठरी	कोठरी	कोठरी	कोठरी

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

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

.table-responsive{-sm|-md|-lg|-xl}इक खास ब्रेकपॉइंट तगर प्रतिक्रियाशील तालिकाएं बनाने लेई जरूरत मताबक इस्तेमाल करो . उस ब्रेकपॉइंट थमां ते उप्पर, तालिका सामान्य रूप कन्नै व्यवहार करग ते क्षैतिज रूप कन्नै स्क्रॉल नेईं करग।

# ऐ	हेडिंग करना	हेडिंग करना	हेडिंग करना	हेडिंग करना	हेडिंग करना
१	कोठरी	कोठरी	कोठरी	कोठरी	कोठरी
२	कोठरी	कोठरी	कोठरी	कोठरी	कोठरी
३	कोठरी	कोठरी	कोठरी	कोठरी	कोठरी

# ऐ	हेडिंग करना	हेडिंग करना	हेडिंग करना	हेडिंग करना	हेडिंग करना
१	कोठरी	कोठरी	कोठरी	कोठरी	कोठरी
२	कोठरी	कोठरी	कोठरी	कोठरी	कोठरी
३	कोठरी	कोठरी	कोठरी	कोठरी	कोठरी

# ऐ	हेडिंग करना	हेडिंग करना	हेडिंग करना	हेडिंग करना	हेडिंग करना
१	कोठरी	कोठरी	कोठरी	कोठरी	कोठरी
२	कोठरी	कोठरी	कोठरी	कोठरी	कोठरी
३	कोठरी	कोठरी	कोठरी	कोठरी	कोठरी

# ऐ	हेडिंग करना	हेडिंग करना	हेडिंग करना	हेडिंग करना	हेडिंग करना
१	कोठरी	कोठरी	कोठरी	कोठरी	कोठरी
२	कोठरी	कोठरी	कोठरी	कोठरी	कोठरी
३	कोठरी	कोठरी	कोठरी	कोठरी	कोठरी

<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>