Skip to content

Commit

Permalink
add list group component
Browse files Browse the repository at this point in the history
  • Loading branch information
@mdo
mdo committed Mar 30, 2013
1 parent 731903a commit 2a9604f
Show file tree
Hide file tree
Showing 8 changed files with 424 additions and 0 deletions.
13 changes: 13 additions & 0 deletions docs/_includes/docs-nav.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,12 +163,25 @@ <h3 class="bs-docs-sidenav-heading"><a href="/">Bootstrap</a></h3>
</ul>
</li>
<li><a href="#media">Media object</a></li>
<li>
<a href="#list-group">List group</a>
<ul class="nav">
<li><a href="#list-group-basic">Basic list group</a></li>
<li><a href="#list-group-chevrons">With chevrons</a></li>
<li><a href="#list-group-badges">With badges</a></li>
<li><a href="#list-group-badges-chevrons">With badges and chevrons</a></li>
<li><a href="#list-group-linked">Linked items</a></li>
<li><a href="#list-group-custom-content">Custom content</a></li>
<!-- <li><a href="#list-group-pic">Leading picture</a></li> -->
</ul>
</li>
<li>
<a href="#panels">Panels</a>
<ul class="nav">
<li><a href="#panels-basic">Basic panel</a></li>
<li><a href="#panels-heading">Panel with heading</a></li>
<li><a href="#panels-alternatives">Contextual alternatives</a></li>
<li><a href="#panels-list-group">With list groups</a></li>
</ul>
</li>
<li><a href="#wells">Wells</a></li>
Expand Down
91 changes: 91 additions & 0 deletions docs/assets/css/bootstrap.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2944,6 +2944,80 @@ fieldset[disabled] .btn-link:focus {
z-index: 1051;
}

.list-group {
margin: 0 0 20px;
background-color: #ffffff;
}

.list-group-item {
position: relative;
display: block;
padding: 10px 30px 10px 15px;
margin-bottom: -1px;
border: 1px solid #dddddd;
}

.list-group-item:first-child {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}

.list-group-item:last-child {
margin-bottom: 0;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}

.list-group-item-heading {
margin-top: 0;
margin-bottom: 5px;
}

.list-group-item-text {
margin-bottom: 0;
line-height: 1.3;
}

a.list-group-item .list-group-item-heading {
color: #333;
}

a.list-group-item .list-group-item-text {
color: #555;
}

a.list-group-item:hover,
a.list-group-item:focus {
text-decoration: none;
background-color: #f5f5f5;
}

a.list-group-item.active {
z-index: 2;
color: #ffffff;
background-color: #428bca;
border-color: #428bca;
}

a.list-group-item.active .list-group-item-heading,
a.list-group-item.active .list-group-item-text {
color: inherit;
}

.list-group-item > .badge,
.list-group-item > .glyphicon-chevron-right {
float: right;
margin-right: -15px;
}

.list-group-item > .glyphicon-chevron-right {
margin-right: -15px;
}

.list-group-item > .glyphicon + .badge {
margin-right: 5px;
}

