twitter-bootstrap
टेबल्स

टिप्पणियों

मूल तालिका

बूटस्ट्रैप .table क्लास का उपयोग करके टेबल के लिए एक कस्टम स्टाइल को परिभाषित करता है। क्षैतिज .table और गद्दी देखने के लिए किसी भी <table> में .table वर्ग जोड़ें:

<table class="table">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td>Bloggs</td></tr>
  </tbody>
</table>

उन्नत स्टाइल के साथ तालिका

बूटस्ट्रैप उन्नत तालिका स्टाइल के लिए कुछ कक्षाएं प्रदान करता है।

धारीदार पंक्तियाँ

आपके पास धारीदार पंक्तियों वाली एक तालिका होगी, यदि आप .table-striped वर्ग जोड़ते हैं:

<table class="table table-striped">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td>Bloggs</td></tr>
  </tbody>
</table>

ध्यान दें कि:

स्ट्राइप्ड टेबल के माध्यम से स्टाइल किया जाता है :nth-child CSS चयनकर्ता, जो इंटरनेट एक्सप्लोरर 8 में उपलब्ध नहीं है।

बॉर्डर टेबल

यदि आपके पास .table-bordered वर्ग जोड़ते हैं, तो आपके पास तालिका और कक्षों के सभी किनारों पर सीमाओं के साथ एक तालिका होगी:

<table class="table table-bordered">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td>Bloggs</td></tr>
  </tbody>
</table>

पंक्तियों पर होवर करें

यदि आप .table-hover वर्ग जोड़ते हैं, तो आपके पास एक पंक्ति होगी जिसमें उपयोगकर्ता रो के ऊपर हाइलाइट किए गए पंक्तियों के साथ होगा:

<table class="table table-hover">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td>Bloggs</td></tr>
  </tbody>
</table>

संघनित मेज

यदि आप .table-condensed वर्ग जोड़ते हैं, तो डिफ़ॉल्ट सेल गद्दी आधे में कट जाएगी, इसलिए आपके पास एक अधिक कॉम्पैक्ट तालिका होगी:

<table class="table table-hover">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td>Bloggs</td></tr>
  </tbody>
</table>

प्रासंगिक कक्षाएं

बूटस्ट्रैप टेबल प्रासंगिक रंगों का समर्थन करते हैं। तालिका पंक्ति या सेल की पृष्ठभूमि का रंग बदलने के लिए आपको बस निम्नलिखित .active वर्गों में से एक को जोड़ना होगा: .active , .success , .info , .warning , .danger

<table class="table">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr class="success"><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td class="info">Bloggs</td></tr>
  </tbody>
</table>

उत्तरदायी तालिकाओं

आपको उत्तरदायी तालिकाएँ बनाने के लिए .table-responsive वर्ग के साथ html कंटेनर में किसी भी .table को लपेटना होगा:

<div class="table-responsive">
  <table class="table">
    <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
    <tbody>
      <tr><td>John</td><td>Doe</td></tr>
      <tr><td>Fred</td><td>Bloggs</td></tr>
    </tbody>
  </table>
</div>

उत्तरदायी टेबल छोटे उपकरणों (<768px) पर क्षैतिज रूप से स्क्रॉल करेंगे। 768px चौड़ी से बड़ी स्क्रीन के लिए कोई अंतर नहीं होगा।

टेबल रिफ़्लो - ऊर्ध्वाधर हेडर

ऊर्ध्वाधर हेडर के साथ एक टेबल प्राप्त करना।

ट्विटर बूटस्ट्रैप अब एक अच्छी तरह से स्वरूपित सामान्य तालिका पर ऊर्ध्वाधर हेडर का समर्थन करता है। इसे प्राप्त करने के लिए बस .table-reflow वर्ग का उपयोग करें

ऊर्ध्वाधर हेडर के साथ एक तालिका प्राप्त करने के लिए एक अच्छी तरह से बनाई गई मेज पर ट्विटर बूटस्ट्रैप .table-reflow वर्ग का उपयोग करें। इसके अतिरिक्त आप इस बार स्तंभों पर .table-hover लिए .table-hover .table-striped और .table-hover का उपयोग करके संयोजन कर सकते हैं।

<table class="table table-striped table-hover table-reflow">
    <thead>
        <tr>
            <th ><strong> First Name: </strong></th>
            <th ><strong> Last Name: </strong></th>
            <th ><strong> Email: </strong></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> John </td>
            <td> Doe </td>
            <td> [email protected] </td>
        </tr>
        <tr>
            <td> Joane </td>
            <td> Donald </td>
            <td> [email protected] </td>
        </tr>
    </tbody>
</table>

आपको यहां v4 अल्फा डॉक्स की जांच करनी चाहिए: twitter-bootstrap .table-reflow