in English

Listaa ryhmä

Luetteloryhmät ovat joustava ja tehokas komponentti sisältösarjan näyttämiseen. Muokkaa ja laajenna niitä tukemaan lähes mitä tahansa sisältöä.

Perusesimerkki

Kaikkein peruslistaryhmä on järjestämätön lista, jossa on luettelokohteet ja oikeat luokat. Rakenna sitä seuraavilla vaihtoehdoilla tai tarvittaessa omalla CSS:lläsi.

  • Esine
  • Toinen kohde
  • Kolmas kohde
  • Neljäs kohta
  • Ja viidennen
<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>

Aktiiviset kohteet

Lisää .activekohtaan a .list-group-itemosoittaaksesi nykyisen aktiivisen valinnan.

  • Aktiivinen kohde
  • Toinen kohde
  • Kolmas kohde
  • Neljäs kohta
  • Ja viidennen
<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>

Käytöstä poistetut kohteet

Lisää .disabledkohtaan a .list-group-item, jotta se näyttää pois käytöstä. Huomaa, että jotkin elementit .disabledvaativat myös mukautetun JavaScriptin napsautustapahtumat (esim. linkit) poistamiseksi kokonaan käytöstä.

  • Estetty kohde
  • Toinen kohde
  • Kolmas kohde
  • Neljäs kohta
  • Ja viidennen
<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>

Käytä <a>s- tai <button>s-näppäimiä luodaksesi toimivia luetteloryhmän kohteita, joissa on hiiri, pois käytöstä ja aktiivinen tila lisäämällä .list-group-item-action. Erottelemme nämä näennäisluokat varmistaaksemme, että ei-interaktiivisista elementeistä (kuten <li>s tai <div>s) koostuvat luetteloryhmät eivät tarjoa napsautus- tai napautushintaa.

Älä käytä vakioluokkia .btntäällä .

Nykyinen linkkikohde Toinen linkkikohde Kolmas linkkikohde Neljäs linkkikohde Poistettu linkkikohde 
<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>

S: llä <button>voit myös käyttää disabledattribuuttia .disabledluokan sijaan. Valitettavasti <a>s eivät tue attribuuttia pois käytöstä.

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

Huuhtele

Lisäämällä .list-group-flushvoit poistaa joitakin reunuksia ja pyöristettyjä kulmia, jotta luetteloryhmän kohteet hahmonnetaan reunasta reunaan ylätason säilössä (esim. kortit).

  • Esine
  • Toinen kohde
  • Kolmas kohde
  • Neljäs kohta
  • Ja viidennen
<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>

Vaakasuora

Lisää .list-group-horizontalmuuttaaksesi luetteloryhmän kohteiden asettelua pystysuorasta vaakasuuntaiseksi kaikissa keskeytyspisteissä. Vaihtoehtoisesti voit valita responsiivisen muunnelman .list-group-horizontal-{sm|md|lg|xl}tehdäksesi luetteloryhmästä vaakasuuntaisen kyseisestä keskeytyskohdasta alkaen min-width. Tällä hetkellä vaakasuuntaisia ​​luetteloryhmiä ei voi yhdistää huuhteluluetteloryhmiin.

ProTip: Haluatko yhtä leveitä luettelokohteita vaakasuorassa? Lisää .flex-filljokaiseen luetteloryhmän kohde.

  • Esine
  • Toinen kohde
  • Kolmas kohde
  • Esine
  • Toinen kohde
  • Kolmas kohde
  • Esine
  • Toinen kohde
  • Kolmas kohde
  • Esine
  • Toinen kohde
  • Kolmas kohde
  • Esine
  • Toinen kohde
  • Kolmas kohde
<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>

Kontekstuaaliset luokat

Käytä kontekstuaalisia luokkia muotoillaksesi luettelokohteita, joissa on tilallinen tausta ja väri.

  • Yksinkertainen oletusluetteloryhmäkohde
  • Yksinkertainen ensisijaisen luettelon ryhmäkohde
  • Yksinkertainen toissijainen luetteloryhmäkohde
  • Yksinkertainen menestysluettelon ryhmäkohde
  • Yksinkertainen vaaraluettelon kohde
  • Yksinkertainen varoitusluettelon ryhmäkohde
  • Yksinkertainen tietoluetteloryhmäkohde
  • Yksinkertainen kevyt luetteloryhmäkohde
  • Yksinkertainen pimeän listan ryhmäkohde
<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>

Kontekstuaaliset luokat toimivat myös .list-group-item-action. Huomaa, että tähän on lisätty hover-tyylejä, joita ei ollut edellisessä esimerkissä. Myös .activevaltio tukee; Käytä sitä ilmaisemaan aktiivisen valinnan kontekstuaalisen luetteloryhmän alkiossa.

Yksinkertainen oletusluetteloryhmäkohde Yksinkertainen ensisijaisen luettelon ryhmäkohde Yksinkertainen toissijainen luetteloryhmäkohde Yksinkertainen menestysluettelon ryhmäkohde Yksinkertainen vaaraluettelon kohde Yksinkertainen varoitusluettelon ryhmäkohde Yksinkertainen tietoluetteloryhmäkohde Yksinkertainen kevyt luetteloryhmäkohde Yksinkertainen pimeän listan ryhmäkohde 
<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>
Tarkoituksen välittäminen avustaville tekniikoille

