Source

ਸੂਚੀ ਸਮੂਹ

ਸੂਚੀ ਸਮੂਹ ਸਮੱਗਰੀ ਦੀ ਇੱਕ ਲੜੀ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ ਇੱਕ ਲਚਕਦਾਰ ਅਤੇ ਸ਼ਕਤੀਸ਼ਾਲੀ ਭਾਗ ਹਨ। ਉਹਨਾਂ ਨੂੰ ਸੰਸ਼ੋਧਿਤ ਕਰੋ ਅਤੇ ਉਹਨਾਂ ਵਿੱਚ ਕਿਸੇ ਵੀ ਸਮਗਰੀ ਨੂੰ ਸਮਰਥਨ ਦੇਣ ਲਈ ਵਧਾਓ।

ਬੁਨਿਆਦੀ ਉਦਾਹਰਨ

ਸਭ ਤੋਂ ਬੁਨਿਆਦੀ ਸੂਚੀ ਸਮੂਹ ਸੂਚੀ ਆਈਟਮਾਂ ਅਤੇ ਉਚਿਤ ਕਲਾਸਾਂ ਵਾਲੀ ਇੱਕ ਕ੍ਰਮਬੱਧ ਸੂਚੀ ਹੈ। ਇਸਦੀ ਪਾਲਣਾ ਕਰਨ ਵਾਲੇ ਵਿਕਲਪਾਂ ਨਾਲ, ਜਾਂ ਲੋੜ ਅਨੁਸਾਰ ਆਪਣੇ ਖੁਦ ਦੇ CSS ਨਾਲ ਬਣਾਓ।

  • Cras justo odio
  • ਵਿਚ ਡੈਪੀਬਸ ਏਸੀ ਫੈਸਿਲਿਸਿਸ
  • ਮੋਰਬੀ ਲੀਓ ਰਿਸਸ
  • ਪੋਰਟਾ ਏਸੀ ਕੰਸੈਕਟੁਰ ਏਸੀ
  • ਈਰੋਜ਼ ਤੇ ਵੈਸਟੀਬੁਲਮ
<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
  • ਵਿਚ ਡੈਪੀਬਸ ਏਸੀ ਫੈਸਿਲਿਸਿਸ
  • ਮੋਰਬੀ ਲੀਓ ਰਿਸਸ
  • ਪੋਰਟਾ ਏਸੀ ਕੰਸੈਕਟੁਰ ਏਸੀ
  • ਈਰੋਜ਼ ਤੇ ਵੈਸਟੀਬੁਲਮ
<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 ਲਈ ਇੱਕ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ । ਨੋਟ ਕਰੋ ਕਿ ਉਹਨਾਂ ਦੇ ਨਾਲ ਕੁਝ ਤੱਤਾਂ ਨੂੰ ਉਹਨਾਂ ਦੇ ਕਲਿੱਕ ਇਵੈਂਟਾਂ (ਉਦਾਹਰਨ ਲਈ, ਲਿੰਕ) ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਅਯੋਗ ਕਰਨ ਲਈ ਕਸਟਮ JavaScript ਦੀ ਵੀ ਲੋੜ ਹੋਵੇਗੀ।.list-group-item.disabled

  • Cras justo odio
  • ਵਿਚ ਡੈਪੀਬਸ ਏਸੀ ਫੈਸਿਲਿਸਿਸ
  • ਮੋਰਬੀ ਲੀਓ ਰਿਸਸ
  • ਪੋਰਟਾ ਏਸੀ ਕੰਸੈਕਟੁਰ ਏਸੀ
  • ਈਰੋਜ਼ ਤੇ ਵੈਸਟੀਬੁਲਮ
<ul class="list-group">
  <li class="list-group-item disabled">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 ਜਾਂ s ਦੀ ਵਰਤੋਂ ਕਰੋ । ਅਸੀਂ ਇਹਨਾਂ ਸੂਡੋ-ਕਲਾਸਾਂ ਨੂੰ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਵੱਖ ਕਰਦੇ ਹਾਂ ਕਿ ਗੈਰ-ਇੰਟਰਐਕਟਿਵ ਐਲੀਮੈਂਟਸ (ਜਿਵੇਂ ਕਿ s ਜਾਂ s) ਦੇ ਬਣੇ ਸੂਚੀ ਸਮੂਹ ਇੱਕ ਕਲਿੱਕ ਜਾਂ ਟੈਪ ਕਰਨ ਦੀ ਸਮਰੱਥਾ ਪ੍ਰਦਾਨ ਨਹੀਂ ਕਰਦੇ ਹਨ।<button>.list-group-item-action<li><div>

