Bootstrap历练实例:默认的列表组

本章我们将讲解列表组。列表组件用于以列表形式呈现复杂的和自定义的内容。创建一个基本的列表组的步骤如下:

  • 向元素 <ul> 添加 class .list-group
  • 向 <li> 添加 class .list-group-item

下面的实例演示了这点:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>Bootstrap历练实例:默认的列表组</title>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width,initial-scale=1.0" />

<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />

</head>

<body>

<div >

<ul class="list-group">

<li class="list-group-item">Html5</li>

<li class="list-group-item">Css3</li>

<li class="list-group-item">Bootstrap</li>

<li class="list-group-item">Javascript</li>

<li class="list-group-item">jQuery</li>

<li class="list-group-item">jQueryUI</li>

</ul>

</div>

<script src="jQuery/jquery-2.1.4.js"></script>

<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>

</body>

</html>