- 列表: 有序列表、无序列表、定义列表。
- .list-unstyled: 用来将 列表前面的项目符号去除掉同时去除了列表的默认的 padding值
- .list-inline: 将列表中的内容排列成同一行并且增加了少量的padding值
- .dl-horizontal: 给定义列表来使用将定义标题与定义描述信息排列在同一行将dt标记与dd标记里面的内容排列在同一行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 支持移动设备优先 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 导入CSS文件 --> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <!-- 引入js --> <!-- bootstrap.js 引入必须依赖 jQuery, jQuery需要自行去下载导入进来 --> <script src="bootstrap/js/jquery-3.4.1.js"></script> <!-- 不引入 jQuery 则会报错 Uncaught Error: Bootstrap's JavaScript requires jQuery --> <script src="bootstrap/js/bootstrap.js"></script> </head> <body> <div class="container" style="border: 1px solid #000;"> <h2>ul 默认:</h2> <ul> <li>西游记</li> <li>三国演义</li> <li>水浒传</li> <li>红楼梦</li> </ul> <h2>ul list-unstyled:</h2> <ul class="list-unstyled"> <li>西游记</li> <li>三国演义</li> <li>水浒传</li> <li>红楼梦</li> </ul> <h2>ul list-inline:</h2> <ul class="list-inline"> <li>西游记</li> <li>三国演义</li> <li>水浒传</li> <li>红楼梦</li> </ul> <h2>dl 默认:</h2> <dl> <dt>计算机</dt> <dd>用来计算的仪器 ... ...</dd> <dt>显示器</dt> <dd>以视觉方式显示信息的装置 ... ...</dd> </dl> <h2>dl dl-horizontal:</h2> <dl class="dl-horizontal"> <dt>计算机</dt> <dd>用来计算的仪器 ... ...</dd> <dt>显示器</dt> <dd>以视觉方式显示信息的装置 ... ...</dd> </dl> </div> </body> </html>
demo 效果：.
