Source

فہرست گروپ

فہرست گروپ مواد کی ایک سیریز کو ظاہر کرنے کے لیے ایک لچکدار اور طاقتور جزو ہیں۔ ان میں ترمیم کریں اور ان میں توسیع کریں تاکہ ان کے اندر موجود کسی بھی مواد کو سپورٹ کیا جا سکے۔

بنیادی مثال

سب سے بنیادی فہرست گروپ ایک غیر ترتیب شدہ فہرست ہے جس میں فہرست اشیاء اور مناسب کلاسز ہیں۔ اس پر عمل کرنے والے اختیارات کے ساتھ، یا ضرورت کے مطابق اپنے سی ایس ایس کے ساتھ تعمیر کریں۔

  • Cras justo odio
  • Dapibus ac facilisis in
  • موربی لیو ریسس
  • پورٹا اے سی کنیکٹیٹور اے سی
  • ویسٹیبولم اور ایروز
<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 in
  • موربی لیو ریسس
  • پورٹا اے سی کنیکٹیٹور اے سی
  • ویسٹیبولم اور ایروز
<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
  • موربی لیو ریسس
  • پورٹا اے سی کنیکٹیٹور اے سی
  • ویسٹیبولم اور ایروز
<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کلاسیں استعمال نہ کریں ۔

Cras justo odio Dapibus ac facilisis in موربی لیو ریسس پورٹا اے سی کنیکٹیٹور اے سی ویسٹیبولم اور ایروز 
<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
  • Dapibus ac facilisis in
  • موربی لیو ریسس
  • پورٹا اے سی کنیکٹیٹور اے سی
  • ویسٹیبولم اور ایروز
<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 کو شامل کریں، یہاں تک کہ لنکڈ لسٹ گروپس کے لیے بھی، جیسا کہ نیچے دیا گیا ہے ۔

گروپ آئٹم کی سرخی کی فہرست بنائیں
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 پلگ ان کا استعمال کریں — اسے انفرادی طور پر یا مرتب کردہ 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 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>

ڈیٹا اوصاف کا استعمال

آپ کسی بھی جاوا اسکرپٹ کو لکھے بغیر 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-targetDOM 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.tab(نئے فعال ابھی دکھائے گئے ٹیب پر، وہی جو show.bs.tabایونٹ کے لیے ہے)

اگر کوئی ٹیب پہلے سے فعال نہیں تھا، hide.bs.tabاور hidden.bs.tabواقعات کو برطرف نہیں کیا جائے گا۔

واقعہ کی قسم تفصیل
show.bs.tab یہ ایونٹ ٹیب شو پر فائر ہوتا ہے، لیکن اس سے پہلے کہ نیا ٹیب دکھایا گیا ہو۔ event.targetبالترتیب فعال ٹیب اور event.relatedTargetپچھلے فعال ٹیب (اگر دستیاب ہو) کو نشانہ بنانے کے لیے استعمال کریں ۔
دکھایا گیا بی ایس ٹیب یہ ایونٹ ٹیب کے دکھائے جانے کے بعد ٹیب شو پر فائر ہوتا ہے۔ 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
})