Bootstrap 5 ການແບ່ງກຸ່ມລາຍການ

基础的列表组

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

如需创建基础列表组，请使用类为 .list-group 的

    元素和类为 .list-group-item 的
  • 元素：

    ຄວາມຄິດທີ່ມີຫນັງ

    <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">ຊະນິດທີສອງ</li>
  <li class="list-group-item">ຊະນິດທີສາມ</li>
</ul>

    ສອບທາງເອງ

    包含链接项的列表组

    如需创建带有链接项目的列表组，请使用

    代替

    禁用项目

    .disabled 类为禁用的项目添加了较浅的文本颜色。当在链接上使用时，将去除悬停效果：

    ຄວາມຄິດທີ່ມີຫນັງ

    <div class="list-group">
  被禁用的项目
  被禁用的项目
  第三项
</div>

    ສອບທາງເອງ

    删除边框

    使用 .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 类创建前面带有数字的列表项：

    ຄວາມຄິດທີ່ມີຫນັງ

      
  <li class="list-group-item">ຊະນິດທີໜຶ່ງ</li>
  <li class="list-group-item">ຊະນິດທີສອງ</li>
  <li class="list-group-item">ຊະນິດທີສາມ</li>

    ສອບທາງເອງ

    水平列表组

    如果您希望列表项水平显示而不是垂直显示（并排而不是堆叠），请将 .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 ປະສົມກັບບັນດາອັນຕະລາງ / ຊັບພະຍາກອນຊ່ວຍເຫຼືອ, ສາມາດເພີ່ມບັນດາຫົວໂສທີ່ສາຍກັບລະບົບລາຍການ.

    ຄວາມຄິດທີ່ມີຫນັງ

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

    ສອບທາງເອງ