免费AI编程助手
Bootstrap 列表
2018-03-03 16:12 更新
在本章节中，我们将学习如何使用Bootstrap为不同类型的列表添加样式。
我们可以定义三种不同类型的列表：
- 无序列表 - 其顺序无关紧要的项目列表。无序列表中的列表项目用着重号标记。
- 有序列表 - 其顺序重要的项目列表。有序列表中的列表项目用数字标记。
- 定义列表 - 具有相关描述的术语列表。
定义列表
带有其关联说明的术语列表。
<!DOCTYPE HTML>
<html>
<head>
<link href="//www.w3cschool.cn/style/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin:20px;">
<dl>
<dt>HTML</dt>
<dd>Web page mark up language.</dd>
</dl>
</body>
</html>水平定义列表
在<dl>中并排排列术语和说明。像默认的<dl> 那样开始堆叠，但是是在导航条扩展时。
<!DOCTYPE HTML>
<html>
<head>
<link href="//www.w3cschool.cn/statics/plugins/bootstrapold/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin:20px;">
<dl class="dl-horizontal">
<dt>HTML</dt>
<dd>Web page mark up language.</dd>
</dl>
</body>
</html>有序列表
顺序明确重要的项目列表。
<!DOCTYPE HTML>
<html>
<head>
<link href="//www.w3cschool.cn/statics/plugins/bootstrapold/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin:20px;">
<ol>
<li>Java</li>
<li>CSS</li>
<li>HTML</li>
<li>Bootstrap</li>
<li>HTML5</li>
<li>CSS3</li>
</ol>
</body>
</html>例子
.list-unstyled类仅从作为<ul>或<ol>元素的直接子项的列表项中删除默认列表样式和左侧填充。<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<h2>Unstyled Unordered List</h2>
<ul class="list-unstyled">
<li>CSS</li>
<li>Web
<ul>
<li>HTML5</li>
<li>CSS3</li>
</ul>
</li>
<li>SQL</li>
<li>Java</li>
</ul>
<hr>
<h2>Unstyled Ordered List</h2>
<ol class="list-unstyled">
<li>Javascript</li>
<li>Oracle
<ol>
<li>Pl/SQL</li>
<li>Server</li>
</ol>
</li>
<li>Client</li>
<li>Message</li>
</ol>
</div>
</body>
</html>无序列表
其中顺序没有明显影响的项目列表。
<!DOCTYPE HTML>
<html>
<head>
<link href="//www.w3cschool.cn/statics/plugins/bootstrapold/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin:20px;">
<ul>
<li>Java</li>
<li>CSS</li>
<li>HTML</li>
<li>Bootstrap</li>
<li>HTML5</li>
<li>CSS3</li>
</ul>
</body>
</html>Unstyled列表
删除列表项（仅限直系子级）上的默认列表样式和左边距。这只适用于直接子列表项，意味着你还需要为所有的嵌套列表添加类。
<!DOCTYPE HTML>
<html>
<head>
<link href="//www.w3cschool.cn/statics/plugins/bootstrapold/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin:20px;">
<ul class="list-unstyled">
<li>Java</li>
<li>CSS</li>
<li>HTML</li>
<li>Bootstrap</li>
<li>HTML5</li>
<li>CSS3</li>
</ul>
</body>
</html>内联列表
将所有列表项放在一行上，使用inline-block和一些轻量填充。
<!DOCTYPE HTML>
<html>
<head>
<link href="//www.w3cschool.cn/statics/plugins/bootstrapold/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin:20px;">
<ul class="list-inline">
<li>Java</li>
<li>CSS</li>
<li>HTML</li>
<li>Bootstrap</li>
<li>HTML5</li>
<li>CSS3</li>
</ul>
</body>
</html>以上内容是否对您有帮助：
更多建议：