kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity
twbs--bootstrap/docs/components/list-group.md

132 lines
5.3 KiB
Markdown
Raw Normal View History

frontmatter that shit up
2014-07-13 03:59:31 -04: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 01:45:55 -04:00
layout: docs
frontmatter that shit up
2014-07-13 03:59:31 -04: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-02 21:19:47 -04: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-05 20:47:45 -04:00
group: components
frontmatter that shit up
2014-07-13 03:59:31 -04:00
---
markdownify list group
2014-07-13 04:12:06 -04:00
List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.
add markdown toc stuff
2015-05-29 04:58:52 -04:00
## Contents
* Will be replaced with the ToC, excluding the "Contents" header
{:toc}
## Basic example
List group docs: rm unnecessary <p> from Markdown source [skip sauce]
2016-01-13 18:57:22 -05:00
The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.
markdownify list group
2014-07-13 04:12:06 -04:00
{% example html %}
Break up docs into includes
2014-03-16 22:03:53 -04: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 04:12:06 -04:00
{% endexample %}
cleaned up the docs to complete the change from tag to badge
2016-10-27 18:03:45 -04:00
## Badge
markdownify list group
2014-07-13 04:12:06 -04:00
Flexbox all the time (Drop IE9 support and remove $enable-flex option) (#21389) * remove the $enable-flex variable option * remove bootstrap-flex.css dist file and it's grunt task * remove the separate flex css file for docs; it's all the same now * remove flexbox docs (porting some to the main grid docs in next commit) * clean up few grid docs bits to simplify copy, start to mention flexbox * port relevant flexbox-grid.md content to grid.md - clean up mixins - update how it works section - bring over sizing and alignment sections * remove the $enable-flex from the options.md page * update lead paragraph to mention flexbox * update migration to mention loss of ie9 support * remove mention of flexbox dist file * clarify IE support * making a note * remove flexbox variant mentions from component docs - updates docs for media object, navs, list group, and cards to consolidate docs - no more need to callout flexbox variants since it's now the default * remove $enable-flex if/else from sass files * remove flex dist files * update scss lint property order to account for flex properties * linting * change to numberless classes for autosizing, wrap in highlighting div * bump gruntfile and postcss to ie10 * redo intro sections * rearrange * phew, redo hella grid docs - rearrange all the things - consolidate some bits * remove reference to flexbox mode * more border action for demo * Make some changes to the .card's in .card-deck's to ensure footers align to the bottom
2016-12-21 23:26:17 -05:00
Add badges to any list group item to show unread counts, activity, and more with the help of some utilities. Note the [`flex-items-between` utility class]({{ site.baseurl }}/layout/grid/#horizontal-alignment), the badge's placement, and the lack of a float and margin utilities on the badges.
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 17:13:06 -04:00
{% highlight html %}
<ul class="list-group">
Rename `.flex-xs-*` and `.flex-items-xs-*` to `.flex-*` and `.flex-items-*` (#21218) * Clean up _flex.scss a little This commit just cleans up the formating of _flex.scss by changing it so that it uses a single `@include media-breakpoint-up` instead of multiple. It also aligns all of the CSS properties so it looks a bit nicer. * Remove `-xs` from flex classes
2016-11-27 18:19:27 -05:00
<li class="list-group-item flex-items-between">
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 17:13:06 -04:00
Cras justo odio
<span class="badge badge-default badge-pill">14</span>
</li>
Rename `.flex-xs-*` and `.flex-items-xs-*` to `.flex-*` and `.flex-items-*` (#21218) * Clean up _flex.scss a little This commit just cleans up the formating of _flex.scss by changing it so that it uses a single `@include media-breakpoint-up` instead of multiple. It also aligns all of the CSS properties so it looks a bit nicer. * Remove `-xs` from flex classes
2016-11-27 18:19:27 -05:00
<li class="list-group-item flex-items-between">
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 17:13:06 -04:00
Dapibus ac facilisis in
<span class="badge badge-default badge-pill">2</span>
</li>
Rename `.flex-xs-*` and `.flex-items-xs-*` to `.flex-*` and `.flex-items-*` (#21218) * Clean up _flex.scss a little This commit just cleans up the formating of _flex.scss by changing it so that it uses a single `@include media-breakpoint-up` instead of multiple. It also aligns all of the CSS properties so it looks a bit nicer. * Remove `-xs` from flex classes
2016-11-27 18:19:27 -05:00
<li class="list-group-item flex-items-between">
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 17:13:06 -04:00
Morbi leo risus
<span class="badge badge-default badge-pill">1</span>
</li>
</ul>
{% endhighlight %}
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-06 22:50:00 -05:00
## Disabled items
markdownify list group
2014-07-13 04:12:06 -04: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-06 22:50:00 -05:00
Add `.disabled` to a `.list-group-item` to gray it out to appear disabled.
markdownify list group
2014-07-13 04:12:06 -04:00
{% example html %}
Break up docs into includes
2014-03-16 22:03:53 -04: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-06 22:50:00 -05:00
<a href="#" class="list-group-item disabled">
Break up docs into includes
2014-03-16 22:03:53 -04:00
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
markdownify list group
2014-07-13 04:12:06 -04:00
{% endexample %}
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-06 22:50:00 -05:00
## Anchors and buttons
Use anchors or buttons to create actionable list group items with hover, disabled, and active states by adding `.list-group-item-action`. This separate class contains a few overrides to add compatibility for `<a>`s and `<button>`s, as well as the hover and focus states.
Merge branch 'master' into v4
2015-06-19 02:56:43 -04: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-06 22:50:00 -05:00
Be sure to **not use the standard `.btn` classes here**.
Merge branch 'master' into v4
2015-06-19 02:56:43 -04: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-06 22:50:00 -05: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 02:56:43 -04:00
</div>
{% endexample %}
markdownify list group
2014-07-13 04:12:06 -04:00
{% example html %}
Break up docs into includes
2014-03-16 22:03:53 -04: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-06 22:50:00 -05:00
<button type="button" class="list-group-item list-group-item-action active">
Break up docs into includes
2014-03-16 22:03:53 -04: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-06 22:50:00 -05: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>
<button type="button" class="list-group-item list-group-item-action disabled">Vestibulum at eros</button>
Break up docs into includes
2014-03-16 22:03:53 -04:00
</div>
markdownify list group
2014-07-13 04:12:06 -04:00
{% endexample %}
add markdown toc stuff
2015-05-29 04:58:52 -04:00
## Contextual classes
markdownify list group
2014-07-13 04:12:06 -04:00
Use contextual classes to style list items, default or linked. Also includes `.active` state.
{% example html %}
Break up docs into includes
2014-03-16 22:03:53 -04: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-06 22:50:00 -05: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-16 22:03:53 -04:00
</div>
markdownify list group
2014-07-13 04:12:06 -04:00
{% endexample %}
- Conveying color meaning to AT as markdown include - Add/replace callout for color and AT with include
2016-02-17 05:22:48 -05:00
{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
{{ callout-include | markdownify }}
add markdown toc stuff
2015-05-29 04:58:52 -04:00
## Custom content
markdownify list group
2014-07-13 04:12:06 -04:00
Add nearly any HTML within, even for linked list groups like the one below.
{% example html %}
Break up docs into includes
2014-03-16 22:03:53 -04: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-06 22:50:00 -05:00
<a href="#" class="list-group-item list-group-item-action active">
<h5 class="list-group-item-heading">List group item heading</h5>
markdownify list group
2014-07-13 04:12:06 -04:00
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</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-06 22:50:00 -05:00
<a href="#" class="list-group-item list-group-item-action">
<h5 class="list-group-item-heading">List group item heading</h5>
markdownify list group
2014-07-13 04:12:06 -04:00
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</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-06 22:50:00 -05:00
<a href="#" class="list-group-item list-group-item-action">
<h5 class="list-group-item-heading">List group item heading</h5>
markdownify list group
2014-07-13 04:12:06 -04:00
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
Break up docs into includes
2014-03-16 22:03:53 -04:00
</a>
</div>
markdownify list group
2014-07-13 04:12:06 -04:00
{% endexample %}
Copy permalink