Bootstrap全局样式 - 列表
2017-06-09 本文已影响268人
蝴蝶结199007
知识点
无序列表
<ul>
<li>...</li>
</ul>
有序列表
<ol>
<li>...</li>
</ol>
无样式列表
移除默认的list-style和左侧外边距，只针对直接子元素。
<ul class="list-unstyled">
<li>...</li>
</ul>
内联列表
添加padding，将所有元素放在同一行。
<ul class="list-inline">
<li>...</li>
</ul>
dl
类.dl-horizontal使得dl水平排列；在较窄的视口（viewport）内，列表将变为默认堆叠排列的布局方式。
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>
实践
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="Resource-type" content="Document"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>列表</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<style>
<!--
.line{border-top:1px solid #afd9ee;margin:20px 0;}
-->
</style>
</head>
<body>
<!--列表-->
<div class="container">
<!--无序列表-->
<ul>
<li>无序列表1</li>
<li>
无序列表2
<ul>
<li>无序列表二级</li>
<li>无序列表二级</li>
</ul>
</li>
<li>无序列表3</li>
</ul>
<div class="line"></div>
<!--有序列表-->
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>
<div class="line"></div>
<!--无样式列表，只针对直接子元素-->
<ul class="list-unstyled">
<li>无样式列表1</li>
<li>
无样式列表2
<ul>
<li>无样式列表二级</li>
<li>无样式列表二级</li>
</ul>
</li>
<li>无样式列表3</li>
</ul>
<div class="line"></div>
<!--内联列表-->
<ul class="list-inline">
<li>内联列表1</li>
<li>内联列表2</li>
<li>内联列表3</li>
</ul>
<div class="line"></div>
<!--dl列表-->
<dl class="dl-horizontal">
<dt>标题Description lists</dt>
<dd>文本A description list is perfect for defining terms.</dd>
<dt>标题Euismod</dt>
<dd>文本Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.Donec id elit non mi porta gravida at eget metus.</dd>
</dl>
</div>
</body>
</html>
