Source

სიის ჯგუფი

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

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

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

Cras justo odio
Dapibus ac facilisis in
მორბი ლეო რისუსი
Porta ac consectetur ac
ვესტიბულუმი და ეროსი

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

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

დაამატეთ .activea-ს .list-group-item, რათა მიუთითოთ მიმდინარე აქტიური არჩევანი.

Cras justo odio
Dapibus ac facilisis in
მორბი ლეო რისუსი
Porta ac consectetur ac
ვესტიბულუმი და ეროსი

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

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

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

Cras justo odio
Dapibus ac facilisis in
მორბი ლეო რისუსი
Porta ac consectetur ac
ვესტიბულუმი და ეროსი

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

დარწმუნდით, რომ არ გამოიყენოთ აქ სტანდარტული .btnკლასები .

Cras justo odio Dapibus ac facilisis in მორბი ლეო რისუსი Porta ac consectetur ac ვესტიბულუმი და ეროსი

<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">Vestibulum at eros</a>
</div>

s- ით <button>, ასევე შეგიძლიათ გამოიყენოთ ატრიბუტი კლასის 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
მორბი ლეო რისუსი
Porta ac consectetur ac
ვესტიბულუმი და ეროსი

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

კონტექსტური კლასები

გამოიყენეთ კონტექსტური კლასები, რათა ჩამოაყალიბოთ ელემენტების ჩამონათვალში სახელმწიფო ფონი და ფერი.

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

სიის ჯგუფის ელემენტის სათაური

3 დღის წინ

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

სიის ჯგუფის ელემენტის სათაური

3 დღის წინ

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

სიის ჯგუფის ელემენტის სათაური

3 დღის წინ

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start 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 flex-column align-items-start">
    <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 flex-column align-items-start">
    <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 ქცევა

გამოიყენეთ ჩანართის JavaScript მოდული — ჩართეთ იგი ინდივიდუალურად ან შედგენილი bootstrap.jsფაილის მეშვეობით — ჩვენი სიის ჯგუფის გასაფართოვებლად, რათა შეიქმნას ადგილობრივი შინაარსის ჩანართების პანელები.

მთავარი პროფილი შეტყობინებები პარამეტრები

Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisecing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.

Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.

Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.

Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.

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

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

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

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

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

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

ააქტიურებს სიის ელემენტის ელემენტს და შინაარსის კონტეინერს. ჩანართს უნდა ჰქონდეს DOM-ში ან კონტეინერის კვანძი 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')

Ივენთი

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

hide.bs.tab(მიმდინარე აქტიურ ჩანართზე)
show.bs.tab(გამოსაჩენ ჩანართზე)
hidden.bs.tab(წინა აქტიურ ჩანართზე, იგივე რაც hide.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`მიზნად აქტიური ჩანართი და წინა აქტიური ჩანართი (თუ შესაძლებელია) შესაბამისად.
დამალვა.ბს.ჩანართი	ეს მოვლენა ირთვება, როდესაც უნდა იყოს ნაჩვენები ახალი ჩანართი (და ამით წინა აქტიური ჩანართი უნდა დაიმალოს). გამოიყენეთ `event.target`და `event.relatedTarget`მიზნად ისახავს მიმდინარე აქტიური ჩანართი და ახალი მალე აქტიური ჩანართი, შესაბამისად.
დამალული.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
})