-
只有屏幕大于768px的时候，添加类名“.dl-horizontal”才具有水平定义列表效果
<dl class="dl-horizontal"> <dt>W3cplus</dt> <dd>一个致力于推广国内前端行业的技术博客。它以探索为己任，不断活跃在行业技术最前沿，努力提供高质量前端技术博文</dd> <dt>慕课网</dt> <dd>一个专业的，真心实意在做培训的网站</dd> <dt>我来测试一个标题，我来测试一个标题</dt> <dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果</dd> </dl>
查看全部 -
<dl> <dt>W3cplus</dt> <dd>一个致力于推广国内前端行业的技术博客</dd> <dt>慕课网</dt> <dd>一个真心在做教育的网站</dd> </dl>
定义列表
查看全部 -
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
放置在文档的末尾，以便页面加载更快
查看全部 -
<ul class="list-unstyled">
<li>
城市:
</li>
<li>
<ul class="list-inline">
<li>北京</li>
<li>上海</li>
<li>南京</li>
<li>厦门</li>
</ul>
</li>
</ul>
查看全部 -
请输入笔记内容... 1、使用<code></code>来显示单行内联代码
2、使用<pre></pre>来显示多行块代码
3、使用<kbd></kbd>来显示用户输入代码查看全部 -
水平定义列表就像内联列表一样，Bootstrap可以给<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果。
查看全部 -
<dl> <dt>title</dt> <dd>描述1</dd> <dd>描述2</dd> </dl>
查看全部 -
<ul class="list-inline"> <li>1</li> <li>2</li> <li>3</li> </ul>
查看全部 -
.list-unstyled { padding-left: 0; list-style: none; }查看全部 -
<ul> <li>无序列表</li> </ul> <ol> <li>有序列表</li> </ol> <dl> <dt>定义列表</dt> <dd>2020.4.30</dd> </dl>
查看全部 -
.text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（#a94442）
查看全部 -
<em>斜体</em> <i>斜体</i>
查看全部 -
<strong></strong>
<b></b>
查看全部 -
的点点滴滴
查看全部 -
水平定义列表就像内联列表一样，Bootstrap可以给<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果。
/*源码请查看bootstrap.css文件第608行~第621行*/@media (min-width: 768px) { .dl-horizontal dt { float: left; width: 160px; overflow: hidden; clear: left; text-align: right; text-overflow: ellipsis; white-space: nowrap; } .dl-horizontal dd { margin-left: 180px; } }
此处添加了一个媒体查询。也就是说，只有屏幕大于768px的时候，添加类名“.dl-horizontal”才具有水平定义列表效果。其实现主要方式：
1、将dt设置了一个左浮动，并且设置了一个宽度为160px
2、将dd设置一个margin-left的值为180px，达到水平的效果
3、当标题宽度超过160px时，将会显示三个省略号查看全部
举报