in English

सूची समूह

सूची समूह सामग्री कें एकटा श्रृंखला कें प्रदर्शित करय कें लेल एकटा लचीला आ शक्तिशाली घटक छै. भीतर के लगभग कोनो सामग्री के समर्थन करय लेल ओकरा संशोधित आ विस्तार करू.

मूल उदाहरण

सबसे बेसिक सूची समूह सूची आइटम आ उचित वर्गक कें साथ एकटा अक्रमित सूची छै. एकरा बाद जे विकल्प आबै छै ओकरो साथ निर्माण करू, या जरूरत के अनुसार अपन सीएसएस के साथ.

  • एकटा आइटम
  • एकटा दोसर आइटम
  • एकटा तेसर वस्तु
  • एकटा चारिम मद
  • आ एकटा पाँचम
<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. वर्तमान मे क्षैतिज सूची समूह कें फ्लश सूची समूहक कें साथ संयोजित नहि कैल जा सकय छै.

ProTip: क्षैतिज रहला पर समान-चौड़ाई सूची समूह आइटम चाहैत छी? .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
  • एकटा दोसर सूची आइटम
  • एकटा तेसर सूची आइटम
<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>

कस्टम सामग्री

भीतर लगभग कोनो एचटीएमएल जोड़ू, एतय तक कि नीचा देल गेल तरहक लिंक कएल गेल सूची समूहक लेल, flexbox उपयोगिता क मदद स .

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

जावास्क्रिप्ट व्यवहार

टैब जावास्क्रिप्ट प्लगइन क॑ प्रयोग करऽ-एकरा व्यक्तिगत रूप स॑ या संकलित 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.

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

विधियाँ

$ ().टैब

एकटा सूची आइटम तत्व आ सामग्री कंटेनर कें सक्रिय करयत छै. टैब मे या त एकटा data-targetया एकटा 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.tab(पिछला सक्रिय टैब पर, वैह जे hide.bs.tabघटनाक लेल छल)
  4. shown.bs.tab(नव-सक्रिय एखनहि देखाओल गेल टैब पर, वैह जे show.bs.tabघटनाक लेल अछि)

जँ कोनो टैब पहिनेसँ सक्रिय नहि छल, तँ hide.bs.tabआओर hidden.bs.tabघटनाकेँ फायर नहि कएल जाएत.

घटना प्रकार वर्णन
देखाउ.बीएस.टैब ई घटना टैब शो पर फायर करैत अछि, मुदा नव टैब देखाबय सं पहिने. क्रमश: सक्रिय टैब आ पिछला सक्रिय टैब (यदि उपलब्ध छै) कें लक्षित करय कें लेल event.targetआ कें उपयोग करूं .event.relatedTarget
देखाओल गेल अछि.bs.tab एकटा टैब देखाओल गेलाक बाद ई घटना टैब शो पर फायर करैत अछि. क्रमश: सक्रिय टैब आ पिछला सक्रिय टैब (यदि उपलब्ध छै) कें लक्षित करय कें लेल event.targetआ कें उपयोग करूं .event.relatedTarget
छिपाएँ.बीएस.टैब ई घटना तखन फायर करैत अछि जखन कोनो नव टैब देखाओल जेबाक अछि (आ एहि तरहें पिछला सक्रिय टैब केँ नुकाएबाक अछि) । वर्तमान सक्रिय टैब आ नव जल्द सक्रिय होबय बला टैब कें लक्षित करय कें लेल क्रमशः event.targetआ कें उपयोग करूं .event.relatedTarget
छिपल.बीएस.टैब ई घटना एकटा नव टैब देखाओल गेलाक बाद फायर करैत अछि (आ एहि तरहें पिछला सक्रिय टैब नुका जाइत अछि) । क्रमशः पिछला सक्रिय टैब आ नव सक्रिय टैब कें लक्षित करय कें लेल event.targetआ कें उपयोग करूं .event.relatedTarget
$('a[data-toggle="list"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})