ລາຍຊື່ກຸ່ມ

ລາຍຊື່ກຸ່ມແມ່ນອົງປະກອບທີ່ມີຄວາມຍືດຫຍຸ່ນແລະມີອໍານາດສໍາລັບການສະແດງຊຸດຂອງເນື້ອຫາ. ປັບປຸງແກ້ໄຂແລະຂະຫຍາຍໃຫ້ເຂົາເຈົ້າສະຫນັບສະຫນູນພຽງແຕ່ກ່ຽວກັບເນື້ອໃນພາຍໃນ.

ໃນໜ້ານີ້

ຕົວຢ່າງພື້ນຖານ

ກຸ່ມບັນຊີລາຍຊື່ພື້ນຖານທີ່ສຸດແມ່ນບັນຊີລາຍຊື່ທີ່ບໍ່ມີຄໍາສັ່ງທີ່ມີລາຍການລາຍການແລະຫ້ອງຮຽນທີ່ເຫມາະສົມ. ສ້າງມັນດ້ວຍທາງເລືອກທີ່ປະຕິບັດຕາມ, ຫຼືດ້ວຍ CSS ຂອງທ່ານເອງຕາມຄວາມຕ້ອງການ.

ລາຍການ
ລາຍການທີສອງ
ລາຍການທີສາມ
ລາຍການທີສີ່
ແລະອັນທີຫ້າ

html

<ul class="list-group">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

ລາຍການທີ່ເຄື່ອນໄຫວ

ຕື່ມ .activeໃສ່ a .list-group-itemເພື່ອຊີ້ບອກການເລືອກທີ່ເຮັດວຽກຢູ່ໃນປະຈຸບັນ.

ລາຍການທີ່ເຄື່ອນໄຫວຢູ່
ລາຍການທີສອງ
ລາຍການທີສາມ
ລາຍການທີສີ່
ແລະອັນທີຫ້າ

html

<ul class="list-group">
  <li class="list-group-item active" aria-current="true">An active item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

ລາຍການທີ່ພິການ

ຕື່ມ .disabledໃສ່ a .list-group-itemເພື່ອເຮັດໃຫ້ມັນ ປາກົດວ່າ ປິດໃຊ້ງານ. ໃຫ້ສັງເກດວ່າບາງອົງປະກອບທີ່ມີ .disabledຍັງຕ້ອງການ JavaScript ແບບກໍານົດເອງເພື່ອປິດກິດຈະກໍາການຄລິກຂອງພວກເຂົາຢ່າງສົມບູນ (ເຊັ່ນ: ການເຊື່ອມຕໍ່).

ລາຍການທີ່ພິການ
ລາຍການທີສອງ
ລາຍການທີສາມ
ລາຍການທີສີ່
ແລະອັນທີຫ້າ

html

<ul class="list-group">
  <li class="list-group-item disabled" aria-disabled="true">A disabled item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

ການເຊື່ອມຕໍ່ແລະປຸ່ມ

ໃຊ້ <a>s ຫຼື <button>s ເພື່ອສ້າງ ລາຍການກຸ່ມລາຍການທີ່ປະຕິບັດໄດ້ດ້ວຍການ hover, ປິດການໃຊ້ງານ, ແລະສະຖານະການເຄື່ອນໄຫວໂດຍການ ເພີ່ມ.list-group-item-action . ພວກເຮົາແຍກປະເພດ pseudo-class ເຫຼົ່ານີ້ເພື່ອຮັບປະກັນກຸ່ມລາຍຊື່ທີ່ເຮັດຈາກອົງປະກອບທີ່ບໍ່ມີການໂຕ້ຕອບ (ເຊັ່ນ: <li>s ຫຼື <div>s) ບໍ່ໃຫ້ຄລິກຫຼືແຕະ.

ໃຫ້ແນ່ໃຈວ່າ ບໍ່ໄດ້ໃຊ້ .btnຫ້ອງຮຽນມາດຕະຖານຢູ່ທີ່ນີ້ .

ລາຍການລິ້ງປັດຈຸບັນ ລາຍການເຊື່ອມຕໍ່ທີສອງ ລາຍການເຊື່ອມຕໍ່ທີສາມ ລາຍການເຊື່ອມຕໍ່ທີ່ສີ່ ລາຍການລິ້ງທີ່ຖືກປິດການນຳໃຊ້

