diff options
| author | Mark Otto <[email protected]> | 2013-12-07 14:09:03 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2013-12-07 14:09:03 -0800 |
| commit | 07de53c644b315852c5f315ab91bfd6d65660d50 (patch) | |
| tree | 2ce0972d5c8c19c67b7eb079e566223ef2ae2be1 /components.html | |
| parent | 693915d1277d465844c6757fc107110342229d76 (diff) | |
| download | bootstrap-07de53c644b315852c5f315ab91bfd6d65660d50.tar.xz bootstrap-07de53c644b315852c5f315ab91bfd6d65660d50.zip | |
Contextual list group cleanup
* Adds nav link to sidebar for contextual classes
* Refactors to use prefixed classes, like .list-group-item-info, instead of chained classes
* Adds default and linked variations to example in docs
Diffstat (limited to 'components.html')
| -rw-r--r-- | components.html | 40 |
1 files changed, 28 insertions, 12 deletions
diff --git a/components.html b/components.html index 3a6ccca1d..5ef006a0d 100644 --- a/components.html +++ b/components.html @@ -3328,23 +3328,39 @@ body { padding-bottom: 70px; } {% endhighlight %} <h3 id="list-group-contextual-classes">Contextual classes</h3> - <p>Use contextual classes to color list items.</p> + <p>Use contextual classes to style list items, default or linked. Also includes <code>.active</code> state.</p> <div class="bs-example"> - <div class="list-group"> - <a href="#" class="list-group-item">Cras justo odio</a> - <a href="#" class="list-group-item success">Dapibus ac facilisis in</a> - <a href="#" class="list-group-item">Morbi leo risus</a> - <a href="#" class="list-group-item warning">Porta ac consectetur ac</a> - <a href="#" class="list-group-item danger">Vestibulum at eros</a> + <div class="row"> + <div class="col-sm-6"> + <ul class="list-group"> + <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li> + <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li> + <li class="list-group-item list-group-item-danger">Vestibulum at eros</li> + <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li> + </ul> + </div> + <div class="col-sm-6"> + <div class="list-group"> + <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a> + <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a> + <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a> + <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a> + </div> + </div> </div> </div> {% highlight html %} +<ul class="list-group"> + <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li> + <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li> + <li class="list-group-item list-group-item-danger">Vestibulum at eros</li> + <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li> +</ul> <div class="list-group"> - <a href="#" class="list-group-item">Cras justo odio</a> - <a href="#" class="list-group-item success">Dapibus ac facilisis in</a> - <a href="#" class="list-group-item">Morbi leo risus</a> - <a href="#" class="list-group-item warning">Porta ac consectetur ac</a> - <a href="#" class="list-group-item danger">Vestibulum at eros</a> + <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a> + <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a> + <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a> + <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a> </div> {% endhighlight %} |