ਇੱਥੇ ਮਿਆਰੀ .btnਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਨਾ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ ।

<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">Vestibulum at eros</a>
</div>

s ਨਾਲ , ਤੁਸੀਂ ਕਲਾਸ ਦੀ ਬਜਾਏ ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ <button>ਵਰਤੋਂ ਵੀ ਕਰ ਸਕਦੇ ਹੋ । ਅਫ਼ਸੋਸ ਦੀ ਗੱਲ ਹੈ ਕਿ s ਅਯੋਗ ਗੁਣ ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦਾ ਹੈ।disabled.disabled<a>

<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
  • ਵਿਚ ਡੈਪੀਬਸ ਏਸੀ ਫੈਸਿਲਿਸਿਸ
  • ਮੋਰਬੀ ਲੀਓ ਰਿਸਸ
  • ਪੋਰਟਾ ਏਸੀ ਕੰਸੈਕਟੁਰ ਏਸੀ
  • ਈਰੋਜ਼ ਤੇ ਵੈਸਟੀਬੁਲਮ
<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>

ਪ੍ਰਸੰਗਿਕ ਕਲਾਸਾਂ

ਸਟੇਟਫੁੱਲ ਬੈਕਗ੍ਰਾਊਂਡ ਅਤੇ ਰੰਗ ਨਾਲ ਆਈਟਮਾਂ ਦੀ ਸੂਚੀ ਬਣਾਉਣ ਲਈ ਪ੍ਰਸੰਗਿਕ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ।

  • ਵਿਚ ਡੈਪੀਬਸ ਏਸੀ ਫੈਸਿਲਿਸਿਸ
  • ਇਹ ਇੱਕ ਪ੍ਰਾਇਮਰੀ ਸੂਚੀ ਸਮੂਹ ਆਈਟਮ ਹੈ
  • ਇਹ ਇੱਕ ਸੈਕੰਡਰੀ ਸੂਚੀ ਸਮੂਹ ਆਈਟਮ ਹੈ
  • ਇਹ ਇੱਕ ਸਫਲਤਾ ਸੂਚੀ ਸਮੂਹ ਆਈਟਮ ਹੈ
  • ਇਹ ਖ਼ਤਰੇ ਦੀ ਸੂਚੀ ਸਮੂਹ ਆਈਟਮ ਹੈ
  • ਇਹ ਇੱਕ ਚੇਤਾਵਨੀ ਸੂਚੀ ਸਮੂਹ ਆਈਟਮ ਹੈ
  • ਇਹ ਇੱਕ ਜਾਣਕਾਰੀ ਸੂਚੀ ਸਮੂਹ ਆਈਟਮ ਹੈ
  • ਇਹ ਲਾਈਟ ਲਿਸਟ ਗਰੁੱਪ ਆਈਟਮ ਹੈ
  • ਇਹ ਇੱਕ ਡਾਰਕ ਲਿਸਟ ਗਰੁੱਪ ਆਈਟਮ ਹੈ
<ul class="list-group">
  <li class="list-group-item">Dapibus ac facilisis in</li>


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

ਪ੍ਰਸੰਗਿਕ ਕਲਾਸਾਂ ਵੀ ਨਾਲ ਕੰਮ ਕਰਦੀਆਂ ਹਨ .list-group-item-action। ਨੋਟ ਕਰੋ ਕਿ ਇੱਥੇ ਹੋਵਰ ਸਟਾਈਲ ਜੋੜਨਾ ਪਿਛਲੀ ਉਦਾਹਰਨ ਵਿੱਚ ਮੌਜੂਦ ਨਹੀਂ ਹੈ। ਰਾਜ ਵੀ ਸਮਰਥਿਤ ਹੈ .active; ਇੱਕ ਪ੍ਰਸੰਗਿਕ ਸੂਚੀ ਸਮੂਹ ਆਈਟਮ ਉੱਤੇ ਇੱਕ ਸਰਗਰਮ ਚੋਣ ਦਰਸਾਉਣ ਲਈ ਇਸਨੂੰ ਲਾਗੂ ਕਰੋ।