html

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    The current link item
  </a>
  <a href="#" class="list-group-item list-group-item-action">A second link item</a>
  <a href="#" class="list-group-item list-group-item-action">A third link item</a>
  <a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
  <a class="list-group-item list-group-item-action disabled">A disabled link item</a>
</div>

ດ້ວຍ <button>s, ທ່ານຍັງສາມາດໃຊ້ disabledຄຸນລັກສະນະແທນ .disabledຊັ້ນໄດ້. ແຕ່ຫນ້າເສຍດາຍ, <a>s ບໍ່ສະຫນັບສະຫນູນຄຸນລັກສະນະທີ່ພິການ.

html

<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active" aria-current="true">
    The current button
  </button>
  <button type="button" class="list-group-item list-group-item-action">A second button item</button>
  <button type="button" class="list-group-item list-group-item-action">A third button item</button>
  <button type="button" class="list-group-item list-group-item-action">A fourth button item</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item</button>
</div>

ລ້າງ

ຕື່ມ .list-group-flushການເອົາຂອບບາງສ່ວນ ແລະມຸມມົນອອກເພື່ອສະແດງລາຍການກຸ່ມລາຍການແບບແຂບຫາຂອບໃນຖັງແມ່ (ເຊັ່ນ: ບັດ).

ລາຍການ
ລາຍການທີສອງ
ລາຍການທີສາມ
ລາຍການທີສີ່
ແລະອັນທີຫ້າ

html

<ul class="list-group list-group-flush">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

ເລກ

ເພີ່ມ .list-group-numberedຫ້ອງຮຽນຕົວແກ້ໄຂ (ແລະເລືອກໃຊ້ <ol>ອົງປະກອບໃດນຶ່ງ) ເພື່ອເລືອກເຂົ້າໃນລາຍການກຸ່ມລາຍຊື່ຕົວເລກ. ຕົວເລກແມ່ນຖືກສ້າງຂຶ້ນໂດຍຜ່ານ CSS (ກົງກັນຂ້າມກັບຮູບແບບ <ol>ຂອງຕົວທ່ອງເວັບເລີ່ມຕົ້ນ) ສໍາລັບການຈັດວາງທີ່ດີກວ່າພາຍໃນລາຍການກຸ່ມລາຍການແລະອະນຸຍາດໃຫ້ມີການປັບແຕ່ງທີ່ດີກວ່າ.

ຕົວເລກແມ່ນສ້າງຂຶ້ນໂດຍ counter-reseton <ol>, ແລະຫຼັງຈາກນັ້ນຈັດຮູບແບບແລະວາງດ້ວຍ ::beforeອົງປະກອບ pseudo-on <li>ກັບ counter-incrementແລະ content.

ລາຍການລາຍການ
ລາຍການລາຍການ
ລາຍການລາຍການ

html

<ol class="list-group list-group-numbered">
  <li class="list-group-item">A list item</li>
  <li class="list-group-item">A list item</li>
  <li class="list-group-item">A list item</li>
</ol>

ເຫຼົ່ານີ້ເຮັດວຽກໄດ້ດີກັບເນື້ອຫາທີ່ກໍາຫນົດເອງເຊັ່ນດຽວກັນ.

ຫົວຂໍ້ຍ່ອຍ
ເນື້ອຫາສໍາລັບລາຍການລາຍການ
14
ຫົວຂໍ້ຍ່ອຍ
ເນື້ອຫາສໍາລັບລາຍການລາຍການ
14
ຫົວຂໍ້ຍ່ອຍ
ເນື້ອຫາສໍາລັບລາຍການລາຍການ
14

html

<ol class="list-group list-group-numbered">
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
</ol>

ລວງນອນ

ເພີ່ມ .list-group-horizontalການປ່ຽນຮູບແບບຂອງກຸ່ມລາຍການຈາກແນວຕັ້ງໄປຫາແນວນອນໃນທົ່ວຈຸດແບ່ງທັງໝົດ. ອີກທາງເລືອກ, ເລືອກຕົວແປທີ່ຕອບສະໜອງ .list-group-horizontal-{sm|md|lg|xl|xxl}ເພື່ອເຮັດໃຫ້ກຸ່ມລາຍຊື່ເປັນແນວນອນ ໂດຍເລີ່ມຈາກຈຸດແບ່ງນັ້ນ min-width. ໃນປັດຈຸ ບັນກຸ່ມລາຍຊື່ແນວນອນບໍ່ສາມາດຖືກລວມເຂົ້າກັບກຸ່ມລາຍຊື່ flush ໄດ້.

