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 列表