Bootstrap, from Twitter, is the most popular front-end framework at present. Bootstrap is based on HTML, CSS, and JAVASCRIPT. It is simple and flexible, making web development faster.
List groups are flexible and powerful components that can not only be used to display a simple set of elements, but also to complex customized content. List group can be used to create list lists, vertical navigation and other effects, or to create more beautiful components with other components. List group is also an independent component in the bootstrap framework, so it also has its own independent source code:
LESS: list-group.less
SASS:_list-group.scss
The list group looks like the list items of the list symbols are removed and they are equipped with some specific styles. The basic list group in the bootstrap framework mainly includes two parts:
list-group: List group container, commonly used is the ul element, or it can be an ol or div element
list-group-item: List item, commonly used is the li element, or it can be a div element
There is no too much style setting for the basic list group, and the spacing, borders, and rounded corners are mainly set;
.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 take a look at an example:
<h1>Basic List Group</h1><ul><li>Braised Potato Rice</li><li>Spicy Fried Chicken Noodles</li><li>Corilla Chop Egg Tofu</li><li>Fried Horseshoe in Dutch Beans</li><li>Hawthorn Ribs</li><li>Fried River Shrimp with Chives</li></ul>
List group with badges
A list group with badges is actually an effect of combining the badge component and the basic list component in the bootstrap framework. The specific method is very simple. Just add the badge component "badge" to the .list-group-item.
Implementation principle:
Set a right float for the badge, of course, if 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:
<h1>List group with badge</h1><ul><li><span>13</span>Baised rice with bacon and potatoes</li><li><span>20</span>Spicy flavor fried chicken nuggets</li><li><span>12</span>Corilla peeled egg tofu</li><li><span>5</span>Fried horseshoe in Dutch beans</li><li><span>8</span>Hawthorn ribs</li><li><span>15</span>Fried river shrimp in leeks</li></ul>
List group with links
A list group with connections actually means that each list item has a link effect. What people generally think of is to add links to the text of the list item based on the basic list group, such as:
<ul><li><a href="#">Bao pork braised rice</a></li><li><a href="#">Spicy fried chicken nuggets</a></li><li><a href="#">Corilla peeled egg tofu</a></li><li><a href="#">Fried horseshoe in Dutch beans</a></li><li><a href="#">Hawthorn ribs</a></li><li><a href="#">Fried river shrimp in leeks</a></li></ul>
The effects are as follows:
There is a disadvantage to this, that is, the click area of the link is only valid in text; but often I hope that any area of the list item can be clickable, so I need to add an additional style to the link label: display: block; but in the bootstrap framework, another implementation method is still adopted, which is to replace ul.list-group with div.list-group, and li.list-group-item with a.list-group-item, so that the desired effect can be achieved.
Implementation principle:
If you use a.list-group-item, the style needs to be processed, such as: remove text underlines, increase 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 of link list groups:
<h1>List group with links</h1><ul><a href="#">Baised bacon and potato rice</a><a href="#">Spicy fried chicken nuggets</a><a href="#">Corilla peeled egg tofu</a><a href="#">Fried horseshoe with Dutch beans</a><a href="#">Hawthorn ribs</a><a href="#">Fried river shrimp with leeks</a></ul>
The effects are as follows:
Custom list group
The bootstrap framework adds two styles to the link list group:
.list-group-item-heading: used to define the style of the list item header
.list-group-item-text: Used to define the main content of the list item
The biggest function of these two styles is to help developers customize the content in the list item
Implementation principle:
These two styles mainly control the text color in the incompatible state. 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: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
<h1>Custom list group</h1><ul><a><h4>List 1 title</h4><p>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 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 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 3 content list 3 content list 3 content list 3 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 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 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 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 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 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 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 5 Content list 5 Content list 5 Content list 5 Content list 5 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 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 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 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 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 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 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 6 Content list 6 Content list
Status settings for list items
The bootstrap framework also provides state effects for combining list items, especially linking list groups. The implementation method is similar to the components introduced above. In the list group, you only need to add class names to the corresponding list items: .active (representing the current state), .disabled (representing the disabled state)
Implementation principle:
In terms of style, the background color and text of the list item 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:
<h1>List group status settings</h1><ul><a><h4>List 1 title</h4><p>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 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 2 content list 2 content list 2 content list 2 content list 2 content list 2 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 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 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 3 content list 3 content list 3 content list 3 content list 3 content list 3 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 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 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 4 content list 4 content list 4 content list 4 content list 4 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 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 5 Content list 5 Content list 5 Content list 5 Content list 5 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 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 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 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 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 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 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 6 Content list 6 Content
The effect is as follows (the third list item is disabled. There is a disable icon on it when the mouse is moved. Here is a direct screenshot, and this effect cannot be seen):
Colorful list group
The list group component is the same as the warning component. Bootstrap 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 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, and 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 state style codes, please check the source code file. If you want to add background color to the list item, just add the corresponding class name to the class.lis-group-item.
Use of colorful list groups:
<h1>Colorful List Group</h1><ul><a href="#">List Item1<span>10</span></a><a href="#">List Item1<span>10</span></a><a href="#">List Item1<span>10</span></a><a href="#">List Item1<span>10</span></a><a href="#">List Item1<span>10</span></a></ul>
The effects are as follows: