Source

तालिकाएँ

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

उदाहरण के लिये

कैलेंडर आरू डेट पिकर जैसनऽ थर्ड-पार्टी विजेट भर म॑ टेबल केरऽ व्यापक उपयोग के कारण, हम अपनऽ टेबल क॑ ऑप्ट-इन लेली डिजाइन करल॑ छै . .tableबस कोनो मे बेस क्लास जोड़ू <table>, फेर कस्टम स्टाइल या हमर विभिन्न शामिल संशोधक वर्ग के संग विस्तार करू.

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

# 2019। पहिल अंतिम संभालनाइ
१ मार्क ओटो @ mdo
२ याकूब थॉर्नटन @मोट
३ लैरी चिड़ै के @ ट्विटर पर 
<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.

# 2019। पहिल अंतिम संभालनाइ
१ मार्क ओटो @ mdo
२ याकूब थॉर्नटन @मोट
३ लैरी चिड़ै के @ ट्विटर पर 
<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>

# 2019। पहिल अंतिम संभालनाइ
१ मार्क ओटो @ mdo
२ याकूब थॉर्नटन @मोट
३ लैरी चिड़ै के @ ट्विटर पर
# 2019। पहिल अंतिम संभालनाइ
१ मार्क ओटो @ mdo
२ याकूब थॉर्नटन @मोट
३ लैरी चिड़ै के @ ट्विटर पर 
<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>.

# 2019। पहिल अंतिम संभालनाइ
१ मार्क ओटो @ mdo
२ याकूब थॉर्नटन @मोट
३ लैरी चिड़ै के @ ट्विटर पर 
<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>
# 2019। पहिल अंतिम संभालनाइ
१ मार्क ओटो @ mdo
२ याकूब थॉर्नटन @मोट
३ लैरी चिड़ै के @ ट्विटर पर 
<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तालिका आ कोष्ठकक सभ कात सीमाक लेल जोड़ू ।

# 2019। पहिल अंतिम संभालनाइ
१ मार्क ओटो @ mdo
२ याकूब थॉर्नटन @मोट
३ लैरी द बर्ड @ ट्विटर पर 
<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>
# 2019। पहिल अंतिम संभालनाइ
१ मार्क ओटो @ mdo
२ याकूब थॉर्नटन @मोट
३ लैरी द बर्ड @ ट्विटर पर 
<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>.

# 2019। पहिल अंतिम संभालनाइ
१ मार्क ओटो @ mdo
२ याकूब थॉर्नटन @मोट
३ लैरी द बर्ड @ ट्विटर पर 
<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>
# 2019। पहिल अंतिम संभालनाइ
१ मार्क ओटो @ mdo
२ याकूब थॉर्नटन @मोट
३ लैरी द बर्ड @ ट्विटर पर 
<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सेल पैडिंग कें आधा मे काट क टेबल कें बेसि कॉम्पैक्ट बनावा कें लेल जोड़ूं .

# 2019। पहिल अंतिम संभालनाइ
१ मार्क ओटो @ mdo
२ याकूब थॉर्नटन @मोट
३ लैरी द बर्ड @ ट्विटर पर 
<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>
# 2019। पहिल अंतिम संभालनाइ
१ मार्क ओटो @ mdo
२ याकूब थॉर्नटन @मोट
३ लैरी द बर्ड @ ट्विटर पर 
<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>

नियमित तालिका पृष्ठभूमि वेरिएंट डार्क टेबल के साथ उपलब्ध नै छै, तथापि, आप समान शैली प्राप्त करै लेली पाठ या पृष्ठभूमि उपयोगिता के उपयोग कर॑ सकै छै.

# 2019। शीर्षक शीर्षक
१ कक्ष कक्ष
२ कक्ष कक्ष
३ कक्ष कक्ष
४ कक्ष कक्ष
५ कक्ष कक्ष
6 कक्ष कक्ष
7 कक्ष कक्ष
8 कक्ष कक्ष
9 कक्ष कक्ष 
<!-- 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>टेबल के लेल हेडिंग के तरह काज करैत अछि. इ स्क्रीन रीडर वाला उपयोगकर्ताक कें एकटा टेबल खोजय मे मदद करय छै आ इ समझय मे मदद करय छै की इ की बारे मे छै आ इ तय करय मे मदद करय छै की ओ ओकरा पढ़य चाहय छै या नहि.

उपयोगकर्ताओं की सूची
# 2019। पहिल अंतिम संभालनाइ
१ मार्क ओटो @ mdo
२ याकूब थॉर्नटन @मोट
३ लैरी चिड़ै के @ ट्विटर पर 
<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क्षैतिज रूप सं स्क्रॉल करय वाला तालिकाक कें लेल उपयोग करूं.

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

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

.table-responsive{-sm|-md|-lg|-xl}कोनों विशेष ब्रेकपॉइंट तइक रिस्पांसिव टेबल बनावा कें लेल जरूरत कें अनुसार उपयोग करूं . ओहि ब्रेकपॉइंट सं आओर ऊपर, टेबल सामान्य व्यवहार करत आओर क्षैतिज रूप सं स्क्रॉल नहि करत.

# 2019। शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक
१ कक्ष कक्ष कक्ष कक्ष कक्ष
२ कक्ष कक्ष कक्ष कक्ष कक्ष
३ कक्ष कक्ष कक्ष कक्ष कक्ष
# 2019। शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक
१ कक्ष कक्ष कक्ष कक्ष कक्ष
२ कक्ष कक्ष कक्ष कक्ष कक्ष
३ कक्ष कक्ष कक्ष कक्ष कक्ष
# 2019। शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक
१ कक्ष कक्ष कक्ष कक्ष कक्ष
२ कक्ष कक्ष कक्ष कक्ष कक्ष
३ कक्ष कक्ष कक्ष कक्ष कक्ष
# 2019। शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक
१ कक्ष कक्ष कक्ष कक्ष कक्ष
२ कक्ष कक्ष कक्ष कक्ष कक्ष
३ कक्ष कक्ष कक्ष कक्ष कक्ष 
<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>