Bootstrap List Group Listgroup

List groups

A list group is a new component of the bootstrap framework that can be used to make lists, vertical navigation, and more, as well as to make more beautiful components with other components. Since it is an independent component in bootstrap, it should also have its own independent source code:

? Less version : the corresponding source file list-group.less

? Sass Version : The corresponding source file is _list-group.scss

? compiled bootstrap version: corresponding source Bootstrap.css file line No. 4820 ~ No. 4994 Line

List groups-base list groups

The base list group, which appears to be a list item that is stripped of the list symbol, with some specific styles. The base list group in the bootstrap framework consists of two main sections:

? list-group: List group container, commonly used is the UL element, of course, can also be ol or DIV element

? list-group-item: list items, usually Li elements, and of course div elements

Let's look at a simple example:

<ul class= "list-group" >    <li class= "list-group-item" > Uncover CSS3 Veil </li>    <li class= "list-group-item" >CSS3 selector </li>    <li class= "list-group-item" > CSS3 border </li>    <li class= "list-group-item" >CSS3 background </li>    <li class= "  List-group-item">CSS3 text </li></ul>

The results are as follows:

Principle Analysis:

For the underlying list group, there are not too many styling settings, mainly setting their spacing, borders and fillets, and so on:

/*bootstrap.css file line No. 4820 ~ No. 4840 line */.list-group {  padding-left:0;  margin-bottom:20px;}. List-group-item {  position:relative;  Display:block;  padding:10px 15px;  Margin-bottom: -1px;  Background-color: #fff;  border:1px solid #ddd;}. list-group-item:first-child {  border-top-left-radius:4px;  border-top-right-radius:4px;}. list-group-item:last-child {  margin-bottom:0;  border-bottom-right-radius:4px;  border-bottom-left-radius:4px;}

List groups-list groups with badges

A list group with badges is actually an effect that combines the badge component and the underlying list group in the bootstrap framework. It's simple, just add the badge component "badge" to "List-group-item":

<ul class= "List-group" >    <li class= "List-group-item" >        <span class= "badge" >13</ Span> uncover CSS3 face    </li>    <li class= "List-group-item" >        <span class= "badge" > 456</span>CSS3 selector    </li>    <li class= "List-group-item" >        <span class= " Badge ">892</span>CSS3 border    </li>    <li class=" List-group-item ">        < span class= "badge" >90</span>CSS3 background    </li>    <li class= "List-group-item" >        <span class= "badge" >1290</span> CSS3 text    </li></ul>

Implementation principle:

The effect is very simple, is to set a right floating badge, of course, if there are two badges at the same time in a list item appears, but also set the distance between them:

/*bootstrap.css file line No. 4841 ~ No. 4846 line */.list-group-item >. badge {  float:right;}. List-group-item > Badge +. badge {  margin-right:5px;}

List groups--list groups with links

List groups with links, in fact, each list item has a link effect. The first thing you might think of is to add a link to the text of the list item, based on the base list group:

<ul class= "List-group" >    <li class= "List-group-item" >        <a href= "# #" > Uncover CSS3 faces </a>    </li>    <li class= "List-group-item" >        <a href= "# #" >CSS3 selector </a>    </li>    ...</ul>

One disadvantage of this is that the clickable area of the link is only valid for text:

But most of the time, you want to have clickable in any area of the list item. This time you need to add extra style to the link tag: "Display:block";

Although this can solve the problem, to meet the demand. But in the bootstrap framework, there is another way of implementing it. is to replace Ul.list-group with Div.list-group, and Li.list-group-item is replaced directly with A.list-group-item. This allows you to achieve the desired effect:

<div class= "List-group" >    <a href= "# #" class= "List-group-item" > Schematic css3</a >    <a href= "# #" class= "List-group-item" ><span class= "badge" >220</span> Sass Tutorial </    a > < a href= "# #" class= "List-group-item" > Playbootstrap</a > </div>

Principle Realization:

If the use of A.list-group-item, the style needs to do some processing, such as to underline text, increase the suspension effect, etc.:

/*bootstrap.css file line No. 4847 ~ No. 4858 line */a.list-group-item {  color: #555;} A.list-group-item. list-group-item-heading {  color: #333;} A.list-group-item:hover,a.list-group-item:focus {  color: #555;  Text-decoration:none;  Background-color: #f5f5f5;}

List groups--Custom list groups

The bootstrap box adds two new styles based on the linked list group:

? List-group-item-heading: Used to define the header style of a list item

? List-group-item-text: Used to define the main contents of a list item

The most important of these two styles is to help the developer to customize the contents of the list item, as in the following example:

<div class= "List-group" >    <a href= "# #" class= "List-group-item" >        
Principle Realization:
' These two styles primarily control the color of text in different states:
/*bootstrap.css file line No. 4850 ~ No. 4852 line */a.list-group-item. list-group-item-heading {color: #333;} /*bootstrap file line No. 4865 ~ No. 4874 line */.list-group-item.disabled. List-group-item-heading,.list-group-item.disabled:hover. List-group-item-heading,.list-group-item.disabled:focus. list-group-item-heading {color:inherit;}. list-group-item.disabled. List-group-item-text,.list-group-item.disabled:hover. List-group-item-text,. List-group-item.disabled:focus. List-group-item-text {color: #777;} /*bootstrap.css file line No. 4883 ~ No. 4898 line */.list-group-item.active. List-group-item-heading,.list-group-item.active:hover. List-group-item-heading,.list-group-item.active:focus. list-group-item-heading,.list-group-item.active. list-group-item-heading > Small,.list-group-item.active:hover list-group-item-heading > Small,. List-group-item.active:focus. list-group-item-heading > Small,.list-group-item.active. list-group-item-heading >. small,.list-group-item.active:hover. list-group-item-heading >. small,.list-group-itEm.active:focus. list-group-item-heading >. small {color:inherit;}. List-group-item.active. List-group-item-text,.list-group-item.active:hover. List-group-item-text,. List-group-item.active:focus. List-group-item-text {color: #e1edf7;}  /*bootstrap.css file line No. 4987 ~ No. 4994 line */.list-group-item-heading {margin-top:0; margin-bottom:5px;}.  List-group-item-text {margin-bottom:0; line-height:1.3;}
List group--Status settings for list items
The bootstrap framework also provides status effects for grouped list items, especially linked list groups. such as common state and disabled state. The implementation method is similar to the previously described component, where you only need to add the class name to the corresponding list item in the list group:
? Active: Represents the current state
? disabled: Indicates disabled state
Let's look at an example:
<div class= "List-group" >    active"><span class=" badge ">5902</span> plot css3</a >    <a href= "# #" class= "List-group-item" ><span class= "badge" >15902</span>W3cplus</a>    <a href= "# #" class= "List-group-item" ><span class= "badge" >59020</span> mu class network </a>    disabled"><span class=" badge ">0</span>sass China </a></div>
Principle Realization:
Styles are primarily styled on the background color and text of a list item:
/*bootstrap.css file line No. 4859 ~ No. 4864 line */.list-group-item.disabled,.list-group-item.disabled:hover,. List-group-item.disabled:focus {  color: #777;  Background-color: #eee;} /*bootstrap.css file line No. 4875 ~ No. 4882 line */.list-group-item.active,.list-group-item.active:hover,.list-group-item.active: Focus {  z-index:2;  Color: #fff;  Background-color: #428bca;  Border-color: #428bca;}
List groups--colorful list groups
As with the list group component and the warning component, Bootstrap provides different background colors and text color for different states, and you can use these class names to define list items of different background colors.
? List-group-item-success: Success, background color green
? List-group-item-info: Information, background color blue
? List-group-item-warning: Warning, background color is yellow
? List-group-item-danger: Error, background color is red
If you want to add a background color to the list item, simply add the corresponding class name on the "List-group-item" basis:
<div class= "List-group" >    <a href= "# #" class= "List-group-item Active" ><span class= "badge" >5902 </span> graphic css3</a>    list-group-item-success"><span class=" badge ">15902</span >W3cplus</a>    list-group-item-info"><span class=" badge ">59020</span> mu class Network < /a>    list-group-item-warning"><span class=" badge ">0</span>sass China </a>    list-group-item-danger"><span class=" badge ">10</span>mobile tutorial </a></div>
Principle Realization:
Similarly, these names only modify the background and text color, the corresponding source is: Boostrap.css file line No. 4899 ~ No. 4986 Line:
. list-group-item-success {  color: #3c763d;  Background-color: #dff0d8;} a.list-group-item-success {  color: #3c763d;} A.list-group-item-success. list-group-item-heading {  Color:inherit;} A.list-group-item-success:hover,a.list-group-item-success:focus {  color: #3c763d;  Background-color: #d0e9c6;} A.list-group-item-success.active,a.list-group-item-success.active:hover,a.list-group-item-success.active:focus {  color: #fff;  Background-color: #3c763d;  Border-color: #3c763d;}
Bootstrap List Group Listgroup