in English

Lisi vaega

Lisi vaega o se vaega fetuutuunai ma mamana mo le faʻaalia o se faasologa o anotusi. Suia ma faalautele atu e lagolago ai so'o se anotusi i totonu.

Fa'ata'ita'iga fa'avae

Ole vaega pito sili ona taua ole lisi ole lisi e le fa'atonuina ma lisi mea ma vasega talafeagai. Fausia i luga ma filifiliga e mulimuli mai, poʻo lau oe CSS pe a manaʻomia.

Se mea
O se mea lona lua
O se mea lona tolu
O se mea lona fa
Ma le lona lima

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

Mea gaioi

Fa'aopoopo .activei le a .list-group-iteme fa'ailoa ai le filifiliga o lo'o galue nei.

O se mea faigaluega
O se mea lona lua
O se mea lona tolu
O se mea lona fa
Ma le lona lima

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

Mea ua le atoatoa

Fa'aopoopo .disabledi le .list-group-itema fa'aali mai e le atoatoa. Manatua o nisi elemene o le .disableda manaʻomia foʻi le JavaScript aganuʻu e faʻamalo atoatoa ai a latou kiliki mea e tutupu (faʻataʻitaʻiga, soʻotaga).

O se mea e le atoatoa le malosi
O se mea lona lua
O se mea lona tolu
O se mea lona fa
Ma le lona lima

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

So'oga ma fa'amau

Fa'aoga <a>le s po'o <button>le s e fatu ai mea e mafai ona fa'agaioi le kulupu fa'atasi ma fa'afefe, fa'aletonu, ma fa'agaoioi setete e ala i le fa'aopoopoina o le .list-group-item-action. Matou te tu'u'ese'ese nei vasega fa'afoliga ina ia fa'amautinoa e le'o maua mai se kiliki po'o le tap vaega o lo'o faia i elemene e le o feso'ota'i (pei o <li>s po'o s).<div>

Ia mautinoa e aua le faʻaaogaina .btnvasega masani iinei .

Le mea o lo'o iai nei feso'ota'iga O se mea so'otaga lona lua O se mea so'otaga lona tolu O se mea fa'afeso'ota'i lona fa O se mea so'otaga fa'aletonu

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

Faatasi ai ma <button>le s, e mafai foi ona e faʻaogaina le disableduiga nai lo le .disabledvasega. O le mea e faanoanoa ai, <a>e le lagolagoina le uiga fa'aletonu.

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

Fufulu

Fa'aopoopo .list-group-flushe aveese nisi o tuaoi ma tulimanu lapotopoto e fa'ailoa ai aitema vaega o le lisi i le pito i le pito i totonu o se koneteina matua (fa'ata'ita'iga, kata).

Se mea
O se mea lona lua
O se mea lona tolu
O se mea lona fa
Ma le lona lima

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

Fa'asagaga

Fa'aopoopo .list-group-horizontale sui ai le fa'atulagaina o mea fa'avasega lisi mai luga i luga i le fa'alava i va'aiga uma. I le isi itu, filifili se mea e tali mai .list-group-horizontal-{sm|md|lg|xl}e fai ai se lisi o vaega faalava e amata mai i le mea e motu ai min-width. I le taimi nei , e le mafai ona tu'ufa'atasia vaega o lisi fa'ata'atia ma kulupu lisi fa'afefete.

Fautuaga: Mana'o e tutusa le lautele o le lisi o aitema pe a fa'ata'atia? Faaopoopo .flex-filli aitema vaega taitasi o le lisi.

Se mea
O se mea lona lua
O se mea lona tolu

Se mea
O se mea lona lua
O se mea lona tolu

Se mea
O se mea lona lua
O se mea lona tolu

Se mea
O se mea lona lua
O se mea lona tolu

Se mea
O se mea lona lua
O se mea lona tolu

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

Vasega fa'atatau

Fa'aoga vasega fa'apitoa e si'i ai mea lisi ma se tala fa'atusa ma lanu.

O se mea fa'afaigāluega lisi fa'aletonu faigofie
O se vaega faigofie o le lisi autu
O se vaega faigofie lona lua o vaega
Se mea faigofie o le lisi o mea fa'avae
Se mea faigofie o le lisi o mea mata'utia
O se vaega o le lisi o lapataiga faigofie
O se fa'amatalaga faigofie fa'asoa fa'alapotopotoga
Se mea faigofie o le lisi o mea fa'avae
O se mea faigofie o le lisi pogisa

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

E galulue foi vasega fa'atatau i le .list-group-item-action. Manatua le faʻaopoopoina o sitaili faʻafefe iinei e le o iai i le faʻataʻitaʻiga muamua. E lagolagoina foi le .activesetete; fa'aoga e fa'ailoa mai ai se filifiliga malosi i luga o se lisi fa'aupuga o mea.

O se mea fa'afaigāluega lisi fa'aletonu faigofie O se vaega faigofie o le lisi autu O se vaega faigofie lona lua o vaega Se mea faigofie o le lisi o mea fa'avae Se mea faigofie o le lisi o mea mata'utia O se vaega o le lisi o lapataiga faigofie O se fa'amatalaga faigofie fa'asoa fa'alapotopotoga Se mea faigofie o le lisi o mea fa'avae O se mea faigofie o le lisi pogisa

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

Tu'uina atu le uiga i tekinolosi fesoasoani

O le fa'aogaina o le lanu e fa'aopoopo ai le uiga e na'o se fa'aaliga va'aia, e le fa'ailoa atu i tagata fa'aoga o tekonolosi fesoasoani - e pei o le au faitau mata. Ia fa'amautinoa o fa'amatalaga o lo'o fa'ailogaina i le lanu e manino mai le anotusi lava ia (fa'ata'ita'iga o tusitusiga va'aia), pe fa'aofi mai i isi auala, e pei o tusitusiga fa'aopoopo natia i le .sr-onlyvasega.

Faatasi ai ma pine

Fa'aopoopo fa'ailoga i so'o se lisi o mea e fa'aalia ai le faitau aofa'i, gaioioiga, ma isi mea fa'atasi ma le fesoasoani a nisi mea aoga .

Se mea lisi14
Se mea lisi lona lua2
O se mea lisi lona tolu1

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

Tulaga fa'apitoa

Fa'aopoopo toetoe lava o so'o se HTML i totonu, e o'o lava i fa'alapotopotoga fa'afeso'ota'i e pei o lo'o i lalo, fa'atasi ai ma le fesoasoani a le flexbox utilities .

Lisi le ulutala mea vaega

3 aso talu ai

O nisi mea o lo'o tu'u iai i totonu o se parakalafa.

Ma ni nai tusitusiga laiti.

Lisi le ulutala mea vaega

3 aso talu ai

O nisi mea o lo'o tu'u iai i totonu o se parakalafa.

Ma o nisi ua gūgū tama'i tusi.

Lisi le ulutala mea vaega

3 aso talu ai

O nisi mea o lo'o tu'u iai i totonu o se parakalafa.

Ma o nisi ua gūgū tama'i tusi.

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

Amioga JavaScript

Fa'aoga le fa'aupuga JavaScript plugin-fa'aofia ai ta'ito'atasi pe ala i le bootstrap.jsfaila tu'ufa'atasia-e fa'alautele ai la matou vaega lisi e fai ai fa'amaufa'ailoga o mea fa'apitonu'u.

Aiga Tala'aga Feau Fa'atonu

O nisi o lo'o i totonu o se parakalafa e fa'atatau i le "Aiga". Ma nisi anotusi, fa'aaoga iinei na'o le fa'atumu ma fa'atumu le laulau fa'ailoga. I le gaosiga, e mautinoa lava e sili atu au mea moni iinei. Ma e le na o tusitusiga. E mafai ona avea ma soo se mea, moni lava. Tusi, ata, fomu.

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>

Fa'aaogaina uiga fa'amaumauga

E mafai ona e fa'agaoioia se fa'asalalauga kulupu lisi e aunoa ma le tusiaina o so'o se JavaScript i le na'o le fa'amaoti data-toggle="list"po'o luga o se elemene. Fa'aoga nei uiga fa'amaumauga ile .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>

E ala i le JavaScript

Fa'aagaaga mea lisi lisi e ala i le JavaScript (e mana'omia ona fa'agaoioia ta'itasi mea lisi):

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

E mafai ona e fa'agaoioia mea ta'itasi lisi i ni auala se tele:

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

Aafiaga mou

Ina ia fa'agesegese i totonu le laulau, fa'aopoopo .fadei .tab-pane. E tatau fo'i .showi le fa'ailoga muamua ona fa'aalia le mea muamua.

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

Metotia

$().tab

Fa'aagaoioia se elemene mea lisi ma pusa anotusi. O le Tab e tatau ona i ai se data-targetpoʻo se hreffaʻatatau i se pusa pusa i le 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('fa'aali')