.panel {
padding: 15px;
margin-bottom: 20px;
Expand Down Expand Up @@ -3006,6 +3080,23 @@ fieldset[disabled] .btn-link:focus {
border-color: #bce8f1;
}

.list-group-flush {
margin: 15px -15px -15px;
}

.list-group-flush .list-group-item {
border-width: 1px 0;
}

.list-group-flush .list-group-item:first-child {
border-top-right-radius: 0;
border-top-left-radius: 0;
}

.list-group-flush .list-group-item:last-child {
border-bottom: 0;
}

.well {
min-height: 20px;
padding: 19px;
Expand Down
5 changes: 5 additions & 0 deletions docs/assets/css/docs.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -311,6 +311,7 @@ section > ul li {
.bs-docs-example > .jumbotron:last-child,
.bs-docs-example > .alert:last-child,
.bs-docs-example > .panel:last-child,
.bs-docs-example > .list-group:last-child,
.bs-docs-example > .well:last-child {
margin-bottom: 0;
}
Expand Down Expand Up @@ -339,6 +340,10 @@ section > ul li {
margin: 0;
}

/* List groups */
.bs-docs-example > .list-group {
max-width: 400px;
}

/* Navbar examples */
.bs-navbar-top-example,
Expand Down
191 changes: 191 additions & 0 deletions docs/docs.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4369,6 +4369,172 @@ <h4 class="media-heading">Media heading</h4>



<!-- List group
================================================== -->
<div class="bs-docs-section" id="list-group">
<div class="page-header">
<h1>List group</h1>
</div>
<p class="lead">List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.</p>

<h3 id="list-group-basic">Basic list group</h3>
<p>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.</p>
<div class="bs-docs-example">
<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>
</div>
{% highlight html linenos %}
<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>
{% endhighlight %}

<h3 id="list-group-chevrons">With chevrons</h3>
<p>Adding Glyphicon chevrons are automatically moved to the right.</p>
<div class="bs-docs-example">
<ul class="list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-chevron-right"></span>
Cras justo odio
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-chevron-right"></span>
Dapibus ac facilisis in
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-chevron-right"></span>
Morbi leo risus
</li>
</ul>
</div>
{% highlight html linenos %}
<ul class="list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-chevron-right"></span>
Cras justo odio
</li>
</ul>
{% endhighlight %}

<h3 id="list-group-badges">With badges</h3>
<p>Add the badges component to any list group item and it will automatically be positioned on the right.</p>
<div class="bs-docs-example">
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
<li class="list-group-item">
<span class="badge">2</span>
Dapibus ac facilisis in
</li>
<li class="list-group-item">
<span class="badge">1</span>
Morbi leo risus
</li>
</ul>
</div>
{% highlight html linenos %}
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
{% endhighlight %}

<h3 id="list-group-badges-chevrons">With badges and chevrons</h3>
<p>Why not both?</p>
<div class="bs-docs-example">
<ul class="list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="badge">14</span>
Cras justo odio
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="badge">2</span>
Dapibus ac facilisis in
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="badge">1</span>
Morbi leo risus
</li>
</ul>
</div>
{% highlight html linenos %}
<ul class="list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
{% endhighlight %}

<h3 id="list-group-linked">Linked list group</h3>
<p>Linkify list group items by using anchor tags 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.</p>
<div class="bs-docs-example">
<div class="list-group">
<a href="#" class="list-group-item active">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>
</div>
{% highlight html linenos %}
<div class="list-group">
<a href="#" class="list-group-item active">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>
{% endhighlight %}

<h3 id="list-group-custom-content">Custom content</h3>
<p>Add nearly any HTML within, even for linked list groups like the one below.</p>
<div class="bs-docs-example">
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
</a>
</div>
</div>
{% highlight html linenos %}
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">...</p>
</a>
</div>
{% endhighlight %}
</div>




<!-- Panels
================================================== -->
<div class="bs-docs-section" id="panels">
Expand Down Expand Up @@ -4430,6 +4596,31 @@ <h3 id="panels-alternatives">Contextual alternatives</h3>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>
<div class="panel panel-info">...</div>
{% endhighlight %}

<h3 id="panels-list-group">With list groups</h3>
<p>Easily include full-width <a href="./docs/#list-group">list groups</a> within any panel.</p>
<div class="bs-docs-example">
<div class="panel">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

<!-- List group -->
<ul class="list-group list-group-flush">
<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>
</div>
</div>
{% highlight html linenos %}
<div class="panel">
<div class="panel-heading">Panel heading</div>
Panel content
</div>
{% endhighlight %}

</div>
Expand Down
1 change: 1 addition & 0 deletions less/bootstrap.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
@import "component-animations.less";
@import "glyphicons.less";
@import "dropdowns.less";
@import "list-group.less";
@import "panels.less";
@import "wells.less";
@import "close.less";
Expand Down
Loading

0 comments on commit 2a9604f

Please sign in to comment.