Listegrupper er en fleksibel og kraftig komponent for å vise en rekke innhold. Endre og utvide dem til å støtte omtrent alt innhold i dem.
Grunnleggende eksempel
Den mest grunnleggende listegruppen er en uordnet liste med listeelementer og de riktige klassene. Bygg videre på det med alternativene som følger, eller med din egen CSS etter behov.
Cras justo odio
Dapibus ac facilisis i
Morbi leo risus
Porta ac consectetur ac
Vestibulum ved eros
Aktive elementer
Legg .activetil en .list-group-itemfor å angi gjeldende aktive valg.
Cras justo odio
Dapibus ac facilisis i
Morbi leo risus
Porta ac consectetur ac
Vestibulum ved eros
Deaktiverte elementer
Legg .disabledtil en .list-group-itemfor å få den til å virke deaktivert. Merk at noen elementer med .disabledogså vil kreve tilpasset JavaScript for å deaktivere klikkhendelsene deres (f.eks. koblinger).
Cras justo odio
Dapibus ac facilisis i
Morbi leo risus
Porta ac consectetur ac
Vestibulum ved eros
Lenker og knapper
Bruk <a>s eller <button>s for å lage handlingsbare listegruppeelementer med hover, deaktivert og aktive tilstander ved å legge til .list-group-item-action. Vi skiller disse pseudoklassene for å sikre at listegrupper laget av ikke-interaktive elementer (som <li>s eller <div>s) ikke gir et klikk eller trykk.
Pass på at du ikke bruker standardklassene .btnher .
Med <button>s kan du også bruke disabledattributtet i stedet for .disabledklassen. Dessverre <a>støtter s ikke attributtet deaktivert.
Skyll
Legg .list-group-flushtil for å fjerne noen kanter og avrundede hjørner for å gjengi listegruppeelementer kant-til-kant i en overordnet beholder (f.eks. kort).
Cras justo odio
Dapibus ac facilisis i
Morbi leo risus
Porta ac consectetur ac
Vestibulum ved eros
Horisontal
Legg .list-group-horizontaltil for å endre oppsettet til listegruppeelementer fra vertikal til horisontal på tvers av alle bruddpunkter. Alternativt kan du velge en responsiv variant .list-group-horizontal-{sm|md|lg|xl}for å gjøre en listegruppe horisontal som starter ved det bruddpunktet min-width. Foreløpig kan horisontale listegrupper ikke kombineres med flushlistegrupper.
ProTip: Vil du ha lik breddelistegruppeelementer når de er horisontale? Legg .flex-filltil hvert listegruppeelement.
Cras justo odio
Dapibus ac facilisis i
Morbi leo risus
Cras justo odio
Dapibus ac facilisis i
Morbi leo risus
Cras justo odio
Dapibus ac facilisis i
Morbi leo risus
Cras justo odio
Dapibus ac facilisis i
Morbi leo risus
Cras justo odio
Dapibus ac facilisis i
Morbi leo risus
Kontekstuelle klasser
Bruk kontekstuelle klasser for å style listeelementer med en statisk bakgrunn og farge.
Dapibus ac facilisis i
Et enkelt element i primærlistegruppen
Et enkelt sekundærlistegruppeelement
Et enkelt gruppeelement for suksessliste
Et enkelt gruppeelement for fareliste
Et enkelt gruppeelement på en advarselsliste
En enkel informasjonslistegruppeelement
Et enkelt lyslistegruppeelement
Et enkelt gruppeelement på mørk liste
Kontekstuelle klasser jobber også med .list-group-item-action. Legg merke til tillegget av svevestilene her som ikke er til stede i forrige eksempel. Også støttet er .activestaten; bruk den for å indikere et aktivt valg på et kontekstuell listegruppeelement.
Å bruke farger for å legge til mening gir bare en visuell indikasjon, som ikke vil bli formidlet til brukere av hjelpeteknologier – for eksempel skjermlesere. Sørg for at informasjon angitt med fargen enten er åpenbar fra selve innholdet (f.eks. den synlige teksten), eller er inkludert på alternative måter, for eksempel ekstra tekst skjult i .sr-onlyklassen.
Med merker
Legg til merker til et listegruppeelement for å vise antall uleste, aktivitet og mer ved hjelp av noen verktøy .
Cras justo odio14
Dapibus ac facilisis i2
Morbi leo risus1
Egendefinert innhold
Legg til nesten hvilken som helst HTML innenfor, selv for koblede listegrupper som den nedenfor, ved hjelp av flexbox-verktøy .
Bruk JavaScript-plugin-fanen – inkluder den individuelt eller gjennom den kompilerte bootstrap.jsfilen – for å utvide listegruppen vår til å lage tabulatorer med lokalt innhold.
Velit aute mollit ipsum ad dolor consectetur nulla oficia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat 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.
Bruke dataattributter
Du kan aktivere en listegruppenavigasjon uten å skrive noe JavaScript ved å spesifisere data-toggle="list"eller på et element. Bruk disse dataattributtene på .list-group-item.
Via JavaScript
Aktiver tabulatorlisteelement via JavaScript (hvert listeelement må aktiveres individuelt):
Du kan aktivere individuelle listeelementer på flere måter:
Fade-effekt
For å få fanepanelet til å tone inn, legg .fadetil hver .tab-pane. Den første faneruten må også .showgjøre det opprinnelige innholdet synlig.
Metoder
$().tab
Aktiverer et listeelementelement og innholdsbeholder. Tab skal ha enten en data-targeteller en hrefmålrettet beholdernode i DOM.
.tab('vis')
Velger det gitte listeelementet og viser tilhørende rute. Ethvert annet listeelement som tidligere ble valgt, blir opphevet og tilhørende rute er skjult. Går tilbake til den som ringer før faneruten faktisk har blitt vist (for eksempel før shown.bs.tabhendelsen inntreffer).
arrangementer
Når du viser en ny fane, utløses hendelsene i følgende rekkefølge:
hide.bs.tab(på gjeldende aktive fane)
show.bs.tab(på fanen som skal vises)
hidden.bs.tab(på den forrige aktive fanen, den samme som for hide.bs.tabarrangementet)
shown.bs.tab(på den nylig aktive fanen som nettopp er vist, den samme som for show.bs.tabarrangementet)
Hvis ingen fane allerede var aktiv, vil ikke hide.bs.tabog hidden.bs.tab-hendelsene bli utløst.
Hendelsestype
Beskrivelse
show.bs.tab
Denne hendelsen utløses på fanevisning, men før den nye fanen har blitt vist. Bruk event.targetog event.relatedTargetfor å målrette henholdsvis den aktive fanen og den forrige aktive fanen (hvis tilgjengelig).
vist.bs.tab
Denne hendelsen utløses på fanevisning etter at en fane er vist. Bruk event.targetog event.relatedTargetfor å målrette henholdsvis den aktive fanen og den forrige aktive fanen (hvis tilgjengelig).
hide.bs.tab
Denne hendelsen utløses når en ny fane skal vises (og dermed skal den forrige aktive fanen skjules). Bruk event.targetog event.relatedTargetfor å målrette henholdsvis den gjeldende aktive fanen og den nye snart-aktive fanen.
hidden.bs.tab
Denne hendelsen utløses etter at en ny fane vises (og dermed er den forrige aktive fanen skjult). Bruk event.targetog event.relatedTargetfor å målrette henholdsvis den forrige aktive fanen og den nye aktive fanen.