简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > Bootstrap Tutorial > body text

How to use the list group component of Bootstrap learning

青灯夜游
Release： 2021-02-20 17:50:21
forward
1888 people have browsed it

This article will show you how to use the list group component in Bootstrap. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

How to use the list group component of Bootstrap learning

Related recommendations: "bootstrap Tutorial"

The list group can be used to create lists, vertical navigation and other effects, and can also Cooperate with other components to create more beautiful components. The 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 a list item with the list symbol removed, and with some specific Style, 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 the ol or p element

  • list-group-item: list item, commonly used is the li element, or the p element

does not do anything for the basic list group Too many style settings, mainly setting the spacing, borders and rounded corners; 

.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;
}
Copy after login

Let’s take a look at an example: 

基础列表组

    
    
        
  • 腊肉土豆焖饭
    • 
        
  • 香辣风味炸鸡块
    • 
        
  • 香菜皮蛋豆腐
    • 
        
  • 荷兰豆炒马蹄
    • 
        
  • 山楂排骨
    • 
        
  • 韭菜炒河虾
    •
Copy after login

How to use the list group component of Bootstrap learning

With List group of badges

The list group with badges is actually an effect that combines the badge component and the basic list component in the bootstrap framework. The specific method is very simple, just add .list-group -Add the badge component "badge" on the basis of -item

Implementation principle:

Set a right float for the badge, of course, if two badges are in the same list item at the same time When appearing in, the distance between them is also set 

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

Example: 

带徽章的列表组

    
    
        
  • 
            13
            腊肉土豆焖饭
        
    • 
        
  • 
            20
            香辣风味炸鸡块
        
    • 
        
  • 
            12
            香菜皮蛋豆腐
        
    • 
        
  • 
            5
            荷兰豆炒马蹄
        
    • 
        
  • 
            8
            山楂排骨
        
    • 
        
  • 
            15
            韭菜炒河虾
        
    •
Copy after login

How to use the list group component of Bootstrap learning

List group with links

A connected list group 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 items based on the basic list group, such as:

Copy after login

The effect is as follows:

How to use the list group component of Bootstrap learning

There is a shortcoming in this, that is, the click area of ​​the link is only valid on the text; but many times you want to click on any area of ​​the list item. To be clickable, this requires adding an additional style to the link tag: display: block; but in the bootstrap framework, another implementation method is used, which is to use p.list-group for ul.list-group. Replace, li.list-group-item with a.list-group-item, so as to achieve the desired effect.

Implementation principle:

If you use a.list-group-item, the style needs to be processed to a certain extent, such as: removing the underline of the text, adding a floating 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;
}
Copy after login

Application of linked list group: 

带链接的列表组
Copy after login

The effect is as follows:

How to use the list group component of Bootstrap learning

Customized list Group

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

.list-group-item-heading: used to define the list item header style

.list-group-item-text: Used to define the main content of the list item

The biggest role of these two styles is to help developers customize the content of 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: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;
}
Copy after login

Use of custom list group 

自定义列表组
Copy after login

How to use the list group component of Bootstrap learning

列表项的状态设置

bootstrap框架中也给组合列表项提供了状态效果，特别是链接列表组，实现方法和前面介绍的组件类似，在列表组中只需在对应的列表项中添加类名：.active(表示当前状态)、.disabled（表示禁用状态）

实现原理：

在样式上主要对列表项的背景色和文本做了样式设置，下面是css源码：

.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;
}
Copy after login

例子：

列表组状态设置
Copy after login

效果如下（第三个列表项是禁用状态，鼠标移放在它上面有个禁用图标，这里是直接截的图，看不到这个效果）：

How to use the list group component of Bootstrap learning

多彩列表组

列表组组件和警告组件一样，bootstrap为不同的状态提供了不同的背景色和文本色，可以使用这几个类名定义不同背景色的列表项：

.list-group-item-success:成功 绿色（背景色）

.list-group-item-info:信息 蓝色（背景色）

.list-group-item-warning:警告 黄色（背景色）

.list-group-item-danger:错误 红色（背景色）

实现原理：

这几个类名仅修改了背景色和文本色，对应的源码如下：

.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;
}
Copy after login

其它状态样式代码请查看源码文件,如果想给列表项添加背景色，只需在类.lis-group-item的基础上追加对应的类名即可。

多彩列表组的运用：

多彩列表组
Copy after login

效果如下：

How to use the list group component of Bootstrap learning

更多编程相关知识，请访问：编程教学！！

The above is the detailed content of How to use the list group component of Bootstrap learning. For more information, please follow other related articles on the PHP Chinese website!

Related labels：
bootstrap components
source：cnblogs.com
Previous article：An in-depth analysis of panel components in Bootstrap Next article：A closer look at media objects in Bootstrap
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Steps to install jQuery in Nuxt.js Although I try to add jQuery in my project, I get an error saying it's not defined. plugin...
From 2023-11-06 16:41:50
0
1
225
Laravel 9 still can't find App.css and App.js, even after running npm run dev Being fairly new to Laravel, I made sure I did check out the documentation for Laravel9 be...
From 2023-10-26 23:41:22
0
1
489
Customize Bootstrap 4's grid system breakpoints I have an application where the design requires 1280 breakpoints from desktop to tablet or...
From 2023-10-18 23:01:50
0
2
197
How to make header images, text and buttons responsive I'm making a website using Bootstrap5. In the header of the website I am using carousel fr...
From 2023-09-17 09:51:15
0
1
283
Why doesn't my Bootstrap navigation bar render correctly? I'm trying to make a navigation bar using Bootstrap4 but my code doesn't seem to work. My ...
From 2023-09-16 16:14:06
0
1
522
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！