Filifili le mea lisi ua tu'uina atu ma fa'aali atu lona fa'ailoga e feso'ota'i. So'o se isi lisi o mea na filifilia muamua e le'i filifilia ma o lona fa'ailoga e natia. Toe fo'i i le tagata vala'au a'o le'i fa'aalia le fa'ailoga o le fa'ailoga (fa'ata'ita'iga, a'o le'i tupu le shown.bs.tabmea na tupu).

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

Mea na tutupu

Pe a fa'aalia se lisi fou, e mu mea na tutupu i le fa'asologa lenei:

hide.bs.tab(i luga o le lisi o lo'o galue nei)
show.bs.tab(i luga o le faʻailoga o le a faʻaalia)
hidden.bs.tab(i luga o le lisi galue muamua, tutusa ma le hide.bs.tabmea na tupu)
shown.bs.tab(i luga o le faʻailoga fou faatoa faʻaalia, tutusa ma le show.bs.tabmea na tupu)

Afai e leai se tab ua uma ona galue, o le hide.bs.tabma hidden.bs.tabmea tutupu o le a le tapeina.

Ituaiga mea na tupu	Fa'amatalaga
show.bs.tab	O lenei mea na tupu e mu i luga o faʻaaliga faʻaaliga, ae leʻi faʻaalia le faʻailoga fou. Fa'aoga `event.target`ma `event.relatedTarget`fa'atatau i le ta'i ga'oi ma le fa'agaioiga muamua (pe a maua) ta'itasi.
fa'aalia.bs.tab	O lenei mea na tupu e mu i luga o le faʻaaliga faʻapipiʻi pe a uma ona faʻaalia se tab. Fa'aoga `event.target`ma `event.relatedTarget`fa'atatau i le ta'i ga'oi ma le fa'agaioiga muamua (pe a maua) ta'itasi.
hide.bs.tab	E mu lenei mea pe a fa'aalia se fa'ailoga fou (ma fa'apea e natia ai le fa'agaioiga muamua). Fa'aoga `event.target`ma `event.relatedTarget`fa'atatau i le lisi o lo'o i ai nei ma le lisi fou e le o toe mamao-to-be-active.
hidden.bs.tab	O lenei mea na tupu e mu pe a uma ona faʻaalia se laupepa fou (ma faʻapea o loʻo natia le laupepa muamua). Fa'aoga `event.target`ma `event.relatedTarget`fa'atatau i le ta'ifa'agaaga muamua ma le fa'ailoga fou fou, fa'asologa.

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