Source

ລາຍຊື່ກຸ່ມ

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

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

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

Cras justo odio
Dapibus ac facilisis ໃນ
Morbi leo risus
Porta ac consectetur ac
vestibulum ຢູ່ eros

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

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

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

Cras justo odio
Dapibus ac facilisis ໃນ
Morbi leo risus
Porta ac consectetur ac
vestibulum ຢູ່ eros

<ul class="list-group">
  <li class="list-group-item active">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

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

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

Cras justo odio
Dapibus ac facilisis ໃນ
Morbi leo risus
Porta ac consectetur ac
vestibulum ຢູ່ eros

<ul class="list-group">
  <li class="list-group-item disabled" aria-disabled="true">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

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

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

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

Cras justo odio Dapibus ac facilisis ໃນ Morbi leo risus Porta ac consectetur ac vestibulum ຢູ່ eros

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
  <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Vestibulum at eros</a>
</div>

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

<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active">
    Cras justo odio
  </button>
  <button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button>
  <button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>Vestibulum at eros</button>
</div>

ລ້າງ

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

Cras justo odio
Dapibus ac facilisis ໃນ
Morbi leo risus
Porta ac consectetur ac
vestibulum ຢູ່ eros

<ul class="list-group list-group-flush">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

ລວງນອນ

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

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

Cras justo odio
Dapibus ac facilisis ໃນ
Morbi leo risus

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>

Cras justo odio
Dapibus ac facilisis ໃນ
Morbi leo risus

<ul class="list-group list-group-horizontal-sm">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>

Cras justo odio
Dapibus ac facilisis ໃນ
Morbi leo risus

<ul class="list-group list-group-horizontal-md">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>

Cras justo odio
Dapibus ac facilisis ໃນ
Morbi leo risus

<ul class="list-group list-group-horizontal-lg">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>

Cras justo odio
Dapibus ac facilisis ໃນ
Morbi leo risus

<ul class="list-group list-group-horizontal-xl">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>

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

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

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

<ul class="list-group">
  <li class="list-group-item">Dapibus ac facilisis in</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ຂອງລັດ; ນຳໃຊ້ມັນເພື່ອຊີ້ບອກການເລືອກທີ່ຫ້າວຫັນຢູ່ໃນລາຍການກຸ່ມລາຍຊື່ບໍລິບົດ.

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

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</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>

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

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

ມີປ້າຍ

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

Cras justo odio14
Dapibus ac facilisis ໃນ2
Morbi leo risus1

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Cras justo odio
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Dapibus ac facilisis in
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Morbi leo risus
    <span class="badge badge-primary badge-pill">1</span>
  </li>
</ul>

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

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

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

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

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

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

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

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

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

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

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">
    <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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small>Donec id elit non mi porta.</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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
</div>

ພຶດຕິກໍາ JavaScript

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

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

Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt ນັ່ງ sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.

Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.

Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.

Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.

<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-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="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-toggle="list"ຫຼືໃນອົງປະກອບ. ໃຊ້ຄຸນລັກສະນະຂໍ້ມູນເຫຼົ່ານີ້ໃນ .list-group-item.

<!-- List group -->
<div class="list-group" id="myList" role="tablist">
  <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
  <a class="list-group-item list-group-item-action" data-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>

ຜ່ານ JavaScript

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

$('#myList a').on('click', function (e) {
  e.preventDefault()
  $(this).tab('show')
})

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

$('#myList a[href="#profile"]').tab('show') // Select tab by name
$('#myList a:first-child').tab('show') // Select first tab
$('#myList a:last-child').tab('show') // Select last tab
$('#myList a:nth-child(3)').tab('show') // Select third 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>

ວິທີການ

$().tab

ເປີດໃຊ້ອົງປະກອບລາຍການລາຍການ ແລະຕົວບັນຈຸເນື້ອຫາ. ແຖບຄວນຈະມີ data-targetຫຼືການ hrefກໍາຫນົດເປົ້າຫມາຍ node container ໃນ DOM.

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

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

<script>
  $(function () {
    $('#myList a:last-child').tab('show')
  })
</script>

.tab('ສະແດງ')

ເລືອກລາຍການລາຍຊື່ໃຫ້ແລະສະແດງໃຫ້ເຫັນ pane ທີ່ກ່ຽວຂ້ອງຂອງຕົນ. ລາຍການລາຍຊື່ອື່ນໃດທີ່ເລືອກໄວ້ກ່ອນໜ້ານີ້ຈະກາຍເປັນທີ່ບໍ່ເລືອກ ແລະແຖບທີ່ກ່ຽວຂ້ອງຂອງມັນຖືກເຊື່ອງໄວ້. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ແຖບແຖບໄດ້ຖືກສະແດງໃຫ້ເຫັນຕົວຈິງ (ຕົວຢ່າງ, ກ່ອນທີ່ shown.bs.tabເຫດການຈະເກີດຂື້ນ).

$('#someListItem').tab('show')

ເຫດການ

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

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

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

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

$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})