बूटस्ट्रैप 4 सूची समूह
मूल सूची समूह
सबसे बुनियादी सूची समूह सूची वस्तुओं के साथ एक अनियंत्रित सूची है:
- पहला आइटम
- दूसरा आइटम
- तीसरा आइटम
एक बुनियादी सूची समूह बनाने के लिए, <ul>वर्ग के साथ एक तत्व और वर्ग .list-groupके
<li>साथ तत्वों का उपयोग करें .list-group-item:
उदाहरण
<ul class="list-group">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
सक्रिय अवस्था
- सक्रिय वस्तु
- दूसरा आइटम
- तीसरा आइटम
.activeवर्तमान आइटम को हाइलाइट करने के लिए कक्षा का प्रयोग करें :
उदाहरण
<ul class="list-group">
<li class="list-group-item
active">Active item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
लिंक किए गए आइटम के साथ सूची समूह
लिंक किए गए आइटम के साथ एक सूची समूह बनाने के लिए, <div>के बजाय <ul>
और के <a>बजाय उपयोग करें <li>। वैकल्पिक रूप से, .list-group-item-actionयदि आप होवर पर धूसर पृष्ठभूमि रंग चाहते हैं तो कक्षा जोड़ें:
उदाहरण
<div class="list-group">
<a href="#"
class="list-group-item list-group-item-action">First item</a>
<a
href="#" class="list-group-item list-group-item-action">Second item</a>
<a href="#" class="list-group-item list-group-item-action">Third item</a>
</div>
अक्षम आइटम
.disabledकक्षा अक्षम आइटम में हल्का टेक्स्ट रंग जोड़ती है । और जब लिंक पर उपयोग किया जाता है, तो यह होवर प्रभाव को हटा देगा:
उदाहरण
<div class="list-group">
<a href="#" class="list-group-item disabled">Disabled item</a>
<a href="#"
class="list-group-item disabled">Disabled item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
फ्लश / बॉर्डर हटाएं
.list-group-flushकुछ सीमाओं और गोलाकार कोनों को हटाने के लिए कक्षा का प्रयोग करें :
- पहला आइटम
- दूसरा आइटम
- तीसरा आइटम
- चौथा आइटम
उदाहरण
<ul class="list-group
list-group-flush">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
<li class="list-group-item">Fourth item</li>
</ul>
क्षैतिज सूची समूह
यदि आप चाहते हैं कि सूची आइटम लंबवत के बजाय क्षैतिज रूप से प्रदर्शित हों (एक दूसरे के ऊपर की बजाय कंधे से कंधा मिलाकर), तो इसमें .list-group-horizontalवर्ग जोड़ें .list-group:
- पहला आइटम
- दूसरा आइटम
- तीसरा आइटम
- चौथा आइटम
उदाहरण
<ul class="list-group
list-group-horizontal">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
<li class="list-group-item">Fourth item</li>
</ul>
प्रासंगिक कक्षाएं
प्रासंगिक वर्गों का उपयोग सूची वस्तुओं को रंगने के लिए किया जा सकता है:
- सफलता आइटम
- माध्यमिक वस्तु
- जानकारी आइटम
- चेतावनी आइटम
- खतरे की वस्तु
- प्राथमिक वस्तु
- डार्क आइटम
- हल्की वस्तु
सूची-वस्तुओं को रंगने की कक्षाएं हैं:
.list-group-item-success, list-group-item-secondary, list-group-item-info,
list-group-item-warning, .list-group-item-danger, .list-group-item-primary, list-group-item-darkऔर list-group-item-light,:
उदाहरण
<ul class="list-group">
<li class="list-group-item
list-group-item-success">Success item</li>
<li
class="list-group-item list-group-item-secondary">Secondary item</li>
<li class="list-group-item list-group-item-info">Info item</li>
<li
class="list-group-item list-group-item-warning">Warning item</li>
<li class="list-group-item list-group-item-danger">Danger item</li>
<li class="list-group-item list-group-item-primary">Primary item</li>
<li class="list-group-item list-group-item-dark">Dark item</li>
<li
class="list-group-item list-group-item-light">Light item</li>
</ul>
प्रासंगिक कक्षाओं के साथ आइटम लिंक करें
उदाहरण
<div class="list-group">
<a href="#" class="list-group-item
list-group-item-action">Action item</a>
<a href="#"
class="list-group-item list-group-item-action list-group-item-success">Success item</a>
<a
href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">Info item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-light">Light item</a>
</div>
बैज के साथ सूची समूह
.badgeसूची समूह के अंदर बैज जोड़ने के लिए कक्षाओं को उपयोगिता/सहायक वर्गों के साथ मिलाएं :
- इनबॉक्स 12
- विज्ञापन 50
- कचरा 99
उदाहरण
<ul class="list-group">
<li class="list-group-item d-flex
justify-content-between align-items-center">
Inbox
<span class="badge badge-primary badge-pill">12</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Ads
<span class="badge badge-primary
badge-pill">50</span>
</li>
<li class="list-group-item
d-flex justify-content-between align-items-center">
Junk
<span class="badge badge-primary badge-pill">99</span>
</li>
</ul>
टिप: हमारे बीएस4 यूटिलिटीज चैप्टर में बूटस्ट्रैप 4 यूटिलिटी/हेल्पर क्लासेस के बारे में और पढ़ें ।