Värien käyttö merkityksen lisäämiseen antaa vain visuaalisen osoituksen, jota ei välitetä avustavien tekniikoiden, kuten näytönlukijoiden, käyttäjille. Varmista, että värillä merkitty tieto näkyy joko itsestään sisällöstä (esim. näkyvä teksti) tai sisällytetään vaihtoehtoisin keinoin, kuten .sr-onlyluokan mukana piilotettu lisäteksti.

Merkkien kanssa

Lisää merkkejä mihin tahansa luetteloryhmän kohteeseen näyttääksesi lukemattomat määrät, toiminnan ja paljon muuta joidenkin apuohjelmien avulla .

  • Luettelon kohde14
  • Toinen listan kohta2
  • Kolmas listakohta1 
<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>

Mukautettu sisältö

Lisää flexbox-apuohjelmien avulla lähes mikä tahansa HTML-koodi, jopa linkitetyissä luetteloryhmissä, kuten alla .

Luetteloryhmän kohteen otsikko
3 päivää sitten

Jotain paikkamerkkisisältöä kappaleessa.

Ja pientä tekstiä.
Luetteloryhmän kohteen otsikko
3 päivää sitten

Jotain paikkamerkkisisältöä kappaleessa.

Ja vähän vaimennettua pientä tekstiä.
Luetteloryhmän kohteen otsikko
3 päivää sitten

Jotain paikkamerkkisisältöä kappaleessa.

Ja vähän vaimennettua pientä tekstiä. 
<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>

JavaScript-käyttäytyminen

Käytä välilehden JavaScript-laajennusta – sisällytä se yksittäin tai käännetyn bootstrap.jstiedoston kautta – laajentaaksesi luetteloryhmäämme luomaan välilehtiruutuja paikallisesta sisällöstä.

Jotkin paikkamerkkisisällöt kappaleessa, joka liittyy "Etusivulle". Ja muuta sisältöä, jota käytetään tässä vain välilehtipaneelin täyttämiseen ja täyttämiseen. Tuotannossa sinulla olisi ilmeisesti enemmän todellista sisältöä täällä. Eikä vain tekstiä. Se voi olla oikeastaan ​​mitä tahansa. Tekstiä, kuvia, lomakkeita.

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>

Tietoattribuuttien käyttäminen

Voit aktivoida luetteloryhmän navigoinnin kirjoittamatta JavaScriptiä yksinkertaisesti määrittämällä data-toggle="list"tai elementin päälle. Käytä näitä tietomääritteitä .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>

JavaScriptin kautta

Ota välilehtiluettelo käyttöön JavaScriptin kautta (jokainen luettelokohde on aktivoitava erikseen):

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

Voit aktivoida yksittäisen luettelokohteen useilla tavoilla:

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

Häivytysefekti

Voit saada välilehdet-paneelin hämärtymään lisäämällä .fadekuhunkin .tab-pane. Ensimmäisen välilehtiruudun on myös .showtehtävä alkuperäinen sisältö näkyväksi.

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

menetelmät

$().tab

Aktivoi luettelokohdeelementin ja sisältösäiliön. Välilehdellä tulee olla joko a data-targettai hrefkohdistava säilön solmu DOM:ssa.

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

Valitsee tietyn luettelokohteen ja näyttää siihen liittyvän ruudun. Kaikki muut aiemmin valitut luettelokohteet jäävät valitsemattomiksi ja niihin liittyvä ruutu piilotetaan. Palaa soittajalle ennen kuin välilehtiruutu on todella näytetty (esimerkiksi ennen shown.bs.tabtapahtumaa).

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

Tapahtumat

Kun uusi välilehti näytetään, tapahtumat käynnistyvät seuraavassa järjestyksessä:

  1. hide.bs.tab(nykyisellä aktiivisella välilehdellä)
  2. show.bs.tab(näytettävissä välilehdellä)
  3. hidden.bs.tab(edellisellä aktiivisella välilehdellä, sama kuin hide.bs.tabtapahtumalla)
  4. shown.bs.tab(äskettäin aktiivisella juuri näytetyllä välilehdellä, sama kuin show.bs.tabtapahtumassa)

Jos mikään välilehti ei ollut jo aktiivinen, hide.bs.tabja hidden.bs.tabtapahtumia ei käynnistetä.

Tapahtumatyyppi Kuvaus
show.bs.tab Tämä tapahtuma käynnistyy välilehtien näyttämisen yhteydessä, mutta ennen kuin uusi välilehti on näytetty. Käytä event.targetja event.relatedTargetkohdistaaksesi aktiiviseen välilehteen ja edelliseen aktiiviseen välilehteen (jos saatavilla).
show.bs.tab Tämä tapahtuma käynnistyy välilehden näyttämisen yhteydessä, kun välilehti on näytetty. Käytä event.targetja event.relatedTargetkohdistaaksesi aktiiviseen välilehteen ja edelliseen aktiiviseen välilehteen (jos saatavilla).
hide.bs.tab Tämä tapahtuma käynnistyy, kun uusi välilehti näytetään (ja siten edellinen aktiivinen välilehti piilotetaan). Käytä event.targetja event.relatedTargetkohdistaaksesi nykyiseen aktiiviseen välilehteen ja uuteen pian aktiiviseen välilehteen.
piilotettu.bs.tab Tämä tapahtuma käynnistyy, kun uusi välilehti näytetään (ja siten edellinen aktiivinen välilehti piilotetaan). Käytä event.targetja event.relatedTargetkohdistaaksesi edelliseen aktiiviseen välilehteen ja uuteen aktiiviseen välilehteen. 
$('a[data-toggle="list"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})