In-depth analysis of Bootstrap List Group components

A List Group is a flexible and powerful component that can be used not only to display a simple set of elements, but also to customize complex content. This article introduces the Bootstrap List Group components. If you are interested, learn about Bootstrap. It is from Twitter and is currently the most popular front-end framework. Bootstrap is based on HTML, CSS, and JAVASCRIPT. It is concise and flexible, making Web development faster.

A List Group is a flexible and powerful component that can be used not only to display a simple set of elements, but also to customize complex content. A list group can be used to create a list, vertical navigation, and other effects. It can also be used with other components to create more beautiful components. A List Group is also an independent component in the bootstrap framework, therefore, you should have your own independent source code:

LESS：list-group.lessSASS:_list-group.scss

The List Group seems to have removed the list item of the List symbol and matched with some specific styles. The basic list group in the bootstrap framework consists of two parts:

List-group: list group container, which is commonly used with ul elements or ol or p elements.

List-group-item: list item. It is a li element or a p element.

There are not too many style settings for the basic list group, including the spacing, border, and rounded corner;

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

Let's look at an example:

Basic List Group bacon, Potato bread, spicy flavor, fried chicken nuggets, coriander, preserved eggs, tofu, peas, fried horseshoe Hawthorn, pork ribs, Leek, fried prawns

List Group with badges

A list group with a badge is an effect of combining the badge component in the bootstrap framework with the basic list component. append the badge component "badge" on the basis of list-group-item"

Implementation principle:

Set a right floating for the badge. Of course, if the two badges appear in a list item at the same time, the distance between them is also set.

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

Example:

List Group with badges 13 bacon potato bread 20 spicy fried chicken nuggets 12 coriander preserved eggs tofu 5 peas sauteed horseshoe 8 Hawthorn ribs 15 leek Fried River Shrimp

List Group with Link

In fact, a list group with connection has a link effect for each list item. Generally, you can add a link to the text of the list item based on the basic list group, for example:

Braised Pork with bacon, Potato bread, spicy flavor, fried chicken slices, coriander, preserved eggs, tofu, peas, sauteed horseshoe Hawthorn, pork ribs, Leek, fried prawns

The effect is as follows:

The disadvantage of this method is that the click area of the link is only valid in the text. However, you often want to have a clickable area in any area of the list item, this requires additional style: display: block to be added to the link tag. However, in the bootstrap framework, another implementation method is used, that is, ul. list-group uses p. list-group to replace, li. list-group-item uses. replace list-group-item to achieve the desired effect.

Implementation principle:

If a. list-group-item is used, the style needs to be processed, such as removing text underscores and increasing the floating effect. 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 of a linked list group:

Linked List Group bacon, Potato bread, spicy fried chicken, coriander, preserved eggs, tofu, peas, fried horseshoe Hawthorn, pork ribs, Leek, fried prawns

The effect is as follows:

Custom List Group

The bootstrap framework adds two styles Based on the Link 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 content of a list item

The two styles are used to help developers customize the content of the list items.

Implementation principle:

These two styles mainly control the text color that is not allowed. The following is the css source code:

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

Custom List Group List 1 Title List 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 2 Content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 3 Title List 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 4 title list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 Content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 5 content list 5 content list 5 content list 5 content list 5 content list 5 content list 5 content list 5 content list 5 content list 5 content list 5 content list 5 content list 5 content list 6 Title List 6 content list 6 content list 6 content list 6 content list 6 content list 6 content list 6 content list 6 content list 6 content list 6 content list 6 content list 6 content list 6 content list LIST 6 content list 6 content list 6 content list 6 content list 6 content list 6 content list 6 content list 6 content list 6 content list 6 content list 6 content list 6 content

List item status settings

The bootstrap framework also provides the status effect for the composite list items, especially the Link List Group. The implementation method is similar to the previous component, in the list group, you only need to add the class name to the corresponding list item :. active (indicating the current status ),. disabled)

Implementation principle:

The style mainly sets the background color and text of the list items. 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:

List Group status settings List 1 Title List 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 2 Content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 3 Title List 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 4 title list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 Content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 5 content list 5 content list 5 content list 5 content list 5 content list 5 content list 5 content list 5 content list 5 content list 5 content list 5 content list 5 content list 5 content list 6 Title List 6 content list 6 content list 6 content list 6 content list 6 content list 6 content list 6 content list 6 content list 6 content list 6 content list 6 content list 6 content list 6 content list LIST 6 content list 6 content list 6 content list 6 content list 6 content list 6 content list 6 content list 6 content list 6 content list 6 content list 6 content list 6 content

The effect is as follows (the third item in the list is disabled. Move the mouse over it and there is a disabled icon on it. Here is a screenshot directly, and this effect is not displayed ):

Colorful List Group

Like the warning component, the List Group Component provides different background colors and text colors for different States. You can use these class names to define list items 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: Error red (background color)

Implementation principle:

These class names only modify the background color and text color. 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;}

For other status style codes, see the source code file. To add a background color to the list item, you only need to append the corresponding class name to the class. lis-group-item.

Use of colorful list groups:

Colorful List Group list item 110 list item 110 list item 110 list item 110 list item 110 list item

The effect is as follows:

The above is an in-depth analysis of the content of the Bootstrap List Group components. For more information, see the PHP Chinese Network (www.php1.cn )!