An in-depth analysis of Bootstrap List group component _javascript skills

Bootstrap, from Twitter, is currently the most popular front-end framework. Bootstrap is based on HTML, CSS, JAVASCRIPT, it is simple and flexible, making Web development faster.

List groups are flexible and powerful components that can be used not only to display a simple set of elements, but also to be used for complex custom content. List groups can be used to make lists, vertical navigation and other effects, but also with other components to make more beautiful components, list groups in the bootstrap framework is also a stand-alone component, so also have their own independent source code:

Less:list-group.less
Sass:_list-group.scss

A list group looks like a list item that has been stripped of the list symbol, and with some specific styles, the underlying list group in the bootstrap framework consists of two main parts:

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

List-group-item: List item, commonly used is Li element, also can be DIV element

For the underlying list group did not do too many style settings, mainly set its spacing, borders and rounded corners, etc.

. 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;
}

Take a look at an example:

List Group with badges

A list group with badges is actually an effect of combining the badge component in the bootstrap frame with the underlying list component, as simple as adding the badge component "badge" on the basis of the. List-group-item.

Implementation principle:

Set a right float to the badge, of course, if two badges appear in a list item at the same time, the distance between them is set

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

Example:

List group with links

A list group with connections is actually a link effect for each list item, and it is generally thought that you add a link to the text of a list item, based on the underlying list group, such as:

<ul class= "List-group" >
<li class= "List-group-item" ><a href= "#" > Bacon potatoes stewed rice </a></li>
<li class= "List-group-item" ><a href= "#" > Spicy Fried Chicken nuggets </a></li> <li class=
" List-group-item "><a href=" # "> Coriander preserved egg tofu </a></li>
<li class=" List-group-item "><a href= "#" > Dutch peas Fried horseshoe </a></li>
<li class= "List-group-item" ><a href= "#" > Hawthorn ribs </a> </li>
<li class= "List-group-item" ><a href= "#" > Leek fried Shrimp </a></li>
</ul>

The effect is as follows:

The disadvantage of this is that the click area of the link is only valid on the text, but most of the time you want to have clickable in any area of the list item, you need to add an extra style to the link tag: display:block; But in the bootstrap frame, Or another way to implement, is to replace the ul.list-group with Div.list-group, Li.list-group-item with A.list-group-item to replace, so you can achieve the desired effect.

Implementation principle:

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

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;
}

Use with linked list groups:

The effect is as follows:

Custom List Group

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

. list-group-item-heading: Used to define list item header style

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

The most important function of these two styles is to help the group developer to customize the contents of the list items.

Implementation principle:

These two styles mainly control the text color of the state, the following is the CSS source:

A.list-group-item. list-group-item-heading {color: #333;} 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;} 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;} list-group-item-heading {margin-top:0;
margin-bottom:5px; }. list-group-item-text {margin-bottom:0; line-height:1.3;}

Use of custom list groups

Status Settings for list items

The bootstrap framework also gives a status effect to the grouped list items, especially the linked list group, which is similar to the component described earlier, in which only the class name is added to the corresponding list item in the list group:. Active (represents the current state),. Disabled (for disabled status)

Implementation principle:

In style, the background color and text of the list items are mainly styled, the following is the CSS source code:

. list-group-item.disabled,
. List-group-item.disabled:hover,
. list-group-item.disabled:focus {
Color : #777;
Background-color: #eee;
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;
}

Example:

The effect is as follows (the third list item is disabled, the mouse is placed on it has a disabled icon, here is a direct cut of the graph, do not see this effect):

Colorful List Group

Like a list group component and a warning component, Bootstrap provides different background and text colors for different states, and you can use these class names to define a list item with different background colors:

. List-group-item-success: Successful green (background color)
. List-group-item-info: Information Blue (background color)
. List-group-item-warning: Warning Yellow (background color)
. List-group-item-danger: Wrong red (background color)

Implementation principle:

The names of these classes only modify the background color and text colors, the corresponding source code is as follows:

. 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;
}

Other status style code check the source file, if you want to add a background color to the list item, simply append the corresponding class name to the class. Lis-group-item.

The use of colorful list groups:

The effect is as follows: