بوت اسپرینگ 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>

ਆਪਣੇ ਹੀ ਅਭਿਆਸ ਕਰੋ