Bootstrap 5 तालिका

बुनियादी टेबल

एक बुनियादी Bootstrap 5 टेबल कुछ आंतरिक पैडिंग और होरिज़न्टल डिवाइडर रखता है。

.table टेबल को बुनियादी स्टाइल जोड़ा गया है:

उदाहरण

स्वयं प्रयोग करें

रेतीली पंक्ति

.table-striped टेबल में झांझरे रंग की रेतीली जोड़ें:

उदाहरण

स्वयं प्रयोग करें

बॉर्डर के टेबल

.table-bordered टेबल और कोष्ठक के सभी बॉर्डर को बॉर्डर जोड़ें:

उदाहरण

स्वयं प्रयोग करें

होवर करने वाली पंक्ति

.table-hover टेबल की पंक्तियों पर होवर इफेक्ट (ग्रे बैकग्राउंड का रंग):

उदाहरण

स्वयं प्रयोग करें

काला/गहरा रंग का टेबल

.table-dark टेबल को काला बैकग्राउंड जोड़ें:

उदाहरण

स्वयं प्रयोग करें

गहरे रंग की रेतीली टेबल

संयोजित .table-dark और .table-striped गहरे रंग की रेतीली टेबल बनाने के लिए आएँ:

उदाहरण

स्वयं प्रयोग करें

होवर करने वाला गहरा रंग का टेबल

.table-hover टेबल की पंक्तियों पर होवर इफेक्ट (ग्रे बैकग्राउंड का रंग):

उदाहरण

स्वयं प्रयोग करें

बिना बॉर्डर का टेबल

.table-borderless टेबल से बॉर्डर को हटाएँ:

उदाहरण

स्वयं प्रयोग करें

कंटेक्स्ट क्लास

कंटेक्स्ट क्लास का उपयोग किया जा सकता है पूरी तालिका (<table>) तालिका पद (<tr>) या तालिका कोष्ठकों (<td>) रंग।

उदाहरण

स्वयं प्रयोग करें

उपलब्ध कंटेक्स्ट क्लास:

क्लास वर्णन
.table-primary नीला: महत्वपूर्ण अभियान के लिए
.table-success हरा: सफलता या सकारात्मक व्यवहार के लिए
.table-danger लाल: खतरा या संभावित नकारात्मक व्यवहार के लिए
.table-info हल्का नीला: मध्यम गतिविधि या ऑपरेशन के लिए
.table-warning नारंगी: चेतावनी के लिए ध्यान देने वाला अभियान
.table-active ग्रे: तालिका पद या तालिका कोष्ठकों पर हॉवर करने वाला रंग लगाया जाता है
.table-secondary ग्रे: नाममात्र अभियान के लिए
.table-light हल्का ग्रे तालिका या तालिका पद का पृष्ठभूमि
.table-dark गहरी ग्रे तालिका या तालिका पद का पृष्ठभूमि

तालिका शीर्षक रंग

आप इसके साथ-साथ किसी भी कंटेक्स्ट क्लास का उपयोग करके केवल तालिका शीर्षक में पृष्ठभूमि रंग जोड़ सकते हैं:

उदाहरण

स्वयं प्रयोग करें

सूक्ष्म तालिका

.table-sm क्लास तालिका को छोटा करने के लिए कोष्ठकों की भरनी को आधा करके काम करती है:

उदाहरण

स्वयं प्रयोग करें

रिस्पोंसिव तालिका

.table-responsive क्लास जब ज़रूरत होने पर तालिका में स्क्रॉल बार जोड़े (जब वह आड़े दिशा में बहुत अधिक होता है):

उदाहरण

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

स्वयं प्रयोग करें

आप यह भी तय कर सकते हैं कि तालिका कब स्क्रॉल बार लेनी चाहिए, इसका फैसला स्क्रीन चौड़ाई के आधार पर होता है:

क्लास स्क्रीन चौड़ाई
.table-responsive-sm < 576px
.table-responsive-md < 768px
.table-responsive-lg < 992px
.table-responsive-xl < 1200px
.table-responsive-xxl < 1400px

उदाहरण

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

स्वयं प्रयोग करें