ProTip: ຕ້ອງການລາຍການກຸ່ມລາຍຊື່ຄວາມກວ້າງເທົ່າກັນເມື່ອຕັ້ງແນວນອນບໍ? ເພີ່ມ .flex-fillໃສ່ແຕ່ລະກຸ່ມລາຍຊື່.

ລາຍການ
ລາຍການທີສອງ
ລາຍການທີສາມ

ລາຍການ
ລາຍການທີສອງ
ລາຍການທີສາມ

ລາຍການ
ລາຍການທີສອງ
ລາຍການທີສາມ

ລາຍການ
ລາຍການທີສອງ
ລາຍການທີສາມ

ລາຍການ
ລາຍການທີສອງ
ລາຍການທີສາມ

ລາຍການ
ລາຍການທີສອງ
ລາຍການທີສາມ

html

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-sm">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-md">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-lg">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xl">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xxl">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>

ຫ້ອງຮຽນຕາມບໍລິບົດ

ໃຊ້ຊັ້ນຮຽນຕາມບໍລິບົດເພື່ອຈັດຮູບແບບລາຍການລາຍການທີ່ມີພື້ນຫຼັງ ແລະສີທີ່ຄົບຖ້ວນ.

ລາຍການກຸ່ມລາຍຊື່ເລີ່ມຕົ້ນທີ່ງ່າຍດາຍ
ລາຍການກຸ່ມລາຍຊື່ຕົ້ນຕໍທີ່ງ່າຍດາຍ
ລາຍການກຸ່ມລາຍຊື່ຮອງແບບງ່າຍໆ
ລາຍການກຸ່ມລາຍຊື່ຄວາມສໍາເລັດງ່າຍໆ
ລາຍການກຸ່ມລາຍຊື່ອັນຕະລາຍງ່າຍໆ
ບັນຊີລາຍການເຕືອນງ່າຍໆຂອງກຸ່ມ
ຂໍ້ມູນງ່າຍດາຍລາຍການລາຍການກຸ່ມ
ລາຍການກຸ່ມລາຍຊື່ເບົາທີ່ງ່າຍດາຍ
ລາຍການກຸ່ມລາຍຊື່ຊ້ໍາແບບງ່າຍໆ

html

<ul class="list-group">
  <li class="list-group-item">A simple default list group item</li>

  <li class="list-group-item list-group-item-primary">A simple primary list group item</li>
  <li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
  <li class="list-group-item list-group-item-success">A simple success list group item</li>
  <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
  <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
  <li class="list-group-item list-group-item-info">A simple info list group item</li>
  <li class="list-group-item list-group-item-light">A simple light list group item</li>
  <li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>

ຫ້ອງຮຽນຕາມບໍລິບົດຍັງເຮັດວຽກກັບ .list-group-item-action. ໃຫ້ສັງເກດວ່າການເພີ່ມຮູບແບບ hover ຢູ່ທີ່ນີ້ບໍ່ມີຢູ່ໃນຕົວຢ່າງທີ່ຜ່ານມາ. ຍັງໄດ້ຮັບການສະຫນັບສະຫນູນ .activeຂອງລັດ; ນຳໃຊ້ມັນເພື່ອຊີ້ບອກການເລືອກທີ່ຫ້າວຫັນຢູ່ໃນລາຍການກຸ່ມລາຍຊື່ບໍລິບົດ.

ລາຍການກຸ່ມລາຍຊື່ເລີ່ມຕົ້ນທີ່ງ່າຍດາຍ ລາຍການກຸ່ມລາຍຊື່ຕົ້ນຕໍທີ່ງ່າຍດາຍ ລາຍການກຸ່ມລາຍຊື່ຮອງແບບງ່າຍໆ ລາຍການກຸ່ມລາຍຊື່ຄວາມສໍາເລັດງ່າຍໆ ລາຍການກຸ່ມລາຍຊື່ອັນຕະລາຍງ່າຍໆ ບັນຊີລາຍການເຕືອນງ່າຍໆຂອງກຸ່ມ ຂໍ້ມູນງ່າຍດາຍລາຍການລາຍການກຸ່ມ ລາຍການກຸ່ມລາຍຊື່ເບົາທີ່ງ່າຍດາຍ ລາຍການກຸ່ມລາຍຊື່ຊ້ໍາແບບງ່າຍໆ

html

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">A simple default list group item</a>

  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
