فہرست گروپ

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

بنیادی مثال

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

ایک آئٹم
ایک دوسری چیز
تیسری چیز
چوتھی چیز
اور پانچواں

<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

ایک فعال آئٹم
ایک دوسری چیز
تیسری چیز
چوتھی چیز
اور پانچواں

<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 کرنے کے لیے اس میں شامل کریں ۔ نوٹ کریں کہ کچھ عناصر کے ساتھ بھی حسب ضرورت جاوا اسکرپٹ کی ضرورت ہوگی تاکہ وہ اپنے کلک ایونٹس (مثلاً لنکس) کو مکمل طور پر غیر فعال کریں۔.list-group-item.disabled

ایک معذور چیز
ایک دوسری چیز
تیسری چیز
چوتھی چیز
اور پانچواں

<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 یا 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" 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>

s کے ساتھ ، آپ کلاس کے بجائے انتساب <button>کا استعمال بھی کر سکتے ہیں ۔ افسوس کی بات ہے کہ s معذور وصف کی حمایت نہیں کرتا ہے۔disabled.disabled<a>

<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 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پیرنٹ کنٹینر (مثلاً کارڈز) میں فہرست گروپ آئٹمز کو کنارے سے کنارے رینڈر کرنے کے لیے کچھ بارڈرز اور گول کونوں کو ہٹانے کے لیے شامل کریں ۔

ایک آئٹم
ایک دوسری چیز
تیسری چیز
چوتھی چیز
اور پانچواں

<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-horizontalفہرست گروپ آئٹمز کے لے آؤٹ کو عمودی سے افقی تمام بریک پوائنٹس میں تبدیل کرنے کے لیے شامل کریں ۔ متبادل طور پر، .list-group-horizontal-{sm|md|lg|xl}اس بریک پوائنٹ سے شروع ہونے والے لسٹ گروپ کو افقی بنانے کے لیے ایک ریسپانسیو ویرینٹ کا انتخاب کریں min-width۔ فی الحال افقی فہرست گروپس کو فلش لسٹ گروپس کے ساتھ جوڑا نہیں جا سکتا۔

پرو ٹپ: افقی ہونے پر مساوی چوڑائی والے گروپ آئٹمز چاہتے ہیں؟ .flex-fillہر فہرست گروپ آئٹم میں شامل کریں ۔

ایک آئٹم
ایک دوسری چیز
تیسری چیز

ایک آئٹم
ایک دوسری چیز
تیسری چیز

ایک آئٹم
ایک دوسری چیز
تیسری چیز

ایک آئٹم
ایک دوسری چیز
تیسری چیز

ایک آئٹم
ایک دوسری چیز
تیسری چیز

<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">
  <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۔ یہاں ہوور اسٹائل کا اضافہ نوٹ کریں جو پچھلی مثال میں موجود نہیں ہے۔ ریاست کی بھی حمایت کی جاتی ہے .active۔ سیاق و سباق کی فہرست گروپ آئٹم پر فعال انتخاب کی نشاندہی کرنے کے لیے اس کا اطلاق کریں۔

ایک سادہ ڈیفالٹ فہرست گروپ آئٹم ایک سادہ پرائمری لسٹ گروپ آئٹم ایک سادہ ثانوی فہرست گروپ آئٹم کامیابی کی ایک سادہ فہرست گروپ آئٹم خطرے کی ایک سادہ فہرست گروپ آئٹم ایک سادہ انتباہی فہرست گروپ آئٹم ایک سادہ معلوماتی فہرست گروپ آئٹم ایک سادہ لائٹ لسٹ گروپ آئٹم ایک سادہ ڈارک لسٹ گروپ آئٹم

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

معاون ٹیکنالوجیز کے معنی پہنچانا

معنی کو شامل کرنے کے لیے رنگ کا استعمال صرف ایک بصری اشارہ فراہم کرتا ہے، جو کہ معاون ٹیکنالوجیز - جیسے کہ اسکرین ریڈرز کے صارفین تک نہیں پہنچایا جائے گا۔ اس بات کو یقینی بنائیں کہ رنگ سے ظاہر کی گئی معلومات یا تو خود مواد سے واضح ہے (مثلاً مرئی متن)، یا متبادل ذرائع سے شامل کی گئی ہے، جیسے کہ .sr-onlyکلاس کے ساتھ چھپا ہوا اضافی متن۔

بیجز کے ساتھ

کچھ یوٹیلیٹیز کی مدد سے بغیر پڑھے ہوئے شمار، سرگرمی وغیرہ دکھانے کے لیے کسی بھی فہرست گروپ آئٹم میں بیجز شامل کریں ۔

ایک فہرست آئٹم14
ایک دوسری فہرست آئٹم2
ایک تیسری فہرست آئٹم1

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

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

فلیکس باکس یوٹیلیٹیز کی مدد سے، اس کے اندر تقریباً کسی بھی HTML کو شامل کریں، یہاں تک کہ لنکڈ لسٹ گروپس کے لیے بھی، جیسا کہ نیچے دیا گیا ہے ۔

گروپ آئٹم کی سرخی کی فہرست بنائیں

3 دن پہلے

پیراگراف میں پلیس ہولڈر کا کچھ مواد۔

اور کچھ چھوٹا پرنٹ۔

گروپ آئٹم کی سرخی کی فہرست بنائیں

3 دن پہلے

پیراگراف میں پلیس ہولڈر کا کچھ مواد۔

اور کچھ خاموش چھوٹے پرنٹ۔

گروپ آئٹم کی سرخی کی فہرست بنائیں

3 دن پہلے

پیراگراف میں پلیس ہولڈر کا کچھ مواد۔

اور کچھ خاموش چھوٹے پرنٹ۔

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

جاوا اسکرپٹ کا رویہ

ٹیب JavaScript پلگ ان کا استعمال کریں — اسے انفرادی طور پر یا مرتب کردہ bootstrap.jsفائل کے ذریعے شامل کریں — مقامی مواد کے ٹیبل پینز بنانے کے لیے ہمارے لسٹ گروپ کو بڑھانے کے لیے۔

گھر پروفائل پیغامات ترتیبات

"ہوم" سے متعلق پیراگراف میں کچھ پلیس ہولڈر مواد۔ اور کچھ اور مواد، جو یہاں صرف اس ٹیب پینل کو بھرنے اور بھرنے کے لیے استعمال کیا گیا ہے۔ پیداوار میں، آپ کو واضح طور پر یہاں زیادہ حقیقی مواد ملے گا۔ اور نہ صرف متن۔ یہ کچھ بھی ہو سکتا ہے، واقعی۔ متن، تصاویر، فارم۔

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

<div role="tabpanel">
  <!-- 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>
</div>

جاوا اسکرپٹ کے ذریعے

جاوا اسکرپٹ کے ذریعے ٹیبل ایبل لسٹ آئٹم کو فعال کریں (ہر فہرست آئٹم کو انفرادی طور پر چالو کرنے کی ضرورت ہے):

$('#myList a').on('click', function (event) {
  event.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')

تقریبات

نیا ٹیب دکھاتے وقت، واقعات درج ذیل ترتیب میں فائر ہوتے ہیں:

hide.bs.tab(موجودہ فعال ٹیب پر)
show.bs.tab(دکھائے جانے والے ٹیب پر)
hidden.bs.tabhide.bs.tab(پچھلے فعال ٹیب پر، ایونٹ کے لیے وہی ایک )
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 (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})