<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">This is a primary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">This is a secondary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">This is a success list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">This is a danger list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">This is a warning list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">This is a info list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">This is a light list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">This is a dark list group item</a>
</div>
ਸਹਾਇਕ ਤਕਨਾਲੋਜੀਆਂ ਨੂੰ ਅਰਥ ਪ੍ਰਦਾਨ ਕਰਨਾ

ਅਰਥ ਜੋੜਨ ਲਈ ਰੰਗ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਕੇਵਲ ਇੱਕ ਵਿਜ਼ੂਅਲ ਸੰਕੇਤ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ, ਜੋ ਸਹਾਇਕ ਤਕਨੀਕਾਂ - ਜਿਵੇਂ ਕਿ ਸਕ੍ਰੀਨ ਰੀਡਰਾਂ ਦੇ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਨਹੀਂ ਦਿੱਤਾ ਜਾਵੇਗਾ। ਇਹ ਸੁਨਿਸ਼ਚਿਤ ਕਰੋ ਕਿ ਰੰਗ ਦੁਆਰਾ ਦਰਸਾਈ ਗਈ ਜਾਣਕਾਰੀ ਜਾਂ ਤਾਂ ਸਮੱਗਰੀ ਤੋਂ ਹੀ ਸਪੱਸ਼ਟ ਹੈ (ਜਿਵੇਂ ਕਿ ਦਿਖਣਯੋਗ ਟੈਕਸਟ), ਜਾਂ ਵਿਕਲਪਕ ਸਾਧਨਾਂ ਦੁਆਰਾ ਸ਼ਾਮਲ ਕੀਤੀ ਗਈ ਹੈ, ਜਿਵੇਂ ਕਿ .sr-onlyਕਲਾਸ ਦੇ ਨਾਲ ਲੁਕਿਆ ਵਾਧੂ ਟੈਕਸਟ।

ਬੈਜਾਂ ਨਾਲ

ਕੁਝ ਉਪਯੋਗਤਾਵਾਂ ਦੀ ਮਦਦ ਨਾਲ ਨਾ-ਪੜ੍ਹੀ ਗਿਣਤੀ, ਗਤੀਵਿਧੀ, ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ ਦਿਖਾਉਣ ਲਈ ਕਿਸੇ ਵੀ ਸੂਚੀ ਸਮੂਹ ਆਈਟਮ ਵਿੱਚ ਬੈਜ ਸ਼ਾਮਲ ਕਰੋ ।

  • Cras justo odio14
  • ਵਿਚ ਡੈਪੀਬਸ ਏਸੀ ਫੈਸਿਲਿਸਿਸ2
  • ਮੋਰਬੀ ਲੀਓ ਰਿਸਸ1
<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>

ਕਸਟਮ ਸਮੱਗਰੀ

flexbox ਉਪਯੋਗਤਾਵਾਂ ਦੀ ਮਦਦ ਨਾਲ, ਹੇਠਾਂ ਦਿੱਤੇ ਇੱਕ ਵਰਗੇ ਲਿੰਕ ਕੀਤੇ ਸੂਚੀ ਸਮੂਹਾਂ ਲਈ ਵੀ, ਇਸਦੇ ਅੰਦਰ ਲਗਭਗ ਕੋਈ ਵੀ HTML ਸ਼ਾਮਲ ਕਰੋ ।

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start 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 flex-column align-items-start">
    <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 flex-column align-items-start">
    <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ਫਾਈਲ ਰਾਹੀਂ ਸ਼ਾਮਲ ਕਰੋ—ਸਥਾਨਕ ਸਮੱਗਰੀ ਦੇ ਟੈਬਬਲ ਪੈਨ ਬਣਾਉਣ ਲਈ ਸਾਡੇ ਸੂਚੀ ਸਮੂਹ ਨੂੰ ਵਧਾਉਣ ਲਈ।

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

ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨਾ

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 ਰਾਹੀਂ

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>

ਢੰਗ

$().ਟੈਬ

