Bootstrap List Group and bootstrap list

Bootstrap List Group and bootstrap list
Previous

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. This topic describes the Bootstrap List Group in detail.

 

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.

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

<ul class="list-group">    <li class="list-group-item">HTML</li>    <li class="list-group-item">CSS</li>    <li class="list-group-item">javascript</li>    <li class="list-group-item">bootstrap</li>    <li class="list-group-item">jquery</li></ul>

 

Badge

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" to "list-group-item"

The principle is very simple, it is to set a right floating for the badge, of course, if there are two badges appear in a list item at the same time, also set the distance between them

.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">33</span>HTML    </li>    <li class="list-group-item">        <span class="badge">60</span>CSS    </li>    <li class="list-group-item">        <span class="badge">192</span>javascript    </li>    <li class="list-group-item">        <span class="badge">20</span>bootstrap    </li>    <li class="list-group-item">        <span class="badge">26</span>jquery    </li></ul>

 

Link

Use<a>Label substitution<li>Tags can form a list group with all links (note that<ul>Replace tags<div>Label ). There is no need to add a parent element to each element in the List Group.

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

<div class="list-group">  <a href="#" class="list-group-item ">HTML</a>  <a href="#" class="list-group-item">CSS</a>  <a href="#" class="list-group-item">javascript</a>  <a href="#" class="list-group-item active">bootstrap</a>  <a href="#" class="list-group-item">jquery</a></div>

 

Button

The element in the List Group can also be a button (it also means that the parent element must be<div>But cannot use<ul>And does not need to enclose a parent element for each button. Do not use standard.btnClass

<div class="list-group">  <button type="button" class="list-group-item ">HTML</button>  <button type="button" class="list-group-item">CSS</button>  <button type="button" class="list-group-item">javascript</button>  <button type="button" class="list-group-item">bootstrap</button>  <button type="button" class="list-group-item">jquery</button></div>

 

Customized content

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 in the list items.

<Div class = "list-group"> <a href = "#" class = "list-group-item"> 


 
Status settings
The Bootstrap framework 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.
.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;}
<div class="list-group">  <a href="#" class="list-group-item ">HTML</a>  <a href="#" class="list-group-item">CSS</a>  <a href="#" class="list-group-item">javascript</a>  <a href="#" class="list-group-item active">bootstrap</a>  <a href="#" class="list-group-item disabled">jquery</a></div>

 
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. 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"> default </a> <a href = "## "class =" list-group-item-success "> Successful </a> <a href =" # "class =" list-group-item list -group-item-info "> Information </a> <a href =" # "class =" list-group-item-warning "> warning </a> <a href = "#" class = "list-group-item-danger"> error </a> </div>