in English

فہرست گروپ

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

اس صفحہ پر

بنیادی مثال

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

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

html

<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

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

html

<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

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

html

<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کلاسیں استعمال نہ کریں ۔

موجودہ لنک آئٹم دوسرا لنک آئٹم ایک تیسرا لنک آئٹم چوتھا لنک آئٹم ایک غیر فعال لنک آئٹم

html

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

html

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

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

html

<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-numberedنمبر والی فہرست گروپ آئٹمز کو آپٹ ان کرنے کے لیے موڈیفائر کلاس (اور اختیاری طور پر ایک <ol>عنصر استعمال کریں) شامل کریں ۔ <ol>فہرست گروپ آئٹمز کے اندر بہتر جگہ کا تعین کرنے اور بہتر تخصیص کی اجازت دینے کے لیے نمبر CSS (جیسا کہ ڈیفالٹ براؤزر اسٹائلنگ کے برخلاف) کے ذریعے تیار کیے جاتے ہیں ۔

نمبرز آن کے ذریعے تیار کیے جاتے ہیں counter-reset، <ol>اور پھر اسٹائل کیے جاتے ہیں اور اس کے ساتھ اور پر ایک چھدم عنصر کے ساتھ رکھے جاتے ::beforeہیں ۔<li>counter-incrementcontent

ایک فہرست آئٹم
ایک فہرست آئٹم
ایک فہرست آئٹم

html

<ol class="list-group list-group-numbered">
  <li class="list-group-item">A list item</li>
  <li class="list-group-item">A list item</li>
  <li class="list-group-item">A list item</li>
</ol>

یہ حسب ضرورت مواد کے ساتھ بھی بہت اچھا کام کرتے ہیں۔

ذیلی سرخی
فہرست آئٹم کے لیے مواد
14
ذیلی سرخی
فہرست آئٹم کے لیے مواد
14
ذیلی سرخی
فہرست آئٹم کے لیے مواد
14

html

<ol class="list-group list-group-numbered">
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
</ol>

افقی

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

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

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

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

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

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

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

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

html

<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 list-group-horizontal-xxl">
  <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>

سیاق و سباق کی کلاسز

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

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

html

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

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

html

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

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

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

بیجز کے ساتھ

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

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

html

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

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

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

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

3 دن پہلے

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

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

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

3 دن پہلے

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

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

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

3 دن پہلے

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

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

html

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    <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>

چیک باکس اور ریڈیو

بوٹسٹریپ کے چیک باکسز اور ریڈیوز کو فہرست گروپ آئٹمز میں رکھیں اور حسب ضرورت حسب ضرورت بنائیں۔ آپ انہیں s کے بغیر استعمال کر سکتے ہیں <label>، لیکن براہ کرم aria-labelرسائی کے لیے ایک وصف اور قدر شامل کرنا یاد رکھیں۔

پہلا چیک باکس
دوسرا چیک باکس
تیسرا چیک باکس

html

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox">
    <label class="form-check-label" for="firstCheckbox">First checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox">
    <label class="form-check-label" for="secondCheckbox">Second checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox">
    <label class="form-check-label" for="thirdCheckbox">Third checkbox</label>
  </li>
</ul>

پہلا ریڈیو
دوسرا ریڈیو
تیسرا ریڈیو

html

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="firstRadio" checked>
    <label class="form-check-label" for="firstRadio">First radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="secondRadio">
    <label class="form-check-label" for="secondRadio">Second radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio">
    <label class="form-check-label" for="thirdRadio">Third radio</label>
  </li>
</ul>

آپ پوری فہرست گروپ آئٹم کو قابل کلک بنانے کے لیے s .stretched-linkپر استعمال کر سکتے ہیں۔<label>

پہلا چیک باکس
دوسرا چیک باکس
تیسرا چیک باکس

html

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckboxStretched">
    <label class="form-check-label stretched-link" for="firstCheckboxStretched">First checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckboxStretched">
    <label class="form-check-label stretched-link" for="secondCheckboxStretched">Second checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckboxStretched">
    <label class="form-check-label stretched-link" for="thirdCheckboxStretched">Third checkbox</label>
  </li>
</ul>

سی ایس ایس

متغیرات

v5.2.0 میں شامل کیا گیا۔

بوٹسٹریپ کے ابھرتے ہوئے CSS متغیر کے نقطہ نظر کے ایک حصے کے طور پر، فہرست گروپس اب مقامی CSS متغیرات .list-groupکو بہتر ریئل ٹائم حسب ضرورت کے لیے استعمال کرتے ہیں۔ CSS متغیرات کی قدریں Sass کے ذریعے سیٹ کی جاتی ہیں، اس لیے Sass حسب ضرورت اب بھی تعاون یافتہ ہے۔

  --#{$prefix}list-group-color: #{$list-group-color};
  --#{$prefix}list-group-bg: #{$list-group-bg};
  --#{$prefix}list-group-border-color: #{$list-group-border-color};
  --#{$prefix}list-group-border-width: #{$list-group-border-width};
  --#{$prefix}list-group-border-radius: #{$list-group-border-radius};
  --#{$prefix}list-group-item-padding-x: #{$list-group-item-padding-x};
  --#{$prefix}list-group-item-padding-y: #{$list-group-item-padding-y};
  --#{$prefix}list-group-action-color: #{$list-group-action-color};
  --#{$prefix}list-group-action-hover-color: #{$list-group-action-hover-color};
  --#{$prefix}list-group-action-hover-bg: #{$list-group-hover-bg};
  --#{$prefix}list-group-action-active-color: #{$list-group-action-active-color};
  --#{$prefix}list-group-action-active-bg: #{$list-group-action-active-bg};
  --#{$prefix}list-group-disabled-color: #{$list-group-disabled-color};
  --#{$prefix}list-group-disabled-bg: #{$list-group-disabled-bg};
  --#{$prefix}list-group-active-color: #{$list-group-active-color};
  --#{$prefix}list-group-active-bg: #{$list-group-active-bg};
  --#{$prefix}list-group-active-border-color: #{$list-group-active-border-color};

Sass متغیرات

$list-group-color:                  $gray-900;
$list-group-bg:                     $white;
$list-group-border-color:           rgba($black, .125);
$list-group-border-width:           $border-width;
$list-group-border-radius:          $border-radius;

$list-group-item-padding-y:         $spacer * .5;
$list-group-item-padding-x:         $spacer;
$list-group-item-bg-scale:          -80%;
$list-group-item-color-scale:       40%;

$list-group-hover-bg:               $gray-100;
$list-group-active-color:           $component-active-color;
$list-group-active-bg:              $component-active-bg;
$list-group-active-border-color:    $list-group-active-bg;

$list-group-disabled-color:         $gray-600;
$list-group-disabled-bg:            $list-group-bg;

$list-group-action-color:           $gray-700;
$list-group-action-hover-color:     $list-group-action-color;

$list-group-action-active-color:    $body-color;
$list-group-action-active-bg:       $gray-200;

مکسنس

s کے لیے سیاق و سباق کی مختلف کلاسیں بنانے کے لیے استعمال کیا جاتا $theme-colorsہے ۔.list-group-item

@mixin list-group-item-variant($state, $background, $color) {
  .list-group-item-#{$state} {
    color: $color;
    background-color: $background;

    &.list-group-item-action {
      &:hover,
      &:focus {
        color: $color;
        background-color: shade-color($background, 10%);
      }

      &.active {
        color: $white;
        background-color: $color;
        border-color: $color;
      }
    }
  }
}

لوپ

لوپ جو list-group-item-variant()مکسین کے ساتھ موڈیفائر کلاسز تیار کرتا ہے۔

// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.

@each $state, $value in $theme-colors {
  $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
  $list-group-variant-color: shift-color($value, $list-group-item-color-scale);
  @if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
    $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
  }

  @include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
}

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

ٹیب 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-bs-toggle="list" href="#list-home" role="tab" aria-controls="list-home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="list-profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="list-messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab" aria-controls="list-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-bs-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-bs-toggle="list" href="#home" role="tab">Home</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
    <a class="list-group-item list-group-item-action" data-bs-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>

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

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

const triggerTabList = document.querySelectorAll('#myTab a')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', event => {
    event.preventDefault()
    tabTrigger.show()
  })
})

آپ انفرادی فہرست آئٹم کو کئی طریقوں سے چالو کر سکتے ہیں:

const triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

const triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first 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>

طریقے

غیر مطابقت پذیر طریقے اور ٹرانزیشن

تمام API طریقے غیر مطابقت پذیر ہیں اور ایک منتقلی شروع کرتے ہیں ۔ منتقلی شروع ہوتے ہی وہ کال کرنے والے کے پاس واپس آ جاتے ہیں لیکن اس کے ختم ہونے سے پہلے ۔ اس کے علاوہ، منتقلی کے جزو پر میتھڈ کال کو نظر انداز کر دیا جائے گا ۔

مزید معلومات کے لیے ہماری جاوا اسکرپٹ دستاویزات دیکھیں ۔

آپ کے مواد کو ایک ٹیب عنصر کے طور پر فعال کرتا ہے۔

آپ کنسٹرکٹر کے ساتھ ایک ٹیب مثال بنا سکتے ہیں، مثال کے طور پر:

const bsTab = new bootstrap.Tab('#myTab')

طریقہ	تفصیل
`dispose`	ایک عنصر کے ٹیب کو تباہ کرتا ہے۔
`getInstance`	جامد طریقہ جو آپ کو DOM عنصر سے وابستہ ٹیب مثال حاصل کرنے کی اجازت دیتا ہے، آپ اسے اس طرح استعمال کر سکتے ہیں: `bootstrap.Tab.getInstance(element)`۔
`getOrCreateInstance`	جامد طریقہ جو کسی DOM عنصر سے وابستہ ٹیب مثال کو لوٹاتا ہے یا اسے شروع نہ کرنے کی صورت میں ایک نیا تخلیق کرتا ہے۔ آپ اسے اس طرح استعمال کر سکتے ہیں: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	دیئے گئے ٹیب کو منتخب کرتا ہے اور اس سے منسلک پین دکھاتا ہے۔ کوئی دوسرا ٹیب جو پہلے منتخب کیا گیا تھا وہ غیر منتخب ہو جاتا ہے اور اس سے منسلک پین چھپا جاتا ہے۔ ٹیب پین کے حقیقت میں دکھائے جانے سے پہلے کال کرنے والے کے پاس واپس آجاتا ہے (یعنی `shown.bs.tab`واقعہ پیش آنے سے پہلے)۔

تقریبات

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

hide.bs.tab(موجودہ فعال ٹیب پر)
show.bs.tab(دکھائے جانے والے ٹیب پر)
hidden.bs.tabhide.bs.tab(پچھلے فعال ٹیب پر، ایونٹ کے لیے وہی ایک )
shown.bs.tab(نئے فعال ابھی دکھائے گئے ٹیب پر، وہی جو show.bs.tabایونٹ کے لیے ہے)

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

واقعہ کی قسم	تفصیل
`hide.bs.tab`	یہ واقعہ اس وقت شروع ہوتا ہے جب ایک نیا ٹیب دکھایا جانا ہوتا ہے (اور اس طرح پچھلے فعال ٹیب کو چھپایا جانا ہوتا ہے)۔ بالترتیب موجودہ ایکٹو ٹیب اور جلد فعال ہونے والے نئے ٹیب کا استعمال کریں `event.target`اور ان کو نشانہ بنائیں۔`event.relatedTarget`
`hidden.bs.tab`	یہ واقعہ ایک نئے ٹیب کے دکھائے جانے کے بعد فائر ہوتا ہے (اور اس طرح پچھلا فعال ٹیب چھپ جاتا ہے)۔ بالترتیب پچھلے ایکٹو ٹیب اور نئے ایکٹو ٹیب کو ٹارگٹ کرنے کے لیے `event.target`استعمال کریں ۔`event.relatedTarget`
`show.bs.tab`	یہ ایونٹ ٹیب شو پر فائر ہوتا ہے، لیکن اس سے پہلے کہ نیا ٹیب دکھایا گیا ہو۔ `event.target`بالترتیب فعال ٹیب اور `event.relatedTarget`پچھلے فعال ٹیب (اگر دستیاب ہو) کو نشانہ بنانے کے لیے استعمال کریں ۔
`shown.bs.tab`	یہ ایونٹ ٹیب کے دکھائے جانے کے بعد ٹیب شو پر فائر ہوتا ہے۔ `event.target`بالترتیب فعال ٹیب اور `event.relatedTarget`پچھلے فعال ٹیب (اگر دستیاب ہو) کو نشانہ بنانے کے لیے استعمال کریں ۔

const tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(tabElm => {
  tabElm.addEventListener('shown.bs.tab', event => {
    event.target // newly activated tab
    event.relatedTarget // previous active tab
  })
})