გადადით მთავარ შინაარსზე დოკუმენტების ნავიგაციაზე გადასვლა
Check
in English

სიის ჯგუფი

სიის ჯგუფები არის მოქნილი და ძლიერი კომპონენტი შინაარსის სერიის საჩვენებლად. შეცვალეთ და გააფართოვეთ ისინი მხარდასაჭერად თითქმის ნებისმიერი შინაარსის ფარგლებში.

ამ გვერდზე

ძირითადი მაგალითი

სიის ყველაზე ძირითადი ჯგუფი არის დაუგეგმავი სია სიის ელემენტებით და შესაბამისი კლასებით. დაეყრდნობით მას შემდეგი ვარიანტებით, ან საჭიროების შემთხვევაში საკუთარი CSS-ით.

  • Ნივთი
  • მეორე ნივთი
  • მესამე ნივთი
  • მეოთხე ელემენტი
  • და მეხუთე
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>

აქტიური ნივთები

დაამატეთ .activea-ს .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>

გამორთული ნივთები

დაამატეთ .disableda- .list-group-itemში, რათა ის გამორთული იყოს . გაითვალისწინეთ, რომ ზოგიერთ ელემენტს .disabledასევე დასჭირდება მორგებული JavaScript მათი დაწკაპუნების მოვლენების სრულად გამორთვისთვის (მაგ., ბმულები).

  • გამორთული ელემენტი
  • მეორე ნივთი
  • მესამე ნივთი
  • მეოთხე ელემენტი
  • და მეხუთე
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 ან <button>s, რათა შექმნათ მოქმედი სიის ჯგუფის ელემენტები მაუსის, გამორთული და აქტიური მდგომარეობების დამატებით .list-group-item-action. ჩვენ გამოვყოფთ ამ ფსევდო კლასებს, რათა უზრუნველვყოთ არაინტერაქტიული ელემენტებისაგან (როგორიცაა <li>s ან <div>s) შექმნილი სიის ჯგუფები არ უზრუნველყოფენ დაწკაპუნების ან შეხების შესაძლებლობას.

დარწმუნდით, რომ არ გამოიყენოთ აქ სტანდარტული .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>, ასევე შეგიძლიათ გამოიყენოთ ატრიბუტი კლასის 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>ელემენტი) დანომრილი სიის ჯგუფის ერთეულებში მონაწილეობის მისაღებად. ნომრები გენერირდება CSS-ის საშუალებით (განსხვავებით <ol>ბრაუზერის ნაგულისხმევი სტილისგან) სიის ჯგუფის ელემენტებში უკეთესი განთავსებისთვის და უკეთესი პერსონალიზაციისთვის.

რიცხვები გენერირდება counter-resetზე <ol>და შემდეგ სტილიზებულია და მოთავსებულია ::beforeფსევდოელემენტით <li>ერთად counter-incrementდა content.

  1. სიის ელემენტი
  2. სიის ელემენტი
  3. სიის ელემენტი
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>

ეს მშვენივრად მუშაობს პერსონალურ შინაარსთანაც.

  1. ქვესათაური
    შინაარსი სიის ელემენტისთვის
    14
  2. ქვესათაური
    შინაარსი სიის ელემენტისთვის
    14
  3. ქვესათაური
    შინაარსი სიის ელემენტისთვის
    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. ამჟამად ჰორიზონტალური სიის ჯგუფები არ შეიძლება გაერთიანდეს flush list ჯგუფებთან.

ProTip: გსურთ თანაბარი სიგანის სიის ჯგუფის ელემენტები, როდესაც ჰორიზონტალურია? დაამატეთ .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 შიგნით, თუნდაც დაკავშირებული სიის ჯგუფებისთვის, როგორიცაა ქვემოთ მოცემული, flexbox utilities- ის დახმარებით .

სიის ჯგუფის ელემენტის სათაური
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>

ჩექმები და რადიოები

მოათავსეთ Bootstrap-ის ჩამრთველი ველები და რადიოები სიის ჯგუფის ელემენტებში და საჭიროებისამებრ დააკონფიგურირეთ. თქვენ შეგიძლიათ გამოიყენოთ ისინი <label>s-ის გარეშე, მაგრამ გთხოვთ, დაიმახსოვროთ 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>

შეგიძლიათ გამოიყენოთ .stretched-links <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>

CSS

ცვლადები

დამატებულია v5.2.0-ში

როგორც Bootstrap-ის განვითარებადი 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()mixin-ით.

// 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 ქცევა

გამოიყენეთ ჩანართის 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>

მონაცემთა ატრიბუტების გამოყენება

თქვენ შეგიძლიათ გაააქტიუროთ სიის ჯგუფური ნავიგაცია JavaScript-ის დაწერის გარეშე უბრალოდ 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>

JavaScript-ის საშუალებით

ჩანართის სიის ელემენტის ჩართვა JavaScript-ის საშუალებით (სიის თითოეული ელემენტი ინდივიდუალურად უნდა გააქტიურდეს):

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 მეთოდი ასინქრონულია და იწყებს გადასვლას . ისინი უბრუნდებიან აბონენტს გადასვლის დაწყებისთანავე, მაგრამ მის დასრულებამდე . გარდა ამისა, მეთოდის გამოძახება გარდამავალ კომპონენტზე იგნორირებული იქნება .

იხილეთ ჩვენი JavaScript დოკუმენტაცია დამატებითი ინფორმაციისთვის .

ააქტიურებს თქვენს შინაარსს, როგორც ჩანართის ელემენტს.

თქვენ შეგიძლიათ შექმნათ ჩანართის მაგალითი კონსტრუქტორით, მაგალითად:

const bsTab = new bootstrap.Tab('#myTab')
მეთოდი აღწერა
dispose ანადგურებს ელემენტის ჩანართს.
getInstance სტატიკური მეთოდი, რომელიც საშუალებას გაძლევთ მიიღოთ DOM ელემენტთან დაკავშირებული ჩანართის მაგალითი, შეგიძლიათ გამოიყენოთ იგი შემდეგნაირად: bootstrap.Tab.getInstance(element).
getOrCreateInstance სტატიკური მეთოდი, რომელიც აბრუნებს DOM ელემენტთან დაკავშირებულ ჩანართის მაგალითს ან ქმნის ახალს, თუ ის არ იყო ინიციალიზებული. შეგიძლიათ გამოიყენოთ ეს ასე: bootstrap.Tab.getOrCreateInstance(element).
show ირჩევს მოცემულ ჩანართს და აჩვენებს მის დაკავშირებულ პანელს. ნებისმიერი სხვა ჩანართი, რომელიც ადრე იყო არჩეული, გაუქმდება და მასთან დაკავშირებული პანელი იმალება. უბრუნდება აბონენტს ჩანართების პანელის რეალურად ჩვენებამდე (ანუ shown.bs.tabმოვლენის დადგომამდე).

Ივენთი

ახალი ჩანართის ჩვენებისას, მოვლენები ჩნდება შემდეგი თანმიმდევრობით:

  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მოვლენები არ გაიხსნება.

ღონისძიების ტიპი აღწერა
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
  })
})