From 2a9604fdd297fee6661561d1ccf7922b4d599641 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 30 Mar 2013 16:07:50 -0700 Subject: [PATCH] add list group component --- docs/_includes/docs-nav.html | 13 +++ docs/assets/css/bootstrap.css | 91 ++++++++++++++++ docs/assets/css/docs.css | 5 + docs/docs.html | 191 ++++++++++++++++++++++++++++++++++ less/bootstrap.less | 1 + less/list-group.less | 94 +++++++++++++++++ less/panels.less | 18 ++++ less/variables.less | 11 ++ 8 files changed, 424 insertions(+) create mode 100644 less/list-group.less diff --git a/docs/_includes/docs-nav.html b/docs/_includes/docs-nav.html index 4a91214a38..652b845cd8 100644 --- a/docs/_includes/docs-nav.html +++ b/docs/_includes/docs-nav.html @@ -163,12 +163,25 @@
  • Media object
    • +
  • + List group + +
  • Panels
  • Wells
    • diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index b86a16a788..fcbc5d5808 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -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; @@ -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; diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 181a3a734e..e1fd6a2b45 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -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; } @@ -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, diff --git a/docs/docs.html b/docs/docs.html index 7603d2ccc3..844a467d2b 100644 --- a/docs/docs.html +++ b/docs/docs.html @@ -4369,6 +4369,172 @@ For example, <section> should be wrapped as inline. + +
    +
    +

    List group

    +
    +

    List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.

    + +

    Basic list group

    +

    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.

    +
    +
      +
    • Cras justo odio
      • +
    • Dapibus ac facilisis in
      • +
    • Morbi leo risus
      • +
    • Porta ac consectetur ac
      • +
    • Vestibulum at eros
      • +
    +
    +{% highlight html linenos %} + +{% endhighlight %} + +

    With chevrons

    +

    Adding Glyphicon chevrons are automatically moved to the right.

    +
    +
      +
    • + + Cras justo odio +
      • +
    • + + Dapibus ac facilisis in +
      • +
    • + + Morbi leo risus +
      • +
    +
    +{% highlight html linenos %} + +{% endhighlight %} + +

    With badges

    +

    Add the badges component to any list group item and it will automatically be positioned on the right.

    +
    +
      +
    • + 14 + Cras justo odio +
      • +
    • + 2 + Dapibus ac facilisis in +
      • +
    • + 1 + Morbi leo risus +
      • +
    +
    +{% highlight html linenos %} + +{% endhighlight %} + +

    With badges and chevrons

    +

    Why not both?

    +
    +
      +
    • + + 14 + Cras justo odio +
      • +
    • + + 2 + Dapibus ac facilisis in +
      • +
    • + + 1 + Morbi leo risus +
      • +
    +
    +{% highlight html linenos %} + +{% endhighlight %} + +

    Linked list group

    +

    Linkify list group items by using anchor tags instead of list items (that also means a parent <div> instead of an <ul>. No need for individual parents around each element.

    +
    +
    + Cras justo odio + Dapibus ac facilisis in + Morbi leo risus + Porta ac consectetur ac + Vestibulum at eros +
    +
    +{% highlight html linenos %} +
    + Cras justo odio + Dapibus ac facilisis in + Morbi leo risus + Porta ac consectetur ac + Vestibulum at eros +
    +{% endhighlight %} + +

    Custom content

    +

    Add nearly any HTML within, even for linked list groups like the one below.

    +
    +
    + +

    List group item heading

    +

    Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna.

    +     + +

    List group item heading

    +

    Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna.

    +     + +

    List group item heading

    +

    Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna.

    +     +
    +
    +{% highlight html linenos %} +
    + +

    List group item heading

    +

    ...

    +     +
    +{% endhighlight %} +
    + + + +
    @@ -4430,6 +4596,31 @@ For example, <section> should be wrapped as inline.
    ...
    ...
    ...
    +{% endhighlight %} + +

    With list groups

    +

    Easily include full-width list groups within any panel.

    +
    +
    + +
    Panel heading
    +

    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.

    + + +
      +
    • Cras justo odio
      • +
    • Dapibus ac facilisis in
      • +
    • Morbi leo risus
      • +
    • Porta ac consectetur ac
      • +
    • Vestibulum at eros
      • +
    +
    +
    +{% highlight html linenos %} +
    +
    Panel heading
    + Panel content +
    {% endhighlight %}
    diff --git a/less/bootstrap.less b/less/bootstrap.less index c887fcef6f..c73c85c385 100644 --- a/less/bootstrap.less +++ b/less/bootstrap.less @@ -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"; diff --git a/less/list-group.less b/less/list-group.less new file mode 100644 index 0000000000..23ddb0d47e --- /dev/null +++ b/less/list-group.less @@ -0,0 +1,94 @@ +// +// List groups +// -------------------------------------------------- + +// Base class +// +// Easily usable on