Source

Sanaw topary

Sanaw toparlary bir topar mazmuny görkezmek üçin çeýe we güýçli komponentdir. Içindäki islendik mazmuny goldamak üçin olary üýtgediň we giňeldiň.

Esasy mysal

Iň esasy sanaw topary, sanaw elementleri we degişli synplar bilen tertipsiz sanaw. Ondan soňky saýlawlar ýa-da zerur bolanda öz CSS-leriňiz bilen guruň.

  • Cras justo odio
  • Dapibus ac facilisis
  • Morbi leo risus
  • Porta ac consectetur ac
  • Erosda westibulum
<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>

Işjeň zatlar

Häzirki işjeň saýlamany görkezmek .activeüçin a goşuň ..list-group-item

  • Cras justo odio
  • Dapibus ac facilisis
  • Morbi leo risus
  • Porta ac consectetur ac
  • Erosda westibulum
<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>

Öçürilen zatlar

Öçürilen ýaly görünmek üçin .disableda goşuň . Käbir elementleriň basmak hadysalaryny (meselem, baglanyşyklar) doly öçürmek üçin ýörite JavaScript talap ediljekdigine üns beriň ..list-group-item.disabled

  • Cras justo odio
  • Dapibus ac facilisis
  • Morbi leo risus
  • Porta ac consectetur ac
  • Erosda westibulum
<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>

Goşmak arkaly hereketsiz, maýyp we işjeň ýagdaýlar bilen hereket edip boljak sanaw toparlaryny döretmek üçin <a>s ýa-da s ulanyň . Interaktiw däl elementlerden düzülen sanaw toparlarynyň ( ýa-da lar) basmak ýa-da basmak mümkinçiligini üpjün etmezligi üçin bu ýasama synplary bölýäris.<button>.list-group-item-action<li><div>

Bu ýerde adaty sapaklary ulanmaň.btn .

Cras justo odio Dapibus ac facilisis Morbi leo risus Porta ac consectetur ac Erosda westibulum 
<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>

<button>S bilen , synpyň disabledýerine atributdan peýdalanyp bilersiňiz. .disabledGynansagam, <a>s ýapyk atributy goldamaýar.

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

Flush

.list-group-flushEne konteýnerde (meselem, kartoçkalarda) sanaw toparlarynyň elementlerini gyrada görkezmek üçin käbir serhetleri we tegelek burçlary aýyrmak üçin goşuň .

  • Cras justo odio
  • Dapibus ac facilisis
  • Morbi leo risus
  • Porta ac consectetur ac
  • Erosda westibulum
<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>

Kontekst sapaklary

Döwlet fon we reňkli elementleriň sanawyny düzmek üçin kontekst sapaklaryny ulanyň.

  • Dapibus ac facilisis
  • Simpleönekeý başlangyç sanaw topary elementi
  • Simpleönekeý ikinji derejeli topar elementi
  • Successönekeý üstünlik sanawy topar elementi
  • Dangerönekeý howp sanawy topary elementi
  • Simpleönekeý duýduryş sanawy topary elementi
  • Simpleönekeý maglumat sanawy topar elementi
  • Lightönekeý yşyk sanawy topary elementi
  • Simpleönekeý garaňky sanaw topary elementi
<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>

Kontekst sapaklary hem işleýär .list-group-item-action. Öňki mysalda ýok bu ýerdäki aýlaw stilleriniň goşulmagyna üns beriň. Şeýle hem .activedöwlet goldaw berýär; kontekstdäki sanaw topary elementinde işjeň saýlamany görkezmek üçin ulanyň.

Dapibus ac facilisis Simpleönekeý başlangyç sanaw topary elementi Simpleönekeý ikinji derejeli topar elementi Successönekeý üstünlik sanawy topar elementi Dangerönekeý howp sanawy topary elementi Simpleönekeý duýduryş sanawy topary elementi Simpleönekeý maglumat sanawy topar elementi Lightönekeý yşyk sanawy topary elementi Simpleönekeý garaňky sanaw topary elementi 
<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>
Kömekçi tehnologiýalara many bermek

Reňk ulanmak manysyny goşmak üçin diňe ekran okyjylary ýaly kömekçi tehnologiýalary ulanyjylara ýetirip bolmajak wizual görkezme berýär. Reňk bilen görkezilen maglumatlaryň mazmunyň özünden (meselem, görünýän tekstden) aç-açan ýa-da .sr-onlysynp bilen gizlenen goşmaça tekst ýaly alternatiw usullar arkaly girizilendigine göz ýetiriň.

Nyşanlar bilen

