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

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">Vestibulum at eros</a>
</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 %}
<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-badges">Badges</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-contextual-classes">Contextual classes</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.
a.list-group-item {
a.list-group-item,
button.list-group-item {
color: @list-group-link-color;
.list-group-item-heading {
@ -59,6 +60,11 @@ a.list-group-item {
}
}
button.list-group-item {
width: 100%;
text-align: left;
}
.list-group-item {
// Disabled state
&.disabled,

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

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