Source

فهرست گروپ

لسٽ گروپ هڪ لچڪدار ۽ طاقتور جزو آهن مواد جي هڪ سيريز کي ڏيکارڻ لاءِ. تبديل ڪريو ۽ وڌايو انھن کي سپورٽ ڪرڻ لاءِ صرف ڪنھن مواد جي اندر.

بنيادي مثال

سڀ کان وڌيڪ بنيادي فهرست گروپ ھڪڙي غير ترتيب ڏنل فهرست آھي جنھن ۾ لسٽ شيون ۽ مناسب ڪلاس شامل آھن. ان تي تعمير ڪريو اختيارن سان جيڪي پيروي ڪريو، يا ضرورت مطابق پنھنجي سي ايس ايس سان.

  • Cras justo odio
  • Dapibus ac facilisis in
  • موربي ليو ريس
  • Porta ac consectetur ac
  • 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لاءِ شامل ڪريو ..list-group-item

  • Cras justo odio
  • Dapibus ac facilisis in
  • موربي ليو ريس
  • Porta ac consectetur ac
  • 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ان کي غير فعال ڪرڻ .list-group-itemلاءِ شامل ڪريو . نوٽ ڪريو ته ڪجھ عناصر سان گڏ .disabledبه ڪسٽم جاوا اسڪرپٽ جي ضرورت پوندي انھن جي ڪلڪ جي واقعن کي مڪمل طور تي غير فعال ڪرڻ لاء (مثال طور، لنڪس).

  • Cras justo odio
  • Dapibus ac facilisis in
  • موربي ليو ريس
  • Porta ac consectetur ac
  • eros تي ويسٽيبولم
<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 استعمال ڪريو عمل جي قابل<button> لسٽ گروپ شيون ٺاھڻ لاء ھوور، معذور، ۽ فعال رياستن سان شامل ڪندي . اسان انهن pseudo-ڪلاسن کي الڳ ڪريون ٿا انهي ڳالهه کي يقيني بڻائڻ لاءِ ته فهرستن جا گروپ جيڪي غير متضاد عنصرن مان ٺهيل آهن (جهڙوڪ s يا s) هڪ ڪلڪ يا ٽيپ ڪرڻ جي صلاحيت مهيا نه ڪن..list-group-item-action<li><div>

پڪ ڪريو ته هتي معياري .btnڪلاس استعمال نه ڪريو .

Cras justo odio Dapibus ac facilisis in موربي ليو ريس Porta ac consectetur ac 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">Vestibulum at eros</a>
</div>

s سان <button>، توھان پڻ استعمال ڪري سگھوٿا ڪلاس 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 in
  • موربي ليو ريس
  • Porta ac consectetur ac
  • 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>

لاڳاپيل طبقن

هڪ رياستي پس منظر ۽ رنگ سان شيون لسٽ ڪرڻ لاءِ لاڳاپيل ڪلاس استعمال ڪريو.

  • Dapibus ac facilisis in
  • هڪ سادي پرائمري لسٽ گروپ شيون
  • هڪ سادي ثانوي لسٽ گروپ شيون
  • هڪ سادي ڪاميابي لسٽ گروپ شيون
  • هڪ سادي خطري جي فهرست گروپ شيون
  • هڪ سادي ڊيڄاريندڙ لسٽ گروپ شيون
  • هڪ سادي معلومات لسٽ گروپ شيون
  • هڪ سادي لائيٽ لسٽ گروپ شيون
  • هڪ سادي اونداهي فهرست گروپ شيون
<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. نوٽ ڪريو ته هور اسٽائل جو اضافو هتي اڳئين مثال ۾ موجود ناهي. پڻ .activeرياست جي حمايت ڪئي وئي آهي؛ ان کي لاڳو ڪريو هڪ فعال چونڊ کي ظاهر ڪرڻ لاءِ هڪ لاڳاپيل فهرست گروپ آئٽم تي.

Dapibus ac facilisis in هڪ سادي پرائمري لسٽ گروپ شيون هڪ سادي ثانوي لسٽ گروپ شيون هڪ سادي ڪاميابي لسٽ گروپ شيون هڪ سادي خطري جي فهرست گروپ شيون هڪ سادي ڊيڄاريندڙ لسٽ گروپ شيون هڪ سادي معلومات لسٽ گروپ شيون هڪ سادي لائيٽ لسٽ گروپ شيون هڪ سادي اونداهي فهرست گروپ شيون 
<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 in2
  • موربي ليو ريس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>

حسب ضرورت مواد

شامل ڪريو تقريبن ڪنهن به HTML جي اندر، جيتوڻيڪ ڳنڍيل لسٽ گروپن لاءِ جيئن هيٺ ڏنل هڪ، flexbox يوٽيلٽيز جي مدد سان .

لسٽ گروپ آئٽم جي عنوان
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 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فائل ذريعي شامل ڪريو- مقامي مواد جي ٽيبلبل پينز ٺاهڻ لاءِ اسان جي لسٽ گروپ کي وڌائڻ لاءِ.

Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minimum 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>

ڊيٽا خاصيتون استعمال ڪندي

توھان چالو ڪري سگھو ٿا ھڪڙي فهرست گروپ نيويگيشن بغير ڪنھن جاوا اسڪرپٽ لکڻ جي صرف وضاحت ڪندي 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>

جاوا اسڪرپٽ ذريعي

جاوا اسڪرپٽ ذريعي ٽيبلبل لسٽ آئٽم کي فعال ڪريو (هر فهرست جي شيءِ کي انفرادي طور تي چالو ڪرڻ جي ضرورت آهي):

$('#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ٽارگيٽ ڪنٽينر نوڊ 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('ڏسو')

ڏنل فهرست جي شين کي چونڊيو ۽ ان سان لاڳاپيل پين ڏيکاري ٿو. ٻيو ڪو به فهرست شيون جيڪو اڳ ۾ چونڊيو ويو هو غير منتخب ٿيل آهي ۽ ان سان لاڳاپيل پين لڪيل آهي. ڪالر ڏانھن واپسي کان اڳ ٽيب پين اصل ۾ ڏيکاريو ويو آھي (مثال طور، shown.bs.tabواقعي کان اڳ).

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

واقعا

جڏهن هڪ نئين ٽيب ڏيکاريندي، واقعا هيٺ ڏنل ترتيب ۾ باهه لڳندا آهن:

  1. hide.bs.tab(موجوده فعال ٽيب تي)
  2. show.bs.tab(ڏسڻ واري ٽيب تي)
  3. hidden.bs.tab(اڳوڻي فعال ٽيب تي، ساڳيو ئي hide.bs.tabواقعي جي لاءِ)
  4. shown.bs.tab(نئين-فعال صرف ڏيکاريل ٽيب تي، ساڳي ئي show.bs.tabواقعي جي لاءِ)

جيڪڏهن ڪا به ٽيب اڳ ۾ ئي فعال نه هئي، hide.bs.tab۽ hidden.bs.tabواقعا فائر نه ڪيا ويندا.

واقعي جو قسم وصف
ڏيکاريو.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
})