kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity
twbs--bootstrap/docs/components/list-group.md

170 lines
7.3 KiB
Markdown
Raw Normal View History

frontmatter that shit up
2014-07-13 07:59:31 +00:00
---
Massive cleanup - Simpler main nav on all pages - Back to purple masthead on homepage instead of dark graphite - Active link styles on the main nav - Cleaned up sidebar nav - New docs layout name - Homepage copy edits - Updated bright purple docs color
2015-08-15 05:45:55 +00:00
layout: docs
frontmatter that shit up
2014-07-13 07:59:31 +00:00
title: List group
v4: Social meta tags (#20825) * descriptions for getting started pages * descriptions for layout * add content page descriptions * more descriptions, updates to some existing ones * correct site url * add social stuff to config for twitter cards * add twitter meta tags; use large image for homepage and regular card for all others * add the assets * more site config * more social shiz to partial, remove existing meta for the partial, remove page title from homepage for simpler if statements
2016-10-03 01:19:47 +00:00
description: Learn about Bootstrap's list group component for rendering series of related content.
restore page headers, use partial and page frontmatter to organize it
2015-08-06 00:47:45 +00:00
group: components
frontmatter that shit up
2014-07-13 07:59:31 +00:00
---
Revamp list group states and docs to match - Overhauls the states, including the link/button variants, for list groups to better match how we handle .btn states. - Moved the .list-group-item-action styles before the .list-group-item so that we don't have to do as much overriding. - Removed the plain-hover-focus mixins from the disabled and active states since they're unnecessary. - Added support for :active states on the .list-group-item-action variant (for the current click state). - Removed the heading and text classes and variables since we can accomplish the same thing with utilities. - Added support for :disabled on the .list-group-item-action as well since we can use those with button elements. - Rearranged docs to reflect all the above changes. - Reformatted some Sass variables.
2016-12-28 21:45:07 +00:00
List groups are a flexible and powerful component for displaying a series of content. List group items can be modified and extended to support just about any content within. They can also be used as navigation with the right modifier class.
markdownify list group
2014-07-13 08:12:06 +00:00
add markdown toc stuff
2015-05-29 08:58:52 +00:00
## Contents
* Will be replaced with the ToC, excluding the "Contents" header
{:toc}
## Basic example
Revamp list group states and docs to match - Overhauls the states, including the link/button variants, for list groups to better match how we handle .btn states. - Moved the .list-group-item-action styles before the .list-group-item so that we don't have to do as much overriding. - Removed the plain-hover-focus mixins from the disabled and active states since they're unnecessary. - Added support for :active states on the .list-group-item-action variant (for the current click state). - Removed the heading and text classes and variables since we can accomplish the same thing with utilities. - Added support for :disabled on the .list-group-item-action as well since we can use those with button elements. - Rearranged docs to reflect all the above changes. - Reformatted some Sass variables.
2016-12-28 21:45:07 +00:00
The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.
markdownify list group
2014-07-13 08:12:06 +00:00
{% example html %}
Break up docs into includes
2014-03-17 02:03:53 +00:00
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
markdownify list group
2014-07-13 08:12:06 +00:00
{% endexample %}
Revamp list group states and docs to match - Overhauls the states, including the link/button variants, for list groups to better match how we handle .btn states. - Moved the .list-group-item-action styles before the .list-group-item so that we don't have to do as much overriding. - Removed the plain-hover-focus mixins from the disabled and active states since they're unnecessary. - Added support for :active states on the .list-group-item-action variant (for the current click state). - Removed the heading and text classes and variables since we can accomplish the same thing with utilities. - Added support for :disabled on the .list-group-item-action as well since we can use those with button elements. - Rearranged docs to reflect all the above changes. - Reformatted some Sass variables.
2016-12-28 21:45:07 +00:00
## Active items
markdownify list group
2014-07-13 08:12:06 +00:00
Revamp list group states and docs to match - Overhauls the states, including the link/button variants, for list groups to better match how we handle .btn states. - Moved the .list-group-item-action styles before the .list-group-item so that we don't have to do as much overriding. - Removed the plain-hover-focus mixins from the disabled and active states since they're unnecessary. - Added support for :active states on the .list-group-item-action variant (for the current click state). - Removed the heading and text classes and variables since we can accomplish the same thing with utilities. - Added support for :disabled on the .list-group-item-action as well since we can use those with button elements. - Rearranged docs to reflect all the above changes. - Reformatted some Sass variables.
2016-12-28 21:45:07 +00:00
Add `.active` to a `.list-group-item` to indicate the current active selection.
add specific docs example for badged list group items floated content has to come first in the DOM, otherwise you can get alignment bugs. in flexbox though, that's not the case. as such, i'm adding this example code to guide folks to the changes needed to move between default and flex modes.
2016-10-30 21:13:06 +00:00
Revamp list group states and docs to match - Overhauls the states, including the link/button variants, for list groups to better match how we handle .btn states. - Moved the .list-group-item-action styles before the .list-group-item so that we don't have to do as much overriding. - Removed the plain-hover-focus mixins from the disabled and active states since they're unnecessary. - Added support for :active states on the .list-group-item-action variant (for the current click state). - Removed the heading and text classes and variables since we can accomplish the same thing with utilities. - Added support for :disabled on the .list-group-item-action as well since we can use those with button elements. - Rearranged docs to reflect all the above changes. - Reformatted some Sass variables.
2016-12-28 21:45:07 +00:00
{% example html %}
add specific docs example for badged list group items floated content has to come first in the DOM, otherwise you can get alignment bugs. in flexbox though, that's not the case. as such, i'm adding this example code to guide folks to the changes needed to move between default and flex modes.
2016-10-30 21:13:06 +00:00
<ul class="list-group">
Revamp list group states and docs to match - Overhauls the states, including the link/button variants, for list groups to better match how we handle .btn states. - Moved the .list-group-item-action styles before the .list-group-item so that we don't have to do as much overriding. - Removed the plain-hover-focus mixins from the disabled and active states since they're unnecessary. - Added support for :active states on the .list-group-item-action variant (for the current click state). - Removed the heading and text classes and variables since we can accomplish the same thing with utilities. - Added support for :disabled on the .list-group-item-action as well since we can use those with button elements. - Rearranged docs to reflect all the above changes. - Reformatted some Sass variables.
2016-12-28 21:45:07 +00:00
<li class="list-group-item active">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
add specific docs example for badged list group items floated content has to come first in the DOM, otherwise you can get alignment bugs. in flexbox though, that's not the case. as such, i'm adding this example code to guide folks to the changes needed to move between default and flex modes.
2016-10-30 21:13:06 +00:00
</ul>
Revamp list group states and docs to match - Overhauls the states, including the link/button variants, for list groups to better match how we handle .btn states. - Moved the .list-group-item-action styles before the .list-group-item so that we don't have to do as much overriding. - Removed the plain-hover-focus mixins from the disabled and active states since they're unnecessary. - Added support for :active states on the .list-group-item-action variant (for the current click state). - Removed the heading and text classes and variables since we can accomplish the same thing with utilities. - Added support for :disabled on the .list-group-item-action as well since we can use those with button elements. - Rearranged docs to reflect all the above changes. - Reformatted some Sass variables.
2016-12-28 21:45:07 +00:00
{% endexample %}
add specific docs example for badged list group items floated content has to come first in the DOM, otherwise you can get alignment bugs. in flexbox though, that's not the case. as such, i'm adding this example code to guide folks to the changes needed to move between default and flex modes.
2016-10-30 21:13:06 +00:00
Revamp list group items built with anchors and buttons - Make it an explicit class instead of qualifying with elements (.list-group-item-action) - Rearrange the entire file for more straightforward flow - Fix text-decoration bug as a result of the reorder - Switch from h4's to h5's in docs - Update docs to merge anchors and buttons sections; clearify usage guidelines there, too - Nullify #17479 in the process
2016-02-07 03:50:00 +00:00
## Disabled items
markdownify list group
2014-07-13 08:12:06 +00:00
Revamp list group states and docs to match - Overhauls the states, including the link/button variants, for list groups to better match how we handle .btn states. - Moved the .list-group-item-action styles before the .list-group-item so that we don't have to do as much overriding. - Removed the plain-hover-focus mixins from the disabled and active states since they're unnecessary. - Added support for :active states on the .list-group-item-action variant (for the current click state). - Removed the heading and text classes and variables since we can accomplish the same thing with utilities. - Added support for :disabled on the .list-group-item-action as well since we can use those with button elements. - Rearranged docs to reflect all the above changes. - Reformatted some Sass variables.
2016-12-28 21:45:07 +00:00
Add `.disabled` to a `.list-group-item` to make it _appear_ disabled. Note that some elements with `.disabled` will also require custom JavaScript to fully disable their click events (e.g., links).
markdownify list group
2014-07-13 08:12:06 +00:00
{% example html %}
Revamp list group states and docs to match - Overhauls the states, including the link/button variants, for list groups to better match how we handle .btn states. - Moved the .list-group-item-action styles before the .list-group-item so that we don't have to do as much overriding. - Removed the plain-hover-focus mixins from the disabled and active states since they're unnecessary. - Added support for :active states on the .list-group-item-action variant (for the current click state). - Removed the heading and text classes and variables since we can accomplish the same thing with utilities. - Added support for :disabled on the .list-group-item-action as well since we can use those with button elements. - Rearranged docs to reflect all the above changes. - Reformatted some Sass variables.
2016-12-28 21:45:07 +00:00
<ul class="list-group">
<li class="list-group-item disabled">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
markdownify list group
2014-07-13 08:12:06 +00:00
{% endexample %}
Revamp list group states and docs to match - Overhauls the states, including the link/button variants, for list groups to better match how we handle .btn states. - Moved the .list-group-item-action styles before the .list-group-item so that we don't have to do as much overriding. - Removed the plain-hover-focus mixins from the disabled and active states since they're unnecessary. - Added support for :active states on the .list-group-item-action variant (for the current click state). - Removed the heading and text classes and variables since we can accomplish the same thing with utilities. - Added support for :disabled on the .list-group-item-action as well since we can use those with button elements. - Rearranged docs to reflect all the above changes. - Reformatted some Sass variables.
2016-12-28 21:45:07 +00:00
## Links and buttons
Revamp list group items built with anchors and buttons - Make it an explicit class instead of qualifying with elements (.list-group-item-action) - Rearrange the entire file for more straightforward flow - Fix text-decoration bug as a result of the reorder - Switch from h4's to h5's in docs - Update docs to merge anchors and buttons sections; clearify usage guidelines there, too - Nullify #17479 in the process
2016-02-07 03:50:00 +00:00
Revamp list group states and docs to match - Overhauls the states, including the link/button variants, for list groups to better match how we handle .btn states. - Moved the .list-group-item-action styles before the .list-group-item so that we don't have to do as much overriding. - Removed the plain-hover-focus mixins from the disabled and active states since they're unnecessary. - Added support for :active states on the .list-group-item-action variant (for the current click state). - Removed the heading and text classes and variables since we can accomplish the same thing with utilities. - Added support for :disabled on the .list-group-item-action as well since we can use those with button elements. - Rearranged docs to reflect all the above changes. - Reformatted some Sass variables.
2016-12-28 21:45:07 +00:00
Use `<a>`s or `<button>`s to create _actionable_ list group items with hover, disabled, and active states by adding `.list-group-item-action`. We separate these pseudo-classes to ensure list groups made of non-interactive elements (like `<li>`s or `<div>`s) don't provide a click or tap affordance.
Merge branch 'master' into v4
2015-06-19 06:56:43 +00:00
Revamp list group items built with anchors and buttons - Make it an explicit class instead of qualifying with elements (.list-group-item-action) - Rearrange the entire file for more straightforward flow - Fix text-decoration bug as a result of the reorder - Switch from h4's to h5's in docs - Update docs to merge anchors and buttons sections; clearify usage guidelines there, too - Nullify #17479 in the process
2016-02-07 03:50:00 +00:00
Be sure to **not use the standard `.btn` classes here**.
Merge branch 'master' into v4
2015-06-19 06:56:43 +00:00
{% example html %}
<div class="list-group">
Revamp list group items built with anchors and buttons - Make it an explicit class instead of qualifying with elements (.list-group-item-action) - Rearrange the entire file for more straightforward flow - Fix text-decoration bug as a result of the reorder - Switch from h4's to h5's in docs - Update docs to merge anchors and buttons sections; clearify usage guidelines there, too - Nullify #17479 in the process
2016-02-07 03:50:00 +00:00
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<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">Morbi leo risus</a>
<a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
Merge branch 'master' into v4
2015-06-19 06:56:43 +00:00
</div>
{% endexample %}
Revamp list group states and docs to match - Overhauls the states, including the link/button variants, for list groups to better match how we handle .btn states. - Moved the .list-group-item-action styles before the .list-group-item so that we don't have to do as much overriding. - Removed the plain-hover-focus mixins from the disabled and active states since they're unnecessary. - Added support for :active states on the .list-group-item-action variant (for the current click state). - Removed the heading and text classes and variables since we can accomplish the same thing with utilities. - Added support for :disabled on the .list-group-item-action as well since we can use those with button elements. - Rearranged docs to reflect all the above changes. - Reformatted some Sass variables.
2016-12-28 21:45:07 +00:00
With `<button>`s, you can also make use of the `disabled` attribute instead of the `.disabled` class. Sadly, `<a>`s don't support the disabled attribute.
markdownify list group
2014-07-13 08:12:06 +00:00
{% example html %}
Break up docs into includes
2014-03-17 02:03:53 +00:00
<div class="list-group">
Revamp list group items built with anchors and buttons - Make it an explicit class instead of qualifying with elements (.list-group-item-action) - Rearrange the entire file for more straightforward flow - Fix text-decoration bug as a result of the reorder - Switch from h4's to h5's in docs - Update docs to merge anchors and buttons sections; clearify usage guidelines there, too - Nullify #17479 in the process
2016-02-07 03:50:00 +00:00
<button type="button" class="list-group-item list-group-item-action active">
Break up docs into includes
2014-03-17 02:03:53 +00:00
Cras justo odio
Revamp list group items built with anchors and buttons - Make it an explicit class instead of qualifying with elements (.list-group-item-action) - Rearrange the entire file for more straightforward flow - Fix text-decoration bug as a result of the reorder - Switch from h4's to h5's in docs - Update docs to merge anchors and buttons sections; clearify usage guidelines there, too - Nullify #17479 in the process
2016-02-07 03:50:00 +00:00
</button>
<button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
<button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button>
<button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
Revamp list group states and docs to match - Overhauls the states, including the link/button variants, for list groups to better match how we handle .btn states. - Moved the .list-group-item-action styles before the .list-group-item so that we don't have to do as much overriding. - Removed the plain-hover-focus mixins from the disabled and active states since they're unnecessary. - Added support for :active states on the .list-group-item-action variant (for the current click state). - Removed the heading and text classes and variables since we can accomplish the same thing with utilities. - Added support for :disabled on the .list-group-item-action as well since we can use those with button elements. - Rearranged docs to reflect all the above changes. - Reformatted some Sass variables.
2016-12-28 21:45:07 +00:00
<button type="button" class="list-group-item list-group-item-action" disabled>Vestibulum at eros</button>
Break up docs into includes
2014-03-17 02:03:53 +00:00
</div>
markdownify list group
2014-07-13 08:12:06 +00:00
{% endexample %}
add markdown toc stuff
2015-05-29 08:58:52 +00:00
## Contextual classes
markdownify list group
2014-07-13 08:12:06 +00:00
update docs to improve contextual classes section
2016-12-28 21:52:49 +00:00
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.
markdownify list group
2014-07-13 08:12:06 +00:00
{% example html %}
Break up docs into includes
2014-03-17 02:03:53 +00:00
<div class="list-group">
update docs to improve contextual classes section
2016-12-28 21:52:49 +00:00
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
Revamp list group items built with anchors and buttons - Make it an explicit class instead of qualifying with elements (.list-group-item-action) - Rearrange the entire file for more straightforward flow - Fix text-decoration bug as a result of the reorder - Switch from h4's to h5's in docs - Update docs to merge anchors and buttons sections; clearify usage guidelines there, too - Nullify #17479 in the process
2016-02-07 03:50:00 +00:00
<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>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">Vestibulum at eros</a>
Break up docs into includes
2014-03-17 02:03:53 +00:00
</div>
markdownify list group
2014-07-13 08:12:06 +00:00
{% endexample %}
- Conveying color meaning to AT as markdown include - Add/replace callout for color and AT with include
2016-02-17 10:22:48 +00:00
{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
{{ callout-include | markdownify }}
Revamp list group states and docs to match - Overhauls the states, including the link/button variants, for list groups to better match how we handle .btn states. - Moved the .list-group-item-action styles before the .list-group-item so that we don't have to do as much overriding. - Removed the plain-hover-focus mixins from the disabled and active states since they're unnecessary. - Added support for :active states on the .list-group-item-action variant (for the current click state). - Removed the heading and text classes and variables since we can accomplish the same thing with utilities. - Added support for :disabled on the .list-group-item-action as well since we can use those with button elements. - Rearranged docs to reflect all the above changes. - Reformatted some Sass variables.
2016-12-28 21:45:07 +00:00
## With badges
Add badges to any list group item to show unread counts, activity, and more with the help of some utilities. Note the [`justify-content-between` utility class]({{ site.baseurl }}/layout/grid/#horizontal-alignment) and the badge's placement.
{% example html %}
<ul class="list-group">
<li class="list-group-item justify-content-between">
Cras justo odio
<span class="badge badge-default badge-pill">14</span>
</li>
<li class="list-group-item justify-content-between">
Dapibus ac facilisis in
<span class="badge badge-default badge-pill">2</span>
</li>
<li class="list-group-item justify-content-between">
Morbi leo risus
<span class="badge badge-default badge-pill">1</span>
</li>
</ul>
{% endexample %}
add markdown toc stuff
2015-05-29 08:58:52 +00:00
## Custom content
markdownify list group
2014-07-13 08:12:06 +00:00
Update custom content example for list group to use utils so the layout doesn't break
2017-01-04 04:08:10 +00:00
Add nearly any HTML within, even for linked list groups like the one below, with the help of [flexbox utilities]({{ site.baseurl }}/utilities/flexbox/).
markdownify list group
2014-07-13 08:12:06 +00:00
{% example html %}
Break up docs into includes
2014-03-17 02:03:53 +00:00
<div class="list-group">
Update custom content example for list group to use utils so the layout doesn't break
2017-01-04 04:08:10 +00:00
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start 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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small>Donec id elit non mi porta.</small>
markdownify list group
2014-07-13 08:12:06 +00:00
</a>
Update custom content example for list group to use utils so the layout doesn't break
2017-01-04 04:08:10 +00:00
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small class="text-muted">Donec id elit non mi porta.</small>
markdownify list group
2014-07-13 08:12:06 +00:00
</a>
Update custom content example for list group to use utils so the layout doesn't break
2017-01-04 04:08:10 +00:00
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small class="text-muted">Donec id elit non mi porta.</small>
Break up docs into includes
2014-03-17 02:03:53 +00:00
</a>
</div>
markdownify list group
2014-07-13 08:12:06 +00:00
{% endexample %}