</div>

ບົ່ງບອກຄວາມໝາຍກັບເທັກໂນໂລຍີຊ່ວຍເຫຼືອ

ການນໍາໃຊ້ສີເພື່ອເພີ່ມຄວາມຫມາຍພຽງແຕ່ສະຫນອງການສະແດງໃຫ້ເຫັນ, ທີ່ຈະບໍ່ໄດ້ຮັບການນໍາໃຊ້ເຕັກໂນໂລຊີການຊ່ວຍເຫຼືອ - ເຊັ່ນ: ຕົວອ່ານຫນ້າຈໍ. ໃຫ້ແນ່ໃຈວ່າຂໍ້ມູນທີ່ສະແດງໂດຍສີແມ່ນເຫັນໄດ້ຊັດເຈນຈາກເນື້ອຫາຂອງມັນເອງ (ເຊັ່ນ: ຂໍ້ຄວາມທີ່ເຫັນໄດ້), ຫຼືຖືກລວມຜ່ານວິທີການທາງເລືອກ, ເຊັ່ນ: ຂໍ້ຄວາມເພີ່ມເຕີມທີ່ເຊື່ອງໄວ້ກັບ .visually-hiddenຊັ້ນ.

ມີປ້າຍ

ເພີ່ມປ້າຍໃສ່ລາຍການກຸ່ມລາຍຊື່ໃດນຶ່ງເພື່ອສະແດງຈຳນວນທີ່ຍັງບໍ່ໄດ້ອ່ານ, ການເຄື່ອນໄຫວ ແລະອື່ນໆອີກດ້ວຍການຊ່ວຍເຫຼືອຂອງບາງ ອັນ .

ລາຍການລາຍການ14
ບັນຊີລາຍຊື່ທີສອງ2
ບັນຊີລາຍຊື່ທີສາມ1

html

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A list item
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A second list item
    <span class="badge bg-primary rounded-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A third list item
    <span class="badge bg-primary rounded-pill">1</span>
  </li>
</ul>

ເນື້ອໃນທີ່ກໍາຫນົດເອງ

ເພີ່ມເກືອບທຸກ HTML ພາຍໃນ, ເຖິງແມ່ນວ່າສໍາລັບກຸ່ມລາຍຊື່ທີ່ເຊື່ອມໂຍງເຊັ່ນຫນຶ່ງຂ້າງລຸ່ມນີ້, ດ້ວຍການຊ່ວຍເຫຼືອຂອງ flexbox utilities .

ລາຍຊື່ກຸ່ມຫົວຂໍ້

3 ມື້ກ່ອນຫນ້ານີ້

ບາງເນື້ອໃນຕົວຍຶດໃນວັກ.

ແລະບາງພິມຂະຫນາດນ້ອຍ.

ລາຍຊື່ກຸ່ມຫົວຂໍ້

3 ມື້ກ່ອນຫນ້ານີ້

ບາງເນື້ອໃນຕົວຍຶດໃນວັກ.

ແລະບາງພິມນ້ອຍທີ່ຖືກປິດສຽງ.

ລາຍຊື່ກຸ່ມຫົວຂໍ້

3 ມື້ກ່ອນຫນ້ານີ້

ບາງເນື້ອໃນຕົວຍຶດໃນວັກ.

ແລະບາງພິມນ້ອຍທີ່ຖືກປິດສຽງ.

html

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small>3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small>And some small print.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-muted">And some muted small print.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-muted">And some muted small print.</small>
  </a>
</div>

ກ່ອງກວດ ແລະວິທະຍຸ

ວາງກ່ອງເຊັກ ແລະວິທະຍຸຂອງ Bootstrap ພາຍໃນລາຍການກຸ່ມລາຍການ ແລະປັບແຕ່ງຕາມຄວາມຕ້ອງການ. ທ່ານສາມາດນໍາໃຊ້ໃຫ້ເຂົາເຈົ້າໂດຍບໍ່ມີ <label>s, ແຕ່ກະລຸນາຈື່ຈໍາທີ່ຈະມີ aria-labelຄຸນສົມບັດແລະຄຸນຄ່າສໍາລັບການເຂົ້າເຖິງ.

ປ່ອງໝາຍທໍາອິດ
ປ່ອງໝາຍທີສອງ
ປ່ອງໝາຍທີສາມ

html

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox">
    <label class="form-check-label" for="firstCheckbox">First checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox">
    <label class="form-check-label" for="secondCheckbox">Second checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox">
    <label class="form-check-label" for="thirdCheckbox">Third checkbox</label>
  </li>
</ul>

ວິທະຍຸທໍາອິດ
ວິທະຍຸຄັ້ງທີສອງ
ວິທະຍຸທີສາມ

html

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="firstRadio" checked>
    <label class="form-check-label" for="firstRadio">First radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="secondRadio">
    <label class="form-check-label" for="secondRadio">Second radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio">
    <label class="form-check-label" for="thirdRadio">Third radio</label>
  </li>
</ul>

ທ່ານສາມາດນໍາໃຊ້ .stretched-links <label>ເພື່ອເຮັດໃຫ້ລາຍການກຸ່ມລາຍການທັງຫມົດສາມາດຄລິກໃສ່.

ປ່ອງໝາຍທໍາອິດ
ປ່ອງໝາຍທີສອງ
ປ່ອງໝາຍທີສາມ

html

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckboxStretched">
    <label class="form-check-label stretched-link" for="firstCheckboxStretched">First checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckboxStretched">
    <label class="form-check-label stretched-link" for="secondCheckboxStretched">Second checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckboxStretched">
    <label class="form-check-label stretched-link" for="thirdCheckboxStretched">Third checkbox</label>
  </li>
</ul>

CSS

ຕົວແປ

ເພີ່ມໃນ v5.2.0

ເປັນສ່ວນຫນຶ່ງຂອງວິທີການຕົວແປ CSS ທີ່ພັດທະນາຂອງ Bootstrap, ກຸ່ມລາຍຊື່ໃນປັດຈຸບັນໃຊ້ຕົວແປ CSS ທ້ອງຖິ່ນ .list-groupສໍາລັບການປັບແຕ່ງເວລາທີ່ແທ້ຈິງ. ຄ່າສໍາລັບຕົວແປ CSS ແມ່ນຖືກກໍານົດຜ່ານ Sass, ດັ່ງນັ້ນການປັບແຕ່ງ Sass ຍັງຖືກສະຫນັບສະຫນູນ, ເຊັ່ນກັນ.

  --#{$prefix}list-group-color: #{$list-group-color};
  --#{$prefix}list-group-bg: #{$list-group-bg};
  --#{$prefix}list-group-border-color: #{$list-group-border-color};
  --#{$prefix}list-group-border-width: #{$list-group-border-width};
  --#{$prefix}list-group-border-radius: #{$list-group-border-radius};
  --#{$prefix}list-group-item-padding-x: #{$list-group-item-padding-x};
  --#{$prefix}list-group-item-padding-y: #{$list-group-item-padding-y};
  --#{$prefix}list-group-action-color: #{$list-group-action-color};
  --#{$prefix}list-group-action-hover-color: #{$list-group-action-hover-color};
  --#{$prefix}list-group-action-hover-bg: #{$list-group-hover-bg};
  --#{$prefix}list-group-action-active-color: #{$list-group-action-active-color};
  --#{$prefix}list-group-action-active-bg: #{$list-group-action-active-bg};
  --#{$prefix}list-group-disabled-color: #{$list-group-disabled-color};
  --#{$prefix}list-group-disabled-bg: #{$list-group-disabled-bg};
  --#{$prefix}list-group-active-color: #{$list-group-active-color};
  --#{$prefix}list-group-active-bg: #{$list-group-active-bg};
  --#{$prefix}list-group-active-border-color: #{$list-group-active-border-color};

ຕົວແປ Sass

$list-group-color:                  $gray-900;
$list-group-bg:                     $white;
$list-group-border-color:           rgba($black, .125);
$list-group-border-width:           $border-width;
$list-group-border-radius:          $border-radius;

$list-group-item-padding-y:         $spacer * .5;
$list-group-item-padding-x:         $spacer;
$list-group-item-bg-scale:          -80%;
$list-group-item-color-scale:       40%;

$list-group-hover-bg:               $gray-100;
$list-group-active-color:           $component-active-color;
$list-group-active-bg:              $component-active-bg;
$list-group-active-border-color:    $list-group-active-bg;

$list-group-disabled-color:         $gray-600;
$list-group-disabled-bg:            $list-group-bg;

$list-group-action-color:           $gray-700;
$list-group-action-hover-color:     $list-group-action-color;

$list-group-action-active-color:    $body-color;
$list-group-action-active-bg:       $gray-200;

