diff options
| author | Mark Otto <[email protected]> | 2016-12-28 13:52:49 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2016-12-28 15:13:43 -0800 |
| commit | f1016efaf4f5b5d3756704a9b7523fdbe578f320 (patch) | |
| tree | 2aafe5d838b60f7fd1f70c67e2022a9b46fbb1e8 /docs/components | |
| parent | 78d0e97509056d0bef61000e23cd1fce74b4d3f6 (diff) | |
| download | bootstrap-f1016efaf4f5b5d3756704a9b7523fdbe578f320.tar.xz bootstrap-f1016efaf4f5b5d3756704a9b7523fdbe578f320.zip | |
update docs to improve contextual classes section
Diffstat (limited to 'docs/components')
| -rw-r--r-- | docs/components/list-group.md | 15 |
1 files changed, 14 insertions, 1 deletions
diff --git a/docs/components/list-group.md b/docs/components/list-group.md index 3def6e792..3b30f7d8d 100644 --- a/docs/components/list-group.md +++ b/docs/components/list-group.md @@ -87,10 +87,23 @@ With `<button>`s, you can also make use of the `disabled` attribute instead of t ## Contextual classes -Use contextual classes to style list items, default or linked. Also includes `.active` state. +Use contextual classes to style list items with a stateful background and color. + +{% example html %} +<ul class="list-group"> + <li class="list-group-item">Dapibus ac facilisis in</li> + <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li> + <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</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> +</ul> +{% endexample %} + +Contextual classes also work with `.list-group-item-action`. Note the addition of the hover styles here not present in the previous example. Also supported is the `.active` state; apply it to indicate an active selection on a contextual list group item. {% example html %} <div class="list-group"> + <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a> <a href="#" class="list-group-item list-group-item-action list-group-item-success">Dapibus ac facilisis in</a> <a href="#" class="list-group-item list-group-item-action list-group-item-info">Cras sit amet nibh libero</a> <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Porta ac consectetur ac</a> |