Bootstrap 5 జాబితా గ్రూప్

ప్రాథమిక జాబితా గ్రూప్

ప్రాథమిక జాబితా గ్రూప్ అత్యంత సరళమైన జాబితా ఉపయోగించడం ద్వారా సృష్టించబడుతుంది:

ప్రాథమిక జాబితా గ్రూప్ .list-group .list-group-item <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>

స్వయంగా ప్రయత్నించండి