Bootstrap lys groepe


Basiese lys groepe

Die mees basiese lysgroep is 'n ongeordende lys met lysitems:

  • Eerste item
  • Tweede item
  • Derde item

Om 'n basiese lysgroep te skep, gebruik 'n <ul>element met klas .list-groupen <li>elemente met klas .list-group-item:

Voorbeeld

<ul class="list-group">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>

Lys Groep met Kentekens

Jy kan ook kentekens by 'n lysgroep voeg. Die kentekens sal outomaties aan die regterkant geplaas word:

  • 12Nuut
  • 5Geskrap
  • 3Waarskuwings

Om 'n kenteken te skep, skep 'n <span>element met klas .badge binne die lysitem:

Voorbeeld

<ul class="list-group">
  <li class="list-group-item">New <span class="badge">12</span></li>
  <li class="list-group-item">Deleted <span class="badge">5</span></li>
  <li class="list-group-item">Warnings <span class="badge">3</span></li>
</ul>


Lys groep met gekoppelde items

Die items in 'n lysgroep kan ook hiperskakels wees. Dit sal 'n grys agtergrondkleur by sweef voeg:

Om 'n lysgroep met gekoppelde items te skep, gebruik <div>in plaas van <ul> en <a>in plaas van <li>:

Voorbeeld

<div class="list-group">
  <a href="#" class="list-group-item">First item</a>
  <a href="#" class="list-group-item">Second item</a>
  <a href="#" class="list-group-item">Third item</a>
</div>

Aktiewe staat

Gebruik die .activeklas om die huidige item uit te lig:

Voorbeeld

<div class="list-group">
  <a href="#" class="list-group-item active">First item</a>
  <a href="#" class="list-group-item">Second item</a>
  <a href="#" class="list-group-item">Third item</a>
</div>

Gedeaktiveerde item

Die volgende lysgroep het 'n gedeaktiveerde item:

Om 'n item te deaktiveer, voeg die .disabledklas by:

Voorbeeld

<div class="list-group">
  <a href="#" class="list-group-item disabled">First item</a>
  <a href="#" class="list-group-item">Second item</a>
  <a href="#" class="list-group-item">Third item</a>
</div>

Kontekstuele Klasse

Kontekstuele klasse kan gebruik word om lysitems in te kleur:

  • Eerste item
  • Tweede item
  • Derde item
  • Vierde item

Die klasse vir die inkleur van lysitems is: .list-group-item-success, list-group-item-info, list-group-item-warning, en .list-group-item-danger:

Voorbeeld

<ul class="list-group">
  <li class="list-group-item list-group-item-success">First item</li>
  <li class="list-group-item list-group-item-info">Second item</li>
  <li class="list-group-item list-group-item-warning">Third item</li>
  <li class="list-group-item list-group-item-danger">Fourth item</li>
</ul>

Pasgemaakte inhoud

Jy kan byna enige HTML binne 'n lys groep item byvoeg.

Bootstrap verskaf die klasse .list-group-item-headingen .list-group-item-textwat soos volg gebruik kan word:

Voorbeeld

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">First List Group Item Heading</h4>
    <p class="list-group-item-text">List Group Item Text</p>
  </a>
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Second List Group Item Heading</h4>
    <p class="list-group-item-text">List Group Item Text</p>
  </a>
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Third List Group Item Heading</h4>
    <p class="list-group-item-text">List Group Item Text</p>
  </a>
</div>