Bootstrap 5 लिस्ट ग्रुप

बेसिक सूची समूह

सबसे बेसिक सूची समूह अनूप सूची है जो सूची आइटमों को शामिल करती है:

बेसिक सूची समूह बनाने के लिए, क्लास इस्तेमाल करें .list-group के <ul> एलीमेंट और क्लास .list-group-item के <li> एलीमेंट:

उदाहरण

<ul class="list-group">
  <li class="list-group-item">पहला आइटम</li>
  <li class="list-group-item">दूसरा आइटम</li>
  <li class="list-group-item">तीसरा आइटम</li>
</ul>

खुद संभालें

सक्रिय स्थिति

कृपया इस्तेमाल करें .active क्लास के द्वारा वर्तमान पद को उभारा:

उदाहरण

<ul class="list-group">
  <li class="list-group-item active">सक्रिय पद</li>
  <li class="list-group-item">दूसरा आइटम</li>
  <li class="list-group-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">पहला वस्तु</a>
  <a href="#" class="list-group-item list-group-item-action">दूसरा वस्तु</a>
  <a href="#" class="list-group-item list-group-item-action">तीसरा आइटम</a>
</div>

खुद संभालें

असक्रिय आइटम

.disabled क्लास असक्रिय आइटम को उष्ण रंग का लेख जोड़ती है. जब लिंक पर उपयोग किया जाता है, तो हॉवर इफेक्ट निकाल देती है:

उदाहरण

<div class="list-group">
  <a href="#" class="list-group-item disabled">असक्रिय आइटम</a>
  <a href="#" class="list-group-item disabled">असक्रिय आइटम</a>
  <a href="#" class="list-group-item">तीसरा आइटम</a>
</div>

खुद संभालें

किनारा हटाया गया है

उपयोग करके .list-group-flush क्लास को चारों ओर किनारा और गोलाकार काट रहा है:

उदाहरण

<ul class="list-group list-group-flush">
  <li class="list-group-item">पहला आइटम</li>
  <li class="list-group-item">दूसरा आइटम</li>
  <li class="list-group-item">तीसरा आइटम</li>
  <li class="list-group-item">चौथा आइटम</li>
</ul>

खुद संभालें

संख्यांकित सूची समूह

उपयोग करके .list-group-numbered क्लास को आगे की गिनती वाली सूची आइटम बनाती है:

उदाहरण

<ol class="list-group list-group-numbered">
  <li class="list-group-item">पहला आइटम</li>
  <li class="list-group-item">दूसरा आइटम</li>
  <li class="list-group-item">तीसरा आइटम</li>
</ol>

खुद संभालें

स्तरीय सूची समूह

अगर आप चाहते हैं कि सूची आइटम होगा निश्चित रूप से आड़ा दिखाया जाए (किनारे किनारे में बदले जाए) तो .list-group-horizontal क्लास को .list-group:

उदाहरण

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">पहला आइटम</li>
  <li class="list-group-item">दूसरा आइटम</li>
  <li class="list-group-item">तीसरा आइटम</li>
  <li class="list-group-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">सफल आइटम</li>
  <li class="list-group-item list-group-item-secondary">द्वितीयक आइटम</li>
  <li class="list-group-item list-group-item-info">सूचना आइटम</li>
  <li class="list-group-item list-group-item-warning">चेतावनी आइटम</li>
  <li class="list-group-item list-group-item-danger">खतरा आइटम</li>
  <li class="list-group-item list-group-item-primary">प्राथमिक आइटम</li>
  <li class="list-group-item list-group-item-dark">अंधेरा आइटम</li>
  <li class="list-group-item list-group-item-light">सफेद आइटम</li>
</ul>

खुद संभालें

पारिपार्श्विक वर्ग वाला लिंक पदार्थ

उदाहरण

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">एक्शन आइटम</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">विजयी आइटम</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">द्वितीयक आइटम</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">सूचना आइटम</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">चेतावनी आइटम</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">डैंजर आइटम</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">प्राइमरी आइटम</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">डार्क आइटम</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">लाइट आइटम</a>
</div>

खुद संभालें

बैज सहित सूची समूह

को .badge क्लास और utility/helper क्लास को जोड़े जाने पर, सूची समूह में मेडल जोड़ा जा सकता है:

उदाहरण

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    इनबॉक्स
    <span class="badge bg-primary rounded-pill">12</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    विज्ञापन ईमेल
    <span class="badge bg-primary rounded-pill">50</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    ठोस टोकरी
    <span class="badge bg-primary rounded-pill">99</span>
  </li>
</ul>

खुद संभालें