rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-03-15 15:29:22 +01:00
Code Issues Actions Packages Releases Activity

Merge pull request #16215 from zacechola/list_group_buttons

Browse Source 
Adds button styles to `.list-group-item`
This commit is contained in:
Mark Otto 2015-05-13 21:35:39 -07:00
commit c5babda02f
4 changed files with 33 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
docs/_includes/components/list-group.html
View File

@ -74,6 +74,27 @@
<a href="#" class="list-group-item">Porta ac consectetur ac</a> <a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a> <a href="#" class="list-group-item">Vestibulum at eros</a>
</div> </div>
{% endhighlight %}
<h2 id="list-group-buttons">Button items</h2>
<p>List group items may be buttons instead of list items (that also means a parent <code>&lt;div&gt;</code> instead of an <code>&lt;ul&gt;</code>). No need for individual parents around each element. <strong class="text-danger">Don't use the standard <code>.btn</code> classes here.</strong></p>
<div class="bs-example" data-example-id="list-group-btns">
<div class="list-group">
<button class="list-group-item">Cras justo odio</button>
<button class="list-group-item">Dapibus ac facilisis in</button>
<button class="list-group-item">Morbi leo risus</button>
<button class="list-group-item">Porta ac consectetur ac</button>
<button class="list-group-item">Vestibulum at eros</button>
</div>
</div>
{% highlight html %}
<div class="list-group">
<button class="list-group-item">Cras justo odio</button>
<button class="list-group-item">Dapibus ac facilisis in</button>
<button class="list-group-item">Morbi leo risus</button>
<button class="list-group-item">Porta ac consectetur ac</button>
<button class="list-group-item">Vestibulum at eros</button>
</div>
{% endhighlight %} {% endhighlight %}
<h2 id="list-group-disabled">Disabled items</h2> <h2 id="list-group-disabled">Disabled items</h2>

1
docs/_includes/nav/components.html
View File

@ -124,6 +124,7 @@
<li><a href="#list-group-basic">Basic example</a></li> <li><a href="#list-group-basic">Basic example</a></li>
<li><a href="#list-group-badges">Badges</a></li> <li><a href="#list-group-badges">Badges</a></li>
<li><a href="#list-group-linked">Linked items</a></li> <li><a href="#list-group-linked">Linked items</a></li>
<li><a href="#list-group-buttons">Button items</a></li>
<li><a href="#list-group-disabled">Disabled items</a></li> <li><a href="#list-group-disabled">Disabled items</a></li>
<li><a href="#list-group-contextual-classes">Contextual classes</a></li> <li><a href="#list-group-contextual-classes">Contextual classes</a></li>
<li><a href="#list-group-custom-content">Custom content</a></li> <li><a href="#list-group-custom-content">Custom content</a></li>

12
less/list-group.less
View File

@ -38,12 +38,13 @@
} }
// Linked list items // Interactive list items
// //
// Use anchor elements instead of `li`s or `div`s to create linked list items. // Use anchor or button elements instead of `li`s or `div`s to create interactive items.
// Includes an extra `.active` modifier class for showing selected items. // Includes an extra `.active` modifier class for showing selected items.
a.list-group-item { a.list-group-item,
button.list-group-item {
color: @list-group-link-color; color: @list-group-link-color;
.list-group-item-heading { .list-group-item-heading {
@ -59,6 +60,11 @@ a.list-group-item {
} }
} }
button.list-group-item {
width: 100%;
text-align: left;
}
.list-group-item { .list-group-item {
// Disabled state // Disabled state
&.disabled, &.disabled,

3
less/mixins/list-group.less
View File

@ -5,7 +5,8 @@
color: @color; color: @color;
background-color: @background; background-color: @background;
a& { a&,
button& {
color: @color; color: @color;
.list-group-item-heading { .list-group-item-heading {