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>

ਆਪਣੇ ਅਨੁਸਾਰ ਕਰੋ