Käbir kömekçi enjamlaryň kömegi bilen okalmadyk sanlary, işjeňligi we başga zatlary görkezmek üçin islendik sanaw toparyna element goşuň .

  • Cras justo odio14
  • Dapibus ac facilisis2
  • 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>

Omörite mazmun

Flexbox kömekçi enjamlarynyň kömegi bilen, hatda aşakdaky ýaly baglanyşdyrylan sanaw toparlary üçin hem islendik HTML diýen ýaly goşuň .

Topar elementiniň sözbaşysyny sanaň
3 gün öň

Donec id elit metus-da mi porta gravida. Maecenas sed diam eget risus varius blandit.

Donec id el mi porta däl.
Topar elementiniň sözbaşysyny sanaň
3 gün öň

Donec id elit metus-da mi porta gravida. Maecenas sed diam eget risus varius blandit.

Donec id el mi porta däl.
Topar elementiniň sözbaşysyny sanaň
3 gün öň

Donec id elit metus-da mi porta gravida. Maecenas sed diam eget risus varius blandit.

Donec id el mi porta däl. 
<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 häsiýeti

bootstrap.jsJavaerli mazmunyň tablisa panellerini döretmek üçin sanaw toparymyzy giňeltmek üçin JavaScript pluginini ulanyň - ony aýratyn ýa-da düzülen faýlyň üsti bilen goşuň.

“Velit aute mollit ipsum ad dolor consectetur nulla officia culpa” fugiat tempor maşklary bilen meşgullanýar. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi we minimal tempor sunt voluptate consectetur maşk id nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim reklamasy 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>

Maglumat atributlaryny ulanmak

Diňe bir elementi ýa-da bir elementi görkezip, hiç hili JavaScript ýazmazdan sanaw topary nawigasiýasyny işjeňleşdirip bilersiňiz data-toggle="list". Bu maglumat atributlaryny ulanyň .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 arkaly

JavaScript arkaly tablisa sanawy elementini açyň (her sanaw elementi aýratyn işjeňleşdirilmeli):

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

Aýry-aýry sanaw elementlerini birnäçe usul bilen işjeňleşdirip bilersiňiz:

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

Öçürilen effekt

Salgylar paneliniň ýitmegi .fadeüçin hersine goşuň .tab-pane. Ilkinji goýma paneli .showbaşlangyç mazmuny görünmeli.

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

Usullar

$ () goýmasy

Sanaw elementiniň elementini we mazmun gapyny işjeňleşdirýär. Salgyda ýa data-target-da hrefDOM-da konteýner düwünini nyşana alýan bolmaly.

<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 ('görkezmek')

Berlen sanaw elementini saýlaýar we baglanyşykly paneli görkezýär. Öň saýlanan islendik sanaw elementi saýlanmaýar we oňa bagly panel gizlenýär. Salgy paneli görkezilmänkä (mysal üçin, shown.bs.tabwaka ýüze çykmazdan ozal) jaň edijä gaýdyp gelýär.

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

Wakalar

Täze tab görkezilende wakalar aşakdaky tertipde ýanýar:

  1. hide.bs.tab(häzirki işjeň goýmada)
  2. show.bs.tab(görkezilmeli goýmada)
  3. hidden.bs.tabhide.bs.tab(öňki işjeň goýmada, waka bilen birmeňzeş )
  4. shown.bs.tabshow.bs.tab(täze işjeň görkezilen ýaňy görkezilen goýmada, waka bilen birmeňzeş )

Hiç bir tab goýmasy işjeň bolmadyk bolsa, wakalar hide.bs.tabwe hidden.bs.tabwakalar atylmaz.

Çäräniň görnüşi Düşündiriş
show.bs.tab Bu waka tab goýmasynda ýanýar, ýöne täze goýma görkezilmänkä. Işjeň goýmany we öňki işjeň goýmany degişlilikde ulanyň event.targetwe nyşana alyň.event.relatedTarget
görkezilen.bs.tab Bu waka, görkezme görkezilenden soň tab goýmasynda ýanýar. Işjeň goýmany we öňki işjeň goýmany degişlilikde ulanyň event.targetwe nyşana alyň.event.relatedTarget
hide.bs.tab Bu waka täze goýma görkezilmeli bolanda ýanýar (we şeýlelik bilen öňki işjeň goýma gizlenmeli). Häzirki işjeň goýmany we ýakyn wagtda işjeň boljak täze goýmany ulanyň event.targetwe nyşana alyň.event.relatedTarget
gizlenen.bs.tab Bu waka täze goýma görkezilenden soň ýanýar (we şeýlelik bilen öňki işjeň goýma gizlenýär). Öňki işjeň goýmany we täze işjeň goýmany degişlilikde ulanyň event.targetwe nyşana alyň.event.relatedTarget 
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})