6.4.6 列表
HTML本来已经提供了以下3类列表。
| 列表 |
描述 |
| 无序列表 |
使用<ul>和<li>元素定义。其中,<ul>元素作为<li>的父元素定义无序列表,而<li>定义列表项。 |
| 有序列表 |
使用<ol>和<li>元素定义。其中,<ol>元素作为<li>的父元素定义无序列表,而<li>定义列表项。 |
| 定义列表 |
使用<dl>、<dt>和<li>元素定义。其中,<dl>元素作为<dt>和<li>的父元素定义列表,而<dt>定义列表项标题,<dd>定义列表项描述。 |
Bootstrap对上面这3类列表的默认样式进行了一些改进,使得它们具有更好的一致性。但这些元素的用法与传统的用法并没有太大的区别。
此外,Bootstrap还提供了如下几个样式,用于实现特定的列表项。
| 样式类 |
描述 |
.list-unstyled |
无样式列表。该样式的作用是去掉有序列表和无序列表前面的列表序号、列表符号。 |
.list-inline |
行内列表。该样式通过display:inline-block;设置,并通过设置少量padding值,从而将所有列表项放在同一行。 |
.dl-horizontal |
水平排列样式。该样式会将列表项标题和列表项描述排在同一行。该样式开始会将列表项标题和列表项描述堆叠在一起,随着导航条逐渐展开它们会排在一行。 |
程序示例
有序列表
下面代码示范了有序列表的效果。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
| <!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> 有序列表 </title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
</head>
<body>
<div class="container">
<strong>下面是普通有序列表</strong>
<br/>
<ol>
<li>疯狂Java讲义</li>
<li>轻量级Java EE企业应用实战</li>
<li>疯狂Android讲义</li>
</ol>
<strong>下面是无样式列表</strong>
<br/>
<ol class="list-unstyled">
<li>疯狂Java讲义</li>
<li>轻量级Java EE企业应用实战</li>
<li>疯狂Android讲义</li>
</ol>
<strong>下面是行内列表</strong>
<br/>
<ol class="list-inline">
<li>疯狂Java讲义</li>
<li>轻量级Java EE企业应用实战</li>
<li>疯狂Android讲义</li>
</ol>
</div>
<script type="text/javascript" src="../jquery-3.1.1.js"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
|
无序列表
下面代码示范了无序列表的效果。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
| <!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> 无序列表 </title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
</head>
<body>
<div class="container">
<strong>下面是普通无序列表</strong>
<br/>
<ul>
<li>疯狂Java讲义</li>
<li>轻量级Java EE企业应用实战</li>
<li>疯狂Android讲义</li>
</ul>
<strong>下面是无样式列表</strong>
<br/>
<ul class="list-unstyled">
<li>疯狂Java讲义</li>
<li>轻量级Java EE企业应用实战</li>
<li>疯狂Android讲义</li>
</ul>
<strong>下面是行内列表</strong>
<br/>
<ul class="list-inline">
<li>疯狂Java讲义</li>
<li>轻量级Java EE企业应用实战</li>
<li>疯狂Android讲义</li>
</ul>
</div>
<script type="text/javascript" src="../jquery-3.1.1.js"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
|
定义列表
下面是定义列表的示例。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
| <!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> 定义列表 </title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
</head>
<body>
<div class="container">
<strong>普通的dl列表</strong>
<dl>
<dt>Java
<dt>
<dd>Java是一门广泛使用的、跨平台的开发语言</dd>
<dt>疯狂Java体系图书</dt>
<dd>疯狂Java体系图书是李刚老师积十年之功创作的一套系统的Java学习图书，
<br> 且多次升级保持与最新技术同步，对广大初学者帮助很大。
</dd>
<dd>疯狂Java体系图书均已得到广泛的市场认同，多次重印成为超级畅销图书，
<br> 并被多所“985”、“211”高校选作教材，
<br> 部分图书已被翻译成繁体中文版、授权到台湾地区。
</dd>
</dl>
<strong>列表项标题和描述水平排列</strong>
<dl class="dl-horizontal">
<dt>Java
<dt>
<dd>Java是一门广泛使用的、跨平台的开发语言</dd>
<dt>疯狂Java体系图书</dt>
<dd>疯狂Java体系图书是李刚老师积十年之功创作的一套系统的Java学习图书，
<br> 且多次升级保持与最新技术同步，对广大初学者帮助很大。
</dd>
<dd>疯狂Java体系图书均已得到广泛的市场认同，多次重印成为超级畅销图书，
<br> 并被多所“985”、“211”高校选作教材，
<br> 部分图书已被翻译成繁体中文版、授权到台湾地区。
</dd>
</dl>
</div>
<script type="text/javascript" src="../jquery-3.1.1.js"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
|