Bootstrap 5 List Group

pangunahing listahan ng grupo

Ang pinakabastang listahan ng grupo ay isang listahan na walang oras na naglalaman ng listahan ng item:

Para makapaglikha ng pangunahing listahan ng grupo, gamit ang klase: .list-group ng <ul> elemento at klase na .list-group-item ng <li> elemento:

Halimbawa

<ul class="list-group">
  <li class="list-group-item">Ika-unang item</li>
  <li class="list-group-item">Ikalawang item</li>
  <li class="list-group-item">Ika-tatlong item</li>
</ul>

Subukan Ngayon

aktibong estado

Gamit: .active gamit ang klase upang highlight ang kasalukuyang item:

Halimbawa

<ul class="list-group">
  <li class="list-group-item active"> aktibong item</li>
  <li class="list-group-item">Ikalawang item</li>
  <li class="list-group-item">Ika-tatlong item</li>
</ul>

Subukan Ngayon

listahan ng grupo na may link

Para makapaglikha ng listahan ng grupo na may link, gamit ang klase: <div> sa halip ng <ul>gamit <a> sa halip ng <li>。Maari mong idagdag ang asul na background color kapag naghover, dagdagin mo: .list-group-item-action uri:

Halimbawa

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action"> unang item</a>
  <a href="#" class="list-group-item list-group-item-action"> pangalawang item</a>
  <a href="#" class="list-group-item list-group-item-action">Ika-tatlong item</a>
</div>

Subukan Ngayon

Item na hindi pinagamit

.disabled Ang klase ay nagdagdag ng mas liit na kulay ng teksto sa item na hindi pinagamit. Kapag ginagamit sa link, awahin ang paghinahan ng hover:

Halimbawa

<div class="list-group">
  <a href="#" class="list-group-item disabled">Item na hindi pinagamit</a>
  <a href="#" class="list-group-item disabled">Item na hindi pinagamit</a>
  <a href="#" class="list-group-item">Ika-tatlong item</a>
</div>

Subukan Ngayon

Aalisin ang border

Gamit .list-group-flush Ang klase ay nag-aalis ng border at rounding corners:

Halimbawa

<ul class="list-group list-group-flush">
  <li class="list-group-item">Ika-unang item</li>
  <li class="list-group-item">Ikalawang item</li>
  <li class="list-group-item">Ika-tatlong item</li>
  <li class="list-group-item">Ikaapat na item</li>
</ul>

Subukan Ngayon

List group na may numero

Gamit .list-group-numbered Ang klase ay gumagawa ng item ng listahan na may numero sa harap:

Halimbawa

<ol class="list-group list-group-numbered">
  <li class="list-group-item">Ika-unang item</li>
  <li class="list-group-item">Ikalawang item</li>
  <li class="list-group-item">Ika-tatlong item</li>
</ol>

Subukan Ngayon

Horizontal list group

Kung gusto ninyong ipakita ang mga item ng listahan nang horizontal (na magkakasamang hindi nagkakalat), magdagdag ng .list-group-horizontal Magdagdag ng klase sa .list-group：

Halimbawa

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">Ika-unang item</li>
  <li class="list-group-item">Ikalawang item</li>
  <li class="list-group-item">Ika-tatlong item</li>
  <li class="list-group-item">Ikaapat na item</li>
</ul>

Subukan Ngayon

Ang mga klase ng konteksto

Ang mga klase ng konteksto ay maaaring magdagdag ng kulay sa item ng listahan:

Ang klase na nagpapatay ng kulay sa item ng listahan ay:

  • .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

Halimbawa

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Matagumpay na 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>

Subukan Ngayon

Maykapiling na link na may uri ng klase

Halimbawa

<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">Mga bagay na mapanganib</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Mga bagay na pangunahin</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Mga bagay na madilim</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">Mga bagay na liwanag</a>
</div>

Subukan Ngayon

Listahan ng grupo na may sinyales

Ibigay .badge Kasama ang klase at utility/helper klase, maaaring idagdag ang sinyales sa listahan ng grupo:

Halimbawa

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Inbox
    <span class="badge bg-primary rounded-pill">12</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Mailing ng Anunsyo
    <span class="badge bg-primary rounded-pill">50</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Tampuhan
    <span class="badge bg-primary rounded-pill">99</span>
  </li>
</ul>

Subukan Ngayon