Bootstarp Learning (19th) List Group, bootstarp List Group

Bootstarp Learning (19th) List Group, bootstarp List Group
List Group

A List Group is a new component added to the Bootstrap framework. It 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. Since Bootstrap is an independent component, it should have its own independent source code:

LESS version: The corresponding source file list-group.less

Sass versionThe corresponding source code file is _ list-group.scss

Compiled Bootstrap version:The corresponding source code bootstrap.css file contains 4,820th rows ~ 4,994th rows

The following sections will explain these list groups in detail. Don't worry!

<H3> basic list group 

List Group-Basic List Group
The basic 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. It can also be ol or div elements.
List-group-item: List item, which is commonly used as the li element. It can also be a div element.
Let's look at a simple example:
<Ul class ="List-group"> <Li class ="List-group-item"> Unveil CSS3 </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 running effect is as follows:

Principle Analysis:
There are not too many style settings for the basic list group, including the spacing, border, and rounded corner:
/* The bootstrap.css file contains 4,820th rows ~ 4,840th rows */. 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 ;}
<Ul class = "list-group"> <li class = "list-group-item"> unveil CSS3 </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>

List Group-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 group. The procedure is simple. You only need to add the badge component "badge" in "list-group-item ":
<Ul class = "list-group"> <li class = "list-group-item"><Span class = "badge"> 13 </span>Uncover the surface of CSS3 </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>
The running effect is as follows:

Implementation principle:
The effect is very simple. It is to set a right floating for the badge. Of course, if two badges appear in a list item at the same time, the distance between them is also set:
/* The bootstrap.css file contains 4,841st rows ~ 4,846th rows */. list-group-item>. badge {float: right;}. list-group-item>. badge +. badge {margin-right: 5px ;}
<Ul class = "list-group"> <li class = "list-group-item"> <span class = "badge"> 13 </span> uncover the surface of CSS3 </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>

List Group-List Group with Link
In fact, each list item has a link effect. You may first think of adding a link to the text of the list item based on the basic list group:
<Ul class = "list-group"> <li class = "list-group-item"> <a href = "#"> uncover the surface of CSS3 </a> </li> <li class = "list-group-item"> <a href = "##"> CSS3 selector </a> </li>... </ul>
The running effect is as follows:

One disadvantage is that the click area of the link is only valid in the text:

However, you often want to have a clickable option in any area of the list item. In this case, you need to add an additional style on the Link label: "display: block ";

This can solve the problem and meet the requirements. However, in the Bootstrap framework, another implementation method is used. Instead, use div. list-group to replace ul. list-group, and use a. list-group-item to replace li. list-group-item directly. In this way, you can achieve the desired effect:
<DivClass = "list-group"> <AHref = "#" class = "list-group-item"> graphic CSS3 </> <AHref = "#" class = "list-group-item"> <span class = "badge"> 220 </span> Sass tutorial </> <AHref = "#" class = "list-group-item"> fun Bootstrap </> </Div>
The running effect is as follows:

Principle implementation:
If a. list-group-item is used, some processing is required in the style, such as removing text underscores and increasing the floating effect:
/* The bootstrap.css file contains 4,847th rows ~ 4,858th rows */. list-group-item {color: #555;}. list-group-item. list-group-item-heading {color: #333;}. list-group-item: hover,. list-group-item: focus {color: #555; text-decoration: none; background-color: # f5f5f5 ;}
<H3> Linked list group 1 

List Group -- custom List Group
The Bootstrap box adds two styles to 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, as shown in the following example:
<Div class = "list-group"> <a href = "#" class = "list-group-item"> 

The running effect is as follows:

Principle implementation:
'These two styles mainly control the text color in different States:
/* The bootstrap.css file contains 4,850th rows ~ Row 4,852nd */a. list-group-item. list-group-item-heading {color: #333;}/* bootstrap file row 4,865th ~ 4,874th rows */. 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 4,883rd ~ 4,898th rows */. 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 4,987th ~ 4,994th rows */. list-group-item-heading {margin-top: 0; margin-bottom: 5px ;}. list-group-item-text {margin-bottom: 0; line-height: 1.3 ;}
<Div class = "list-group"> <a href = "#" class = "list-group-item"> 


List Group -- Status settings of list items
The Bootstrap framework also provides the status effect for the composite list items, especially the Link List Group. For example, common status and disabled status. The implementation method is similar to the previous component. In the List Group, you only need to add the class name in the corresponding list item:
Active: Indicates the current status
Disabled: Indicates the disabled status.
Here is an example:
<Div class = "list-group"> <a href = "#" class = "list-group-itemActive"> <Span class =" badge "> 5902 </span> illustration 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> MOOC </a> <a href =" # "class =" list-group-itemDisabled"> <Span class =" badge "> 0 </span> Sass China </a> </div>
The running effect is as follows:

Principle implementation:
In style, the background color and text of the list items are set as follows:
/* The bootstrap.css file contains 4,859th rows ~ 4,864th rows */. list-group-item.disabled,. list-group-item.disabled: hover,. list-group-item.disabled: focus {color: #777; background-color: # eee;}/* bootstrap.css file 4,875th rows ~ 4,882nd rows */. 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 ;}
<Div class = "list-group"> <a href = "#" class = "list-group-item active"> <span class = "badge"> 5902 </ span> graphic 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> MOOC </> <a href = "#" class = "list-group-item disabled"> <span class = "badge"> 0 </span> Sass China </a> </div>

List Group-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: success. The background color is green.
List-group-item-info: information, background color blue
List-group-item-warning: warning. The background color is yellow.
List-group-item-danger: error. The background color is red.
If you want to add a background color to a list item, you only need to add the corresponding class name based on "list-group-item:
<Div class = "list-group"> <a href = "#" class = "list-group-item active"> <span class = "badge"> 5902 </ span> graphic CSS3 </a> <a href = "#" class = "list-group-itemList-group-item-success"> <Span class =" badge "> 15902 </span> W3cplus </a> <a href =" # "class =" list-group-itemList-group-item-info"> <Span class =" badge "> 59020 </span> MOOC </a> <a href =" # "class =" list-group-itemList-group-item-warning"> <Span class =" badge "> 0 </span> Sass China </a> <a href =" # "class =" list-group-itemList-group-item-danger"> <Span class =" badge "> 10 </span> Mobile tutorial </a> </div>
The running effect is as follows:

Principle implementation:
Similarly, these class names only modify the background color and text color, and the corresponding source code is: boostrap.css file 4,899th lines ~ Row 3:
.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;}
Due to space limitations, check the source code for other status style codes.
<Div class = "list-group"> <a href = "#" class = "list-group-item active"> <span class = "badge"> 5902 </ span> graphic CSS3 </a> <a href = "#" class = "list-group-item-success"> <span class = "badge"> 15902 </span> W3cplus </a> <a href = "#" class = "list-group-item-info"> <span class = "badge"> 59020 </span> MOOC </a> <a href = "#" class = "list-group-item-warning"> <span class = "badge"> 0 </span> Sass China </a> <a href = "#" class = "list-group-item -danger "> <span class =" badge "> 10 </span> Mobile tutorial </a> </div>