bootstrap列表组 bootstrap列表组|Bootstrap教程

本文概述

Boostrap程序列表组示例

Boostrap程序列表组用于创建包含列表项的列表组。最基本的列表组是包含列表项的无序列表。
< ul> 元素中的类“ .list-group”和< li> 元素中的类“ .list-group-item”用于创建基本列表组。
Boostrap程序列表组示例

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">< /head> < body>< div class="container"> < h2>Basic List Group Example< /h2> < ul class="list-group"> < li class="list-group-item">First item< /li> < li class="list-group-item">Second item< /li> < li class="list-group-item">Third item< /li> < /ul> < /div> < script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/1559131C1-1.jpg">< /script> < /body> < /html>

带徽章的Boostrap列表组
徽章也可以添加到列表组。它们将自动定位在右侧。
你必须在列表项内创建一个类别为“ .badge”的< span> 元素，以创建徽章。

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">< /head> < body>< div class="container"> < h2>List Group With Badges< /h2> < ul class="list-group"> < li class="list-group-item">< span class="badge">12< /span> New< /li> < li class="list-group-item">< span class="badge">5< /span> Deleted< /li> < li class="list-group-item">< span class="badge">3< /span> Warnings< /li> < /ul> < /div> < script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/1559131C1-1.jpg">< /script> < /body> < /html>

具有超链接的Boostrap程序列表组
【bootstrap列表组】你还可以将项目链接到列表组。这会在悬停时提供灰色背景色。你必须使用< div> 代替< ul> 和< a> 代替< li> 元素来创建具有链接项的列表组。

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">< /head> < body>< div class="container"> < h2>List Group With Linked Items< /h2> < div class="list-group"> < a href="http://www.srcmini.com/#" class="list-group-item">First item< /a> < a href="http://www.srcmini.com/#" class="list-group-item">Second item< /a> < a href="http://www.srcmini.com/#" class="list-group-item">Third item< /a> < /div> < /div> < script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/1559131C1-1.jpg">< /script> < /body> < /html>

Boostrap程序列表组：显示活动项目
类“ .active”用于突出显示当前项目。它指定特定项目处于活动状态。

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">< /head> < body>< div class="container"> < h2>Active Item in a List Group< /h2> < div class="list-group"> < a href="http://www.srcmini.com/#" class="list-group-item active">First item (This is active item)< /a> < a href="http://www.srcmini.com/#" class="list-group-item">Second item< /a> < a href="http://www.srcmini.com/#" class="list-group-item">Third item< /a> < /div> < /div> < script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/1559131C1-1.jpg">< /script> < /body> < /html>

Boostrap程序列表组：显示禁用项
类“ .disabled”用于禁用列表组中的特定项目。

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">< /head> < body>< div class="container"> < h2>List Group With a Disabled Item< /h2> < div class="list-group"> < a href="http://www.srcmini.com/#" class="list-group-item disabled">First item< /a> < a href="http://www.srcmini.com/#" class="list-group-item">Second item< /a> < a href="http://www.srcmini.com/#" class="list-group-item">Third item< /a> < /div> < /div> < script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/1559131C1-1.jpg">< /script> < /body> < /html>

Boostrap程序列表组：上下文类
你可以使用上下文类将颜色添加到列表项。
以下类用于为列表项着色：

.list-group-item-成功
.list-group-item-info
.list-group-item-warning
.list-group-item-danger

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">< /head> < body>< div class="container"> < h2>List Group With Contextual Classes< /h2> < ul class="list-group"> < li class="list-group-item list-group-item-success">First item< /li> < li class="list-group-item list-group-item-info">Second item< /li> < li class="list-group-item list-group-item-warning">Third item< /li> < li class="list-group-item list-group-item-danger">Fourth item< /li> < /ul>< h2>Linked Items With Contextual Classes< /h2> < a href="http://www.srcmini.com/#" class="list-group-item list-group-item-success">First item< /a> < a href="http://www.srcmini.com/#" class="list-group-item list-group-item-info">Second item< /a> < a href="http://www.srcmini.com/#" class="list-group-item list-group-item-warning">Third item< /a> < a href="http://www.srcmini.com/#" class="list-group-item list-group-item-danger">Fourth item< /a> < /div> < /div> < script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/1559131C1-1.jpg">< /script> < /body> < /html>

使用上下文类别链接项目
在Bootstrap 4中，你还可以将项目与上下文类链接。
例：

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> < script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">< /script> < script src="http://img.readke.com/220416/15591344T-13.jpg">< /script> < script src="http://img.readke.com/220416/1559134960-14.jpg">< /script> < /head> < body>< div class="container"> < h2>Linked Items With Contextual Classes< /h2> < p>Move the mouse over the linked items to see the hover effect:< /p> < div class="list-group"> < a href="http://www.srcmini.com/#" class="list-group-item list-group-item-action">Action item< /a> < a href="http://www.srcmini.com/#" class="list-group-item list-group-item-success">Success item< /a> < a href="http://www.srcmini.com/#" class="list-group-item list-group-item-secondary">Secondary item< /a> < a href="http://www.srcmini.com/#" class="list-group-item list-group-item-info">Info item< /a> < a href="http://www.srcmini.com/#" class="list-group-item list-group-item-warning">Warning item< /a> < a href="http://www.srcmini.com/#" class="list-group-item list-group-item-danger">Danger item< /a> < a href="http://www.srcmini.com/#" class="list-group-item list-group-item-primary">Primary item< /a> < a href="http://www.srcmini.com/#" class="list-group-item list-group-item-dark">Dark item< /a> < a href="http://www.srcmini.com/#" class="list-group-item list-group-item-light">Light item< /a> < /div> < /div>< /body> < /html>