Bootstrap 5 List Group

ji chi de liebiaozu

最基本的列表组是包含列表项的无序列表：

如需创建基础列表组，请使用类为 .list-group 的 <ul> 元素和类为 .list-group-item 的 <li> 元素：

实例

    
  <li class="list-group-item">Tasiri na kwararriyar uku</li>
  <li class="list-group-item">Tasiri na kwararriyar biyu</li>
  <li class="list-group-item">Tasiri na kwararriyar uku</li>

亲自试一试

活动状态

请使用 .active 类突出显示当前项目：

实例

    
  <li class="list-group-item active">huodong xiangmu</li>
  <li class="list-group-item">Tasiri na kwararriyar biyu</li>
  <li class="list-group-item">Tasiri na kwararriyar uku</li>

亲自试一试

包含链接项的列表组

如需创建带有链接项目的列表组，请使用 <div> 代替 <ul>，用 <a> 代替 <li>。可选地，如果您想要悬停时的灰色背景色，请添加 .list-group-item-action lei:

实例

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">di yi xiang</a>
  <a href="#" class="list-group-item list-group-item-action">wannan zhangxian</a>
  <a href="#" class="list-group-item list-group-item-action">Tasiri na kwararriyar uku</a>

亲自试一试

Tasiri na kwararriyar uku

.disabled Classi don koyar da wata zuwa tasiri na kwararriyar uku ya kawo wata mai yawa. Idan an amfani dashi a cikin kwayar hukumanci, za a kawo kariya da tasiri na gudanarwa:

实例

<div class="list-group">
  <a href="#" class="list-group-item disabled">Tasiri na kwararriyar uku</a>
  <a href="#" class="list-group-item disabled">Tasiri na kwararriyar uku</a>
  <a href="#" class="list-group-item">Tasiri na kwararriyar uku</a>

亲自试一试

Kawo kariya

Amfani da .list-group-flush Classi don kawo kariya da kare kwaya:

实例

<ul class="list-group list-group-flush">
  <li class="list-group-item">Tasiri na kwararriyar uku</li>
  <li class="list-group-item">Tasiri na kwararriyar biyu</li>
  <li class="list-group-item">Tasiri na kwararriyar uku</li>
  <li class="list-group-item">Tasiri na kwararriyar uku</li>

亲自试一试

Lissafi na numan

Amfani da .list-group-numbered Classi don koyar da wata zuwa liyari da ke da numan a tsaki:

实例

<ol class="list-group list-group-numbered">
  <li class="list-group-item">Tasiri na kwararriyar uku</li>
  <li class="list-group-item">Tasiri na kwararriyar biyu</li>
  <li class="list-group-item">Tasiri na kwararriyar uku</li>
</ol>

亲自试一试

Lissafi na hagu

Idan ka ke so ke koyar da liyari a hanyar hagu (a gudanar a cikin hagu kuma kuma a kai tsaye), ka fi .list-group-horizontal a fi classi shi .list-group：

实例

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">Tasiri na kwararriyar uku</li>
  <li class="list-group-item">Tasiri na kwararriyar biyu</li>
  <li class="list-group-item">Tasiri na kwararriyar uku</li>
  <li class="list-group-item">Tasiri na kwararriyar uku</li>

亲自试一试

Classi na yankin

Classi na yankin za iya amfani domin koyar da wata zuwa liyari na lissafi:

Classi don koyar da wata zuwa liyari na lissafi ne:

实例

亲自试一试

Wakilin da yana da alama

实例

<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>
  Danger item
  Primary item
  Dark item
  Light item

亲自试一试

带徽章的列表组

将 .badge 类与 utility/helper 类结合起来，可在列表组中添加徽章：

实例

亲自试一试