ມິກຊິນ

ໃຊ້ປະສົມປະສານກັບ $theme-colorsເພື່ອສ້າງ ຊັ້ນຮຽນ variant contextual ສໍາລັບ .list-group-items.

@mixin list-group-item-variant($state, $background, $color) {
  .list-group-item-#{$state} {
    color: $color;
    background-color: $background;

    &.list-group-item-action {
      &:hover,
      &:focus {
        color: $color;
        background-color: shade-color($background, 10%);
      }

      &.active {
        color: $white;
        background-color: $color;
        border-color: $color;
      }
    }
  }
}

ວົງ

Loop ທີ່ສ້າງຫ້ອງຮຽນ modifier ກັບ list-group-item-variant()mixin.

// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.

@each $state, $value in $theme-colors {
  $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
  $list-group-variant-color: shift-color($value, $list-group-item-color-scale);
  @if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
    $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
  }

  @include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
}

ພຶດຕິກໍາ JavaScript

ໃຊ້ແທັບແທໍບ JavaScript - ລວມມີມັນສ່ວນບຸກຄົນຫຼືຜ່ານ bootstrap.jsໄຟລ໌ທີ່ລວບລວມ - ເພື່ອຂະຫຍາຍກຸ່ມລາຍຊື່ຂອງພວກເຮົາເພື່ອສ້າງແຖບຕາຕະລາງຂອງເນື້ອຫາທ້ອງຖິ່ນ.

ບ້ານ ໂປຣໄຟລ໌ ຂໍ້ຄວາມ ການຕັ້ງຄ່າ

ບາງເນື້ອໃນຂອງຕົວຍຶດໃນວັກທີ່ກ່ຽວຂ້ອງກັບ "ເຮືອນ". ແລະບາງເນື້ອໃນເພີ່ມເຕີມ, ນໍາໃຊ້ທີ່ນີ້ພຽງແຕ່ເພື່ອ pad ອອກແລະຕື່ມຂໍ້ມູນໃສ່ແຖບແຖບນີ້. ໃນການຜະລິດ, ທ່ານແນ່ນອນຈະມີເນື້ອໃນທີ່ແທ້ຈິງຫຼາຍຢູ່ທີ່ນີ້. ແລະບໍ່ພຽງແຕ່ຂໍ້ຄວາມ. ມັນອາດຈະເປັນສິ່ງໃດກໍ່ຕາມ, ແທ້ໆ. ຂໍ້ຄວາມ, ຮູບພາບ, ແບບຟອມ.

Some placeholder content in a paragraph relating to "Profile". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Messages". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Settings". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab" role="tablist">
      <a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="list" href="#list-home" role="tab" aria-controls="list-home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="list-profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="list-messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab" aria-controls="list-settings">Settings</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
      <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
      <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
    </div>
  </div>
</div>

ການນໍາໃຊ້ຄຸນລັກສະນະຂໍ້ມູນ

ທ່ານສາມາດກະຕຸ້ນການນໍາທາງກຸ່ມບັນຊີລາຍການໂດຍບໍ່ມີການຂຽນ JavaScript ໃດໂດຍການພຽງແຕ່ລະບຸ data-bs-toggle="list"ຫຼືໃນອົງປະກອບ. ໃຊ້ຄຸນລັກສະນະຂໍ້ມູນເຫຼົ່ານີ້ໃນ .list-group-item.

<div role="tabpanel">
  <!-- List group -->
  <div class="list-group" id="myList" role="tablist">
    <a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#home" role="tab">Home</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#settings" role="tab">Settings</a>
  </div>

  <!-- Tab panes -->
  <div class="tab-content">
    <div class="tab-pane active" id="home" role="tabpanel">...</div>
    <div class="tab-pane" id="profile" role="tabpanel">...</div>
    <div class="tab-pane" id="messages" role="tabpanel">...</div>
    <div class="tab-pane" id="settings" role="tabpanel">...</div>
  </div>
</div>

ຜ່ານ JavaScript

ເປີດໃຊ້ລາຍການລາຍການແບບ tabbable ຜ່ານ JavaScript (ແຕ່ລະລາຍການລາຍການຈະຕ້ອງຖືກເປີດໃຊ້ເປັນສ່ວນບຸກຄົນ):

const triggerTabList = document.querySelectorAll('#myTab a')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', event => {
    event.preventDefault()
    tabTrigger.show()
  })
})

ທ່ານສາມາດກະຕຸ້ນລາຍການລາຍຊື່ບຸກຄົນໃນຫຼາຍວິທີ:

const triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

const triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab

ເສື່ອມຜົນ

ເພື່ອເຮັດໃຫ້ແຖບແຖບຈາງລົງ, ເພີ່ມ .fadeໃສ່ແຕ່ລະອັນ .tab-pane. ແຖບແຖບທໍາອິດຕ້ອງມີ .showເພື່ອເຮັດໃຫ້ເນື້ອຫາເບື້ອງຕົ້ນເຫັນໄດ້.

<div class="tab-content">
  <div class="tab-pane fade show active" id="home" role="tabpanel">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel">...</div>
</div>

ວິທີການ

ວິທີການ asynchronous ແລະການຫັນປ່ຽນ

ວິທີການ API ທັງໝົດແມ່ນ asynchronous ແລະເລີ່ມການ ຫັນປ່ຽນ . ພວກເຂົາກັບຄືນໄປຫາຜູ້ໂທທັນທີທີ່ການຫັນປ່ຽນເລີ່ມຕົ້ນແຕ່ ກ່ອນທີ່ມັນຈະສິ້ນສຸດລົງ . ນອກຈາກນັ້ນ, ການໂທຫາວິທີການກ່ຽວກັບ ອົງປະກອບຂອງການປ່ຽນແປງຈະຖືກລະເລີຍ .

ເບິ່ງເອກະສານ JavaScript ຂອງພວກເຮົາສໍາລັບຂໍ້ມູນເພີ່ມເຕີມ .

ເປີດໃຊ້ເນື້ອຫາຂອງທ່ານເປັນອົງປະກອບແຖບ.

ທ່ານສາມາດສ້າງແທັບ instance ກັບ constructor, ຕົວຢ່າງ:

const bsTab = new bootstrap.Tab('#myTab')

ວິທີການ	ລາຍລະອຽດ
`dispose`	ທໍາລາຍແຖບຂອງອົງປະກອບ.
`getInstance`	ວິທີການຄົງທີ່ທີ່ອະນຸຍາດໃຫ້ທ່ານໄດ້ຮັບຕົວຢ່າງແຖບທີ່ກ່ຽວຂ້ອງກັບອົງປະກອບ DOM, ທ່ານສາມາດນໍາໃຊ້ມັນເຊັ່ນນີ້: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	ວິທີການຄົງທີ່ທີ່ຈະສົ່ງຄືນຕົວຢ່າງແຖບທີ່ກ່ຽວຂ້ອງກັບອົງປະກອບ DOM ຫຼືສ້າງອັນໃຫມ່ໃນກໍລະນີທີ່ມັນບໍ່ໄດ້ຖືກເລີ່ມຕົ້ນ. ທ່ານສາມາດນໍາໃຊ້ມັນເຊັ່ນນີ້: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	ເລືອກແຖບທີ່ໃຫ້ມາ ແລະສະແດງແຖບທີ່ກ່ຽວຂ້ອງຂອງມັນ. ແຖບອື່ນໃດກໍໄດ້ທີ່ເລືອກໄວ້ກ່ອນໜ້ານີ້ຈະກາຍເປັນທີ່ບໍ່ເລືອກ ແລະແຖບທີ່ກ່ຽວຂ້ອງຂອງມັນຖືກເຊື່ອງໄວ້. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ແຖບແຖບໄດ້ຖືກສະແດງໃຫ້ເຫັນຕົວຈິງ (ເຊັ່ນ: ກ່ອນທີ່ `shown.bs.tab`ເຫດການຈະເກີດຂື້ນ).

ເຫດການ

ເມື່ອສະແດງແຖບໃໝ່, ເຫດການຈະເກີດຂຶ້ນຕາມລຳດັບຕໍ່ໄປນີ້:

hide.bs.tab(ຢູ່ໃນແຖບທີ່ໃຊ້ງານໃນປັດຈຸບັນ)
show.bs.tab(ຢູ່ໃນແຖບທີ່ຈະຖືກສະແດງ)
hidden.bs.tab(ໃນແຖບທີ່ໃຊ້ງານຜ່ານມາ, ອັນດຽວກັນກັບ hide.bs.tabເຫດການ)
shown.bs.tab(ຢູ່ໃນແຖບທີ່ຫາກໍສະແດງໃໝ່ທີ່ເປີດໃໝ່, ອັນດຽວກັນກັບ show.bs.tabເຫດການ)

