Source

Ẹgbẹ akojọ

Awọn ẹgbẹ atokọ jẹ ẹya to rọ ati agbara fun iṣafihan lẹsẹsẹ ti akoonu. Ṣatunṣe ki o faagun wọn lati ṣe atilẹyin fun eyikeyi akoonu laarin.

Apẹẹrẹ ipilẹ

Ẹgbẹ atokọ ipilẹ julọ jẹ atokọ ti a ko paṣẹ pẹlu awọn ohun atokọ ati awọn kilasi to dara. Kọ sori rẹ pẹlu awọn aṣayan ti o tẹle, tabi pẹlu CSS tirẹ bi o ṣe nilo.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum ati eros
<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>

Awọn nkan ti nṣiṣe lọwọ

Ṣafikun .active-un lati .list-group-itemtọka si yiyan ti nṣiṣe lọwọ lọwọlọwọ.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum ati eros
<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>

Awọn nkan alaabo

Fikun -un .disabledlati jẹ .list-group-itemki o dabi alaabo. Ṣe akiyesi pe diẹ ninu awọn eroja pẹlu .disabledyoo tun nilo JavaScript aṣa lati pa awọn iṣẹlẹ titẹ wọn ni kikun (fun apẹẹrẹ, awọn ọna asopọ).

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum ati eros
<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>

Lo <a>awọn s tabi <button>s lati ṣẹda awọn ohun ẹgbẹ ti o le ṣiṣẹ pẹlu rababa, alaabo, ati awọn ipinlẹ ti nṣiṣe lọwọ nipa fifi .list-group-item-action. A ya awọn kilasi afarape wọnyi sọtọ lati rii daju pe awọn ẹgbẹ atokọ ti a ṣe ti awọn eroja ti kii ṣe ibaraenisepo (bii awọn <li>s tabi <div>s) ko pese titẹ tabi tẹ owo ni kia kia.

Rii daju pe o ko lo awọn .btnkilasi boṣewa nibi .

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum ati eros 
<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>

Pẹlu <button>s, o tun le ṣe awọn lilo ti awọn disabledabuda dipo ti .disabledkilasi. Ibanujẹ, <a>s ko ṣe atilẹyin abuda alaabo.

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

Fọ

Fikun -un .list-group-flushlati yọ diẹ ninu awọn aala ati awọn igun yika lati ṣe awọn ohun ẹgbẹ akojọ eti-si-eti ninu apo obi kan (fun apẹẹrẹ, awọn kaadi).

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum ati eros
<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>

Awọn kilasi asọye

Lo awọn kilasi ọrọ-ọrọ si awọn ohun atokọ ara pẹlu abẹlẹ ipinlẹ ati awọ.

  • Dapibus ac facilisis in
  • Eyi jẹ ohun ẹgbẹ atokọ akọkọ
  • Eyi jẹ nkan ẹgbẹ atokọ keji
  • Eyi jẹ ohun kan akojọpọ aṣeyọri
  • Eyi jẹ ohun ẹgbẹ atokọ eewu
  • Eyi jẹ ohun kan akojọpọ ikilọ
  • Eyi jẹ nkan ẹgbẹ atokọ alaye kan
  • Eyi jẹ ohun ẹgbẹ atokọ ina
  • Eyi jẹ ohun ẹgbẹ atokọ dudu
<ul class="list-group">
  <li class="list-group-item">Dapibus ac facilisis in</li>


  <li class="list-group-item list-group-item-primary">This is a primary list group item</li>
  <li class="list-group-item list-group-item-secondary">This is a secondary list group item</li>
  <li class="list-group-item list-group-item-success">This is a success list group item</li>
  <li class="list-group-item list-group-item-danger">This is a danger list group item</li>
  <li class="list-group-item list-group-item-warning">This is a warning list group item</li>
  <li class="list-group-item list-group-item-info">This is a info list group item</li>
  <li class="list-group-item list-group-item-light">This is a light list group item</li>
  <li class="list-group-item list-group-item-dark">This is a dark list group item</li>
</ul>

Awọn kilasi asọye tun ṣiṣẹ pẹlu .list-group-item-action. Ṣe akiyesi afikun ti awọn aza rababa nibi ko wa ninu apẹẹrẹ ti tẹlẹ. Tun ni atilẹyin ni .activeipinle; lo lati ṣe afihan yiyan ti nṣiṣe lọwọ lori ohun ẹgbẹ atokọ ọrọ-ọrọ kan.

Dapibus ac facilisis in Eyi jẹ ohun ẹgbẹ atokọ akọkọ Eyi jẹ nkan ẹgbẹ atokọ keji Eyi jẹ ohun kan akojọpọ aṣeyọri Eyi jẹ ohun ẹgbẹ atokọ eewu Eyi jẹ ohun kan akojọpọ ikilọ Eyi jẹ nkan ẹgbẹ atokọ alaye kan Eyi jẹ ohun ẹgbẹ atokọ ina Eyi jẹ ohun ẹgbẹ atokọ dudu 
<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">This is a primary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">This is a secondary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">This is a success list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">This is a danger list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">This is a warning list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">This is a info list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">This is a light list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">This is a dark list group item</a>
</div>
Gbigbe itumo si awọn imọ-ẹrọ iranlọwọ

Lilo awọ lati ṣafikun itumọ nikan n pese itọkasi wiwo, eyiti kii yoo gbe lọ si awọn olumulo ti awọn imọ-ẹrọ iranlọwọ - gẹgẹbi awọn oluka iboju. Rii daju pe alaye ti o tọka si nipasẹ awọ jẹ eyiti o han gbangba lati inu akoonu funrararẹ (fun apẹẹrẹ ọrọ ti o han), tabi pẹlu pẹlu awọn ọna omiiran, gẹgẹbi afikun ọrọ ti o farapamọ pẹlu .sr-onlykilasi naa.

