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" 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 یا 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" tabindex="-1" aria-disabled="true">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>

افقی

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

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

  • Cras justo odio
  • Dapibus ac facilisis in
  • موربی لیو ریسس
<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 in
  • موربی لیو ریسس
<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 in
  • موربی لیو ریسس
<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 in
  • موربی لیو ریسس
<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 in
  • موربی لیو ریسس
<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 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۔ سیاق و سباق کی فہرست گروپ آئٹم پر فعال انتخاب کی نشاندہی کرنے کے لیے اس کا اطلاق کریں۔

<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 کو شامل کریں، یہاں تک کہ لنکڈ لسٹ گروپس کے لیے بھی، جیسا کہ نیچے دیا گیا ہے ۔

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

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

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

$('#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
})