ਇੱਕ ਸੂਚੀ ਆਈਟਮ ਤੱਤ ਅਤੇ ਸਮੱਗਰੀ ਕੰਟੇਨਰ ਨੂੰ ਸਰਗਰਮ ਕਰਦਾ ਹੈ। ਟੈਬ ਵਿੱਚ DOM ਵਿੱਚ ਇੱਕ data-targetਜਾਂ hrefਇੱਕ ਕੰਟੇਨਰ ਨੋਡ ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾਉਣਾ ਚਾਹੀਦਾ ਹੈ।

<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('ਦਿਖਾਓ')

ਦਿੱਤੀ ਗਈ ਸੂਚੀ ਆਈਟਮ ਨੂੰ ਚੁਣਦਾ ਹੈ ਅਤੇ ਇਸਦੇ ਸੰਬੰਧਿਤ ਪੈਨ ਨੂੰ ਦਿਖਾਉਂਦਾ ਹੈ। ਕੋਈ ਵੀ ਹੋਰ ਸੂਚੀ ਆਈਟਮ ਜੋ ਪਹਿਲਾਂ ਚੁਣੀ ਗਈ ਸੀ, ਅਣ-ਚੁਣਾਈ ਹੋ ਜਾਂਦੀ ਹੈ ਅਤੇ ਇਸ ਨਾਲ ਸਬੰਧਿਤ ਪੈਨ ਲੁਕ ਜਾਂਦਾ ਹੈ। ਟੈਬ ਪੈਨ ਅਸਲ ਵਿੱਚ ਵਿਖਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਨੂੰ ਵਾਪਸ ਕਰਦਾ ਹੈ (ਉਦਾਹਰਨ ਲਈ, shown.bs.tabਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)।

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

ਸਮਾਗਮ

ਇੱਕ ਨਵੀਂ ਟੈਬ ਦਿਖਾਉਂਦੇ ਸਮੇਂ, ਇਵੈਂਟਸ ਹੇਠਾਂ ਦਿੱਤੇ ਕ੍ਰਮ ਵਿੱਚ ਚਾਲੂ ਹੁੰਦੇ ਹਨ:

  1. hide.bs.tab(ਮੌਜੂਦਾ ਸਰਗਰਮ ਟੈਬ 'ਤੇ)
  2. show.bs.tab(ਦਿਖਾਈ ਜਾਣ ਵਾਲੀ ਟੈਬ 'ਤੇ)
  3. hidden.bs.tabhide.bs.tab(ਪਿਛਲੀ ਕਿਰਿਆਸ਼ੀਲ ਟੈਬ 'ਤੇ, ਇਵੈਂਟ ਲਈ ਉਹੀ )
  4. shown.bs.tabshow.bs.tab(ਨਵੇਂ-ਸਰਗਰਮ ਹੁਣੇ-ਦਿਖਾਈ ਗਈ ਟੈਬ 'ਤੇ, ਘਟਨਾ ਲਈ ਉਹੀ )

ਜੇਕਰ ਕੋਈ ਟੈਬ ਪਹਿਲਾਂ ਹੀ ਕਿਰਿਆਸ਼ੀਲ ਨਹੀਂ ਸੀ, ਤਾਂ hide.bs.tabਅਤੇ hidden.bs.tabਇਵੈਂਟਾਂ ਨੂੰ ਚਾਲੂ ਨਹੀਂ ਕੀਤਾ ਜਾਵੇਗਾ।

ਘਟਨਾ ਦੀ ਕਿਸਮ ਵਰਣਨ
show.bs.tab ਇਹ ਇਵੈਂਟ ਟੈਬ ਸ਼ੋਅ 'ਤੇ ਫਾਇਰ ਕਰਦਾ ਹੈ, ਪਰ ਨਵੀਂ ਟੈਬ ਦਿਖਾਈ ਦੇਣ ਤੋਂ ਪਹਿਲਾਂ। ਕ੍ਰਮਵਾਰ ਕਿਰਿਆਸ਼ੀਲ ਟੈਬ ਅਤੇ ਪਿਛਲੀ ਕਿਰਿਆਸ਼ੀਲ ਟੈਬ (ਜੇ ਉਪਲਬਧ ਹੋਵੇ) ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾਉਣ ਲਈ ਵਰਤੋਂ event.targetਅਤੇ ਨਿਸ਼ਾਨਾ ਬਣਾਓ।event.relatedTarget
ਦਿਖਾਇਆ ਗਿਆ.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
})