बूटस्ट्रैप सूची समूह
मूल सूची समूह
सबसे बुनियादी सूची समूह सूची वस्तुओं के साथ एक अनियंत्रित सूची है:
- पहला आइटम
- दूसरा आइटम
- तीसरा आइटम
एक बुनियादी सूची समूह बनाने के लिए, <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>
सूची समूह बैज के साथ
आप सूची समूह में बैज भी जोड़ सकते हैं। बैज स्वचालित रूप से दाईं ओर स्थित होंगे:
- 12नया
- 5हटाए गए
- 3चेतावनी
बैज बनाने
के लिए, सूची आइटम के अंदर <span>वर्ग के साथ एक तत्व बनाएं:.badge
उदाहरण
<ul class="list-group">
<li class="list-group-item">New <span class="badge">12</span></li>
<li class="list-group-item">Deleted <span class="badge">5</span></li>
<li class="list-group-item">Warnings <span class="badge">3</span></li>
</ul>
लिंक किए गए आइटम के साथ सूची समूह
सूची समूह के आइटम हाइपरलिंक भी हो सकते हैं। यह होवर पर एक ग्रे पृष्ठभूमि रंग जोड़ देगा:
लिंक किए गए आइटम के साथ एक सूची समूह बनाने के लिए, <div>इसके बजाय <ul>
और <a>इसके बजाय उपयोग करें <li>:
उदाहरण
<div class="list-group">
<a href="#" class="list-group-item">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
सक्रिय अवस्था
.activeवर्तमान आइटम को हाइलाइट करने के लिए कक्षा का प्रयोग करें :
उदाहरण
<div class="list-group">
<a href="#" class="list-group-item active">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
अक्षम आइटम
निम्न सूची समूह में एक अक्षम आइटम है:
किसी आइटम को अक्षम करने के लिए, .disabledकक्षा जोड़ें:
उदाहरण
<div class="list-group">
<a href="#" class="list-group-item disabled">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
प्रासंगिक कक्षाएं
प्रासंगिक वर्गों का उपयोग सूची वस्तुओं को रंगने के लिए किया जा सकता है:
- पहला आइटम
- दूसरा आइटम
- तीसरा आइटम
- चौथा आइटम
सूची-वस्तुओं को रंगने की कक्षाएं हैं:
.list-group-item-success, list-group-item-info,
list-group-item-warning, और .list-group-item-danger:
उदाहरण
<ul class="list-group">
<li class="list-group-item list-group-item-success">First item</li>
<li class="list-group-item list-group-item-info">Second item</li>
<li class="list-group-item list-group-item-warning">Third item</li>
<li class="list-group-item list-group-item-danger">Fourth item</li>
</ul>
प्रचलित सामग्री
आप सूची समूह आइटम के अंदर लगभग कोई भी HTML जोड़ सकते हैं।
बूटस्ट्रैप कक्षाएं प्रदान करता है .list-group-item-headingऔर
.list-group-item-textजिनका उपयोग निम्नानुसार किया जा सकता है:
उदाहरण
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">First List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Second List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Third List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
</div>