Bootstrap 列表组
2018-03-03 16:32 更新
列表组是创建列表的有用组件。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body style="margin:30px">
<ul class="list-group">
<li class="list-group-item">Inbox</li>
<li class="list-group-item">Sent</li>
<li class="list-group-item">Drafts</li>
<li class="list-group-item">Deleted</li>
<li class="list-group-item">Spam</li>
</ul>
</body>
</html>例子
以下代码将徽章添加到列表组。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body style="margin:30px">
<div class="row">
<div class="col-xs-3">
<ul class="list-group">
<li class="list-group-item">Inbox <span class="badge">14</span></li>
<li class="list-group-item">Sent <span class="badge">4</span></li>
<li class="list-group-item">Drafts <span class="badge">7</span></li>
<li class="list-group-item">Deleted <span class="badge">24</span></li>
<li class="list-group-item">Spam <span class="badge">134</span></li>
</ul>
</div>
</div>
</body>
</html>链接列表
当要显示链接列表时，应使用锚元素 a 而不是列表元素 li ，请使用父 div 而不是 ul 。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body style="margin:30px">
<div class="row">
<div class="col-xs-4">
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">Item heading</h4>
<p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Item heading</h4>
<p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Item heading</h4>
<p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Item heading</h4>
<p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</a>
</div>
</div>
</div>
</body>
</html>以上内容是否对您有帮助：
更多建议：