ຖ້າບໍ່ມີແຖບໃດຖືກເປີດໃຊ້ຢູ່ກ່ອນແລ້ວ, ເຫດການ hide.bs.tabແລະ hidden.bs.tabເຫດການຈະບໍ່ຖືກຍິງອອກ.

ປະເພດເຫດການ	ລາຍລະອຽດ
`hide.bs.tab`	ເຫດການນີ້ຈະດັບໄຟເມື່ອແຖບໃໝ່ຈະຖືກສະແດງ (ແລະດັ່ງນັ້ນແຖບທີ່ເປີດໃຊ້ກ່ອນໜ້າຈະຖືກເຊື່ອງໄວ້). ໃຊ້ `event.target`ແລະ `event.relatedTarget`ເພື່ອແນເປົ້າໃສ່ແຖບທີ່ໃຊ້ງານໃນປັດຈຸບັນ ແລະແຖບໃໝ່ທີ່ກຳລັງຈະເປີດໃຊ້ໃນໄວໆນີ້, ຕາມລໍາດັບ.
`hidden.bs.tab`	ເຫດການນີ້ໄຟໄຫມ້ຫຼັງຈາກແຖບໃຫມ່ຖືກສະແດງ (ແລະດັ່ງນັ້ນແຖບທີ່ເຮັດວຽກຜ່ານມາຖືກເຊື່ອງໄວ້). ໃຊ້ `event.target`ແລະ `event.relatedTarget`ເພື່ອແນເປົ້າໃສ່ແຖບທີ່ໃຊ້ວຽກກ່ອນໜ້າ ແລະແຖບທີ່ເຄື່ອນໄຫວໃໝ່ຕາມລຳດັບ.
`show.bs.tab`	ເຫດການນີ້ເລີ່ມເປີດໃນການສະແດງແຖບ, ແຕ່ກ່ອນທີ່ແຖບໃໝ່ຈະຖືກສະແດງ. ໃຊ້ `event.target`ແລະ `event.relatedTarget`ເພື່ອແນເປົ້າໃສ່ແຖບທີ່ໃຊ້ວຽກ ແລະແຖບທີ່ໃຊ້ງານຜ່ານມາ (ຖ້າມີ) ຕາມລໍາດັບ.
`shown.bs.tab`	ເຫດການນີ້ຈະເລີ່ມສະແດງໃນແຖບສະແດງຫຼັງຈາກແຖບຖືກສະແດງ. ໃຊ້ `event.target`ແລະ `event.relatedTarget`ເພື່ອແນເປົ້າໃສ່ແຖບທີ່ໃຊ້ວຽກ ແລະແຖບທີ່ໃຊ້ງານຜ່ານມາ (ຖ້າມີ) ຕາມລໍາດັບ.

const tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(tabElm => {
  tabElm.addEventListener('shown.bs.tab', event => {
    event.target // newly activated tab
    event.relatedTarget // previous active tab
  })
})

ລາຍຊື່ກຸ່ມ

ຕົວຢ່າງພື້ນຖານ

ລາຍການທີ່ເຄື່ອນໄຫວ

ລາຍການທີ່ພິການ

ການເຊື່ອມຕໍ່ແລະປຸ່ມ

ລ້າງ

ເລກ

ລວງນອນ

ຫ້ອງຮຽນຕາມບໍລິບົດ

ບົ່ງບອກຄວາມໝາຍກັບເທັກໂນໂລຍີຊ່ວຍເຫຼືອ

ມີປ້າຍ

ເນື້ອໃນທີ່ກໍາຫນົດເອງ

ລາຍຊື່ກຸ່ມຫົວຂໍ້

ລາຍຊື່ກຸ່ມຫົວຂໍ້

ລາຍຊື່ກຸ່ມຫົວຂໍ້

ກ່ອງກວດ ແລະວິທະຍຸ

CSS

ຕົວແປ

ຕົວແປ Sass

ມິກຊິນ

ວົງ

ພຶດຕິກໍາ JavaScript

ການນໍາໃຊ້ຄຸນລັກສະນະຂໍ້ມູນ

ຜ່ານ JavaScript

ເສື່ອມຜົນ

ວິທີການ

ວິ​ທີ​ການ asynchronous ແລະ​ການ​ຫັນ​ປ່ຽນ​

ເຫດການ

ວິທີການ asynchronous ແລະການຫັນປ່ຽນ