Source

Vondrona lisitra

Ny vondrona lisitra dia singa mora sy matanjaka amin'ny fanehoana andian-dahatsoratra. Ovao sy ampitomboy izy ireo hanohanana ny atiny rehetra ao anatiny.

Ohatra fototra

Ny vondrona lisitra fototra indrindra dia lisitra tsy misy filaharana miaraka amin'ireo singa lisitra sy ireo kilasy mety. Amboary miaraka amin'ireo safidy manaraka izany, na miaraka amin'ny CSS anao manokana raha ilaina.

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

Zavatra mavitrika

Ampio .activeamin'ny a .list-group-itemhanondro ny safidy mavitrika ankehitriny.

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

Zavatra kilemaina

Ampio .disabledamin'ny a .list-group-itemhahatonga azy ho kilemaina. Mariho fa ny singa sasany miaraka .disableddia mitaky JavaScript manokana ihany koa mba hanesorana tanteraka ny hetsika kitiny (oh: rohy).

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum sy eros
<ul class="list-group">
  <li class="list-group-item disabled" aria-disabled="true">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>

Mampiasà <a>s na <button>s mba hamoronana singa vondrona lisitra azo atao miaraka amin'ny fanjakana hover, kilemaina ary mavitrika amin'ny fanampiana .list-group-item-action. Asarahinay ireto kilasy pseudo ireto mba hiantohana fa tsy manome vola kitihina na paompy ny vondrona lisitra vita amin'ny singa tsy mifanentana (toy ny <li>s na s).<div>

Ataovy azo antoka fa tsy mampiasa ny .btnkilasy mahazatra eto .

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum sy 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" tabindex="-1" aria-disabled="true">Vestibulum at eros</a>
</div>

Miaraka amin'ny <button>s, azonao atao koa ny mampiasa ny disabledtoetra fa tsy ny .disabledkilasy. Mampalahelo fa <a>tsy manohana ny toetra kilemaina i s.

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

kabone

Ampio .list-group-flushhanesorana ny sisin-tany sasany sy ny zorony boribory mba hamerenana ny lisitry ny lisitry ny singa amin'ny sisiny amin'ny fitoeran'ny ray aman-dreny (oh: karatra).

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

Marindrano

Ampio .list-group-horizontalhanova ny fisehon'ireo singa vondrona lisitra manomboka amin'ny mitsangana mankany amin'ny marindrano manerana ny teboka rehetra. Raha tsy izany, mifidiana variana mamaly .list-group-horizontal-{sm|md|lg|xl}mba hanaovana vondrona lisitra mitsivalana manomboka amin'io toerana fiatoana io min-width. Amin'izao fotoana izao dia tsy azo ampifandraisina amin'ny vondrona lisitra mitsivalana.

ProTip: Te hitovy sakan'ny lisitry ny singa vondrona rehefa mitsivalana? Ampio .flex-fillisaky ny singa vondrona lisitra.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<ul class="list-group list-group-horizontal">
  <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>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<ul class="list-group list-group-horizontal-sm">
  <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>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<ul class="list-group list-group-horizontal-md">
  <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>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<ul class="list-group list-group-horizontal-lg">
  <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>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<ul class="list-group list-group-horizontal-xl">
  <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>
</ul>

Kilasy ara-tantara

Mampiasà kilasy contextual mba hamolavolana ny lisitry ny zavatra miaraka amin'ny loko sy loko.

  • Dapibus ac facilisis in
  • Zavatra vondrona lisitra voalohany tsotra
  • Zavatra vondrona lisitra faharoa tsotra
  • Zavatra vondrona lisitra mahomby tsotra
  • Zavatra vondrona lisitra loza tsotra
  • Zavatra vondrona lisitra fampitandremana tsotra
  • Zavatra vondrona lisitra tsotsotra
  • Zavatra vondrona lisitra maivana tsotra
  • Zavatra vondrona lisitra maizina tsotra
<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>

Ny kilasy contextual dia miasa miaraka amin'ny .list-group-item-action. Mariho ny fanampim-panazavana amin'ireo fomba fandevenana eto izay tsy hita amin'ny ohatra teo aloha. Tohanana ihany koa ny .activefanjakana; ampiharo izany mba hanondro fifantenana mavitrika amin'ny singa vondrona lisitra contextual.

Dapibus ac facilisis in Zavatra vondrona lisitra voalohany tsotra Zavatra vondrona lisitra faharoa tsotra Zavatra vondrona lisitra mahomby tsotra Zavatra vondrona lisitra loza tsotra Zavatra vondrona lisitra fampitandremana tsotra Zavatra vondrona lisitra tsotsotra Zavatra vondrona lisitra maivana tsotra Zavatra vondrona lisitra maizina tsotra 
<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>
Fampitaovana ny dikan'ny teknôlôjia manampy

Ny fampiasana loko mba hanampiana dikany dia manome famantarana hita maso ihany, izay tsy hampitaina amin'ireo mpampiasa ny teknolojia manampy - toy ny mpamaky efijery. Ataovy azo antoka fa ny fampahalalana voatondro amin'ny loko dia na miharihary amin'ny atiny (ohatra ny lahatsoratra hita maso), na ampidirina amin'ny fomba hafa, toy ny lahatsoratra fanampiny miafina miaraka amin'ny .sr-onlykilasy.

Miaraka amin'ny badge

Ampio marika amin'ny singa vondrona lisitra mba hampisehoana isa tsy voavaky, hetsika, ary maro hafa miaraka amin'ny fanampian'ny fitaovana sasany .

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

atiny manokana

Ampio saika HTML rehetra ao anatiny, eny fa na dia ho an'ny vondrona lisitra mifandray toy ny etsy ambany aza, miaraka amin'ny fanampian'ny flexbox utility .

Tanisao ny lohatenin'ny singa vondrona
3 andro lasa izay

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

Donec id elit non mi porta.
Tanisao ny lohatenin'ny singa vondrona
3 andro lasa izay

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

Donec id elit non mi porta.
Tanisao ny lohatenin'ny singa vondrona
3 andro lasa izay

Donec id elit non mi porta gravida and 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 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">
    <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">
    <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>

Fihetsika JavaScript

Ampiasao ny plugin JavaScript kiheba—ampidiro tsirairay izany na amin'ny alàlan'ny bootstrap.jsrakitra voaangona—hanitatra ny vondrona lisitray mba hamoronana takelaka misy tabilao misy votoaty eo an-toerana.

Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non mini tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugit 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>

Mampiasa ny angona toetra

Azonao atao ny manetsika ny fitetezana vondrona lisitra nefa tsy manoratra JavaScript amin'ny alàlan'ny famaritana fotsiny data-toggle="list"na amin'ny singa iray. Ampiasao amin'ny .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>

Amin'ny JavaScript

Alefaso amin'ny alalan'ny JavaScript ny singa lisitry ny tabilao (mila ampihetsika tsirairay ny singa lisitra tsirairay):

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

Azonao atao ny manetsika ny singa lisitra tsirairay amin'ny fomba maro:

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

Mba hahatonga ny tontonana hanjavona, ampio .fadeny tsirairay .tab-pane. Ny takelaka tabilao voalohany dia tsy maintsy .showmanao ny atiny voalohany ho hita ihany koa.

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

fomba

$().tab

Mampihetsika singa iray amin'ny lisitra sy fitoeran'ny atiny. Ny tabilao dia tokony hanana na iray data-targetna hrefkendrena ny node fitoeran-javatra ao amin'ny 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>

.tab('show')

Mifidy ny lisitra nomena ary mampiseho ny tontonana mifandray aminy. Ny singa lisitra hafa izay nofantenana teo aloha dia lasa tsy voafantina ary nafenina ny tontonana mifandraika aminy. Miverina any amin'ny mpiantso alohan'ny hisehoan'ny takelaka tabilao (ohatra, alohan'ny shown.bs.tabhitrangan'ny hetsika).

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

zava-mitranga

Rehefa mampiseho kiheba vaovao dia miredareda toy izao manaraka izao ny hetsika:

  1. hide.bs.tab(amin'ny tabilao mavitrika ankehitriny)
  2. show.bs.tab(eo amin'ny tabilao haseho)
  3. hidden.bs.tab(eo amin'ny tabilao mavitrika teo aloha, mitovy amin'ny an'ny hide.bs.tabhetsika)
  4. shown.bs.tab(eo amin'ny tabilao vao naseho vao mavitrika, mitovy amin'ny an'ny show.bs.tabhetsika)

Raha tsy misy kiheba efa navitrika dia tsy hodorana ny hetsika ary hide.bs.tab.hidden.bs.tab

Karazana hetsika Description
show.bs.tab Ity hetsika ity dia mirehitra amin'ny seho kiheba, saingy alohan'ny hisehoan'ny kiheba vaovao. Ampiasao event.targetsy event.relatedTargetkendrena ny tabilao mavitrika sy ny tabilao mavitrika teo aloha (raha misy).
aseho.bs.tab Ity hetsika ity dia mirehitra amin'ny seho kiheba rehefa avy naseho ny kiheba iray. Ampiasao event.targetsy event.relatedTargetkendrena ny tabilao mavitrika sy ny tabilao mavitrika teo aloha (raha misy).
hide.bs.tab Mirehitra ity hetsika ity rehefa misy kiheba vaovao haseho (ary noho izany dia afenina ny kiheba mavitrika teo aloha). Ampiasao event.targetsy event.relatedTargetkendrena ny tabilao mavitrika ankehitriny sy ny tabilao vaovao tsy ho ela.
hidden.bs.tab Mirehitra ity hetsika ity rehefa miseho ny tabilao vaovao (ary noho izany dia afenina ny tabilao mavitrika teo aloha). Ampiasao event.targetsy event.relatedTargetikendrena ny tabilao mavitrika teo aloha sy ny tabilao mavitrika vaovao. 
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})