Pẹlu awọn baaji

Ṣafikun awọn baagi si eyikeyi ohun ẹgbẹ atokọ lati ṣafihan awọn iṣiro ti a ko ka, iṣẹ ṣiṣe, ati diẹ sii pẹlu iranlọwọ ti diẹ ninu awọn ohun elo .

  • Cras justo odio14
  • Dapibus ac facilisis in2
  • Morbi leo risus1 
<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>

Aṣa akoonu

Ṣafikun fere eyikeyi HTML laarin, paapaa fun awọn ẹgbẹ atokọ ti o sopọ bi eyiti o wa ni isalẹ, pẹlu iranlọwọ ti awọn ohun elo flexbox .

Atokọ nkan ẹgbẹ
3 ọjọ seyin

Donec id elit ti kii mi porta gravida ati eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit ti kii mi porta.
Atokọ nkan ẹgbẹ
3 ọjọ seyin

Donec id elit ti kii mi porta gravida ati eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit ti kii mi porta.
Atokọ nkan ẹgbẹ
3 ọjọ seyin

Donec id elit ti kii mi porta gravida ati eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit ti kii 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 ihuwasi

Lo ohun itanna JavaScript taabu-pẹlu ẹyọkan tabi nipasẹ bootstrap.jsfaili ti a ṣajọpọ—lati faagun ẹgbẹ atokọ wa lati ṣẹda awọn panee ti akoonu agbegbe.

Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing adaṣe 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 inciddunt consectetur culpa aliquip eiusmod dolor. Animu 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>

Lilo awọn abuda data

O le mu lilọ kiri ẹgbẹ akojọ kan ṣiṣẹ laisi kikọ eyikeyi JavaScript nipa sisọ pato data-toggle="list"tabi lori nkan kan. Lo awọn abuda data wọnyi lori .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>

Nipasẹ JavaScript

Jeki ohun atokọ tabbable ṣiṣẹ nipasẹ JavaScript (ohun atokọ kọọkan nilo lati muu ṣiṣẹ ni ẹyọkan):

$('#myList a').on('click', function (e) {
  e.preventDefault()
  $(this).tab('show')
})

O le mu nkan atokọ kọọkan ṣiṣẹ ni awọn ọna pupọ:

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

Ipa ipare

Lati jẹ ki nronu awọn taabu ipare sinu, fi .fadesi kọọkan .tab-pane. PAN taabu akọkọ gbọdọ tun ni .showlati jẹ ki akoonu ibẹrẹ han.

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

Awọn ọna

$().taabu

Mu ohun akojọ kan ṣiṣẹ ati eiyan akoonu. Taabu yẹ ki o ni boya a data-targettabi hrefifọkansi oju ipade apoti kan ninu DOM.

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

.taabu('ifihan')

Yan ohun akojọ ti a fun ati ṣafihan PAN ti o somọ. Eyikeyi ohun akojọ miiran ti o ti yan tẹlẹ di aiyan ati pe apamọ ti o somọ ti wa ni pamọ. Pada si olupe ṣaaju ki iwe taabu ti han gangan (fun apẹẹrẹ, ṣaaju ki shown.bs.tabiṣẹlẹ to waye).

$('#someListItem').tab('show')

Awọn iṣẹlẹ

Nigbati o ba nfihan taabu tuntun, awọn iṣẹlẹ ina ni ilana atẹle:

  1. hide.bs.tab(lori taabu lọwọ lọwọlọwọ)
  2. show.bs.tab(lori taabu ti yoo han)
  3. hidden.bs.tab(lori taabu ti nṣiṣe lọwọ iṣaaju, ọkan kanna fun hide.bs.tabiṣẹlẹ naa)
  4. shown.bs.tab(lori taabu ti o ṣẹṣẹ n ṣiṣẹ tuntun, ọkan kanna fun show.bs.tabiṣẹlẹ naa)

Ti ko ba si taabu ti ṣiṣẹ tẹlẹ, hide.bs.tabati awọn hidden.bs.tabiṣẹlẹ ko ni le kuro lenu ise.

Iru iṣẹlẹ Apejuwe
fihan.bs.taabu Iṣẹlẹ yii ina lori ifihan taabu, ṣugbọn ṣaaju ki o to han taabu tuntun. Lo event.targetati event.relatedTargetlati fojusi taabu ti nṣiṣe lọwọ ati taabu lọwọlọwọ ti tẹlẹ (ti o ba wa) ni atele.
han.bs.taabu Iṣẹlẹ yi ina lori ifihan taabu lẹhin ti a ti fi taabu kan han. Lo event.targetati event.relatedTargetlati fojusi taabu ti nṣiṣe lọwọ ati taabu lọwọlọwọ ti tẹlẹ (ti o ba wa) ni atele.
tọju.bs.taabu Iṣẹlẹ yii n ṣiṣẹ nigbati taabu tuntun yoo han (ati nitorinaa taabu ti nṣiṣe lọwọ tẹlẹ ni lati farapamọ). Lo event.targetati event.relatedTargetlati fojusi taabu ti nṣiṣe lọwọ lọwọlọwọ ati taabu tuntun lai-lati-ṣiṣẹ, ni atele.
farasin.bs.taabu Iṣẹlẹ yii n tan lẹhin ti taabu tuntun ti han (ati nitorinaa taabu ti nṣiṣe lọwọ iṣaaju ti farapamọ). Lo event.targetati event.relatedTargetlati fojusi taabu ti nṣiṣe lọwọ iṣaaju ati taabu ti nṣiṣe lọwọ tuntun, lẹsẹsẹ. 
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})