Vondrona lisitra

Ny vondrona lisitra dia singa mora sy matanjaka amin'ny fanehoana andiam-panazavana. Ovao sy ampitomboy izy ireo mba 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.

Zavatra iray
Zavatra faharoa
Singa fahatelo
Zavatra fahefatra
Ary ny fahadimy

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

Zavatra mavitrika

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

Singa mavitrika
Zavatra faharoa
Singa fahatelo
Zavatra fahefatra
Ary ny fahadimy

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

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

Zavatra kilemaina
Zavatra faharoa
Singa fahatelo
Zavatra fahefatra
Ary ny fahadimy

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

Rohy sy bokotra

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 ny vondrona lisitra vita amin'ny singa tsy misy fifampiraharahana (toy ny <li>s or<div> fa tsy manome vola kitihina na paompy

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

Ny singa rohy ankehitriny Zavatra rohy faharoa Zavatra rohy fahatelo Zavatra rohy fahefatra Singa rohy kilemaina

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

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" aria-current="true">
    The current button
  </button>
  <button type="button" class="list-group-item list-group-item-action">A second 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>

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

Zavatra iray
Zavatra faharoa
Singa fahatelo
Zavatra fahefatra
Ary ny fahadimy

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

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.

Zavatra iray
Zavatra faharoa
Singa fahatelo

Zavatra iray
Zavatra faharoa
Singa fahatelo

Zavatra iray
Zavatra faharoa
Singa fahatelo

Zavatra iray
Zavatra faharoa
Singa fahatelo

Zavatra iray
Zavatra faharoa
Singa fahatelo

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

Kilasy ara-tantara

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

Singa vondrona lisitra default tsotra
Zavatra vondrona lisitra voalohany tsotra
Zavatra vondrona lisitra faharoa tsotra
Lisitry ny lisitry ny fahombiazana 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">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>

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

Singa vondrona lisitra default tsotra Zavatra vondrona lisitra voalohany tsotra Zavatra vondrona lisitra faharoa tsotra Lisitry ny lisitry ny fahombiazana 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">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>

Fampitaovana ny dikan'ny teknôlôjia manampy

Ny fampiasana loko hanampiana dikany dia manome famantarana hita maso ihany, izay tsy hampitaina amin'ireo mpampiasa 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

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

Zavatra lisitra14
Zavatra lisitra faharoa2
Zavatra lisitra fahatelo1

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A list item
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A second list item
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A third list item
    <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

Ny votoatin'ny placeholder sasany ao anaty fehintsoratra iray.

Ary misy pirinty kely.

Tanisao ny lohatenin'ny singa vondrona

3 andro lasa izay

Ny votoatin'ny placeholder sasany ao anaty fehintsoratra iray.

Ary misy printy kely mangina.

Tanisao ny lohatenin'ny singa vondrona

3 andro lasa izay

Ny votoatin'ny placeholder sasany ao anaty fehintsoratra iray.

Ary misy printy kely mangina.

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

Fihetsika JavaScript

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

an-trano TANTARANY Hafatra Fikirana

Ny votoatin'ny toerana sasany ao amin'ny fehintsoratra mifandraika amin'ny "Trano". Ary votoaty hafa, ampiasaina eto fotsiny mba hamenoana sy hamenoana ity takelaka tabilao ity. Amin'ny famokarana, mazava ho azy fa hanana votoaty tena izy eto ianao. Ary tsy lahatsoratra fotsiny. Mety ho na inona na inona, tena. Lahatsoratra, sary, endrika.

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

<div role="tabpanel">
  <!-- 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>
</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 (event) {
  event.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 data-targetkendrena hrefny node container 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:

hide.bs.tab(amin'ny tabilao mavitrika ankehitriny)
show.bs.tab(eo amin'ny tabilao haseho)
hidden.bs.tab(eo amin'ny tabilao mavitrika teo aloha, mitovy amin'ny an'ny hide.bs.tabhetsika)
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.target`sy `event.relatedTarget`kendrena 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.target`sy `event.relatedTarget`kendrena 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.target`sy `event.relatedTarget`kendrena 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.target`sy `event.relatedTarget`ikendrena ny tabilao mavitrika teo aloha sy ny tabilao mavitrika vaovao.

$('a[data-toggle="list"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})