0%

6.4.6 列表

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>

原文链接: 6.4.6 列表