水平定义列表就像内联列表一样，Bootstrap可以给<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果。

@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时，将会显示三个省略号

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>水平定义列表</title>

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

</head>

<body>

<dl class="dl-horizontal">

    <dt>W3cplus</dt>

    <dd>一个致力于推广国内前端行业的技术博客。它以探索为己任，不断活跃在行业技术最前沿，努力提供高质量前端技术博文</dd>

    <dt>我来测试一个标题，我来测试一个标题</dt>

    <dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果</dd>

</dl>

<!--下面是代码任务部分-->

<dl class="dl-horizontal">

    <dt>标题一：</dt>

    <dd>描述内容</dd>

    <dt>标题二：</dt>

    <dd>描述内容</dd>

</dl>

</body>

</html>

bootstrap 列表--水平定义列表的更多相关文章

  1. bootstrap实现去点列表、内联列表、水平定义列表

    内联列表:通过添加类名“.list-inline”来实现内联列表,简单点说就是把垂直列表换成水平列表,而且去掉项目符号(编号),保持水平显示. 去点列表:通过给无序列表添加一个类名“.list-uns ...

  2. bootstrap -- css -- 文字、列表

    文字 <small></small>:呈现小号字体效果. <big></big>:程序大号字体效果 <abbr></abbr>: ...

  3. 前端 HTML body标签相关内容 常用标签 定义列表<dl>

    定义列表<dl> 定义列表的作用非常大. <dl>英文单词:definition list,没有属性.dl的子元素只能是dt和dd. <dt>:definition ...

  4. 前端学习 -- Css -- 有序列表和无序列表

    列表就相当于去超市购物时的那个购物清单, 在HTML也可以创建列表,在网页中一共有三种列表: 1.无序列表 2.有序列表 3.定义列表 无序列表 - 使用ul标签来创建一个无序列表 - 使用li在ul ...

  5. 基于bootstrap的jQuery多级列表树插件 treeview

    http://www.cnblogs.com/mfc-itblog/p/5233453.html http://www.htmleaf.com/jQuery/Menu-Navigation/20150 ...

  6. 基于bootstrap的jQuery多级列表树插件

    简要教程 bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件.该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一 ...

  7. SharePoint 2013 图文开发系列之代码定义列表

    在SharePoint的开发中,用Visual Studio自定义列表是经常会用到的,因为很多时候,我们并不会手动创建列表,而手动创建列表在测试服务器和正式机之间同步字段,也很麻烦,所以我们经常用代码 ...

  8. activiti自定义流程之Spring整合activiti-modeler5.16实例（五）：流程定义列表

    注:(1)环境搭建:activiti自定义流程之Spring整合activiti-modeler5.16实例(一):环境搭建        (2)创建流程模型:activiti自定义流程之Spring ...

  9. CURL 宏定义列表

    摘自http://blog.csdn.net/msda/article/details/38047809/ CURL 宏定义列表 列表CURL库一共有17个函数 curl_close:关闭CURL会话 ...

随机推荐

  1. C和C++的区别和联系

    关于C和C++的区别是面试中经常会被问到的问题,本着即将面试的心态,进行知识整理,并对小知识点进行扩展: C/C++的联系: C++是C的超集,兼容大部分C的语法的结构: 联系嘛我只能想到这个,毕竟c ...

  2. C#星夜拾遗之delegate示例

    概念 delegate即委托.如果你使用过C++或者js中的回调函数,你会更容易明白一些.在异步操作中常常使用回调函数,例如在Ajax中,当HttpRequest执行异步请求时,就需要有一个状态改变时 ...

  3. （二）Git时间--版本控制工具进阶

    1. 忽略文件 Git 会检查代码仓库的目录下是否存在一个名为 .gitignore的文件,如果存在的话,就去一行行读取这个文件中的内容,并把每一行指定的文件或目录 排除 在版本 控制之外. 注意,. ...

  4. Bellman-Ford算法：POJ No.3169 Layout 差分约束

    #define _CRT_SECURE_NO_WARNINGS /* 4 2 1 1 3 10 2 4 20 2 3 3 */ #include <iostream> #include & ...

  5. Linux_安装

    总结:    分区-->格式化-->起一个设备文件名(逻辑分区一定从5开始)-->指定挂载点(必须是空的目录名称作为盘幅)

  6. python 小爬虫爬取博客文章初体验

    最近学习 python 走火入魔,趁着热情继续初级体验一下下爬虫,以前用 java也写过,这里还是最初级的爬取html,都没有用html解析器,正则等...而且一直在循环效率肯定### 很低下 imp ...

  7. 关闭MySQL数据库的几种方法

    #1.使用mysqldadmin mysqladmin -uroot -p shutdown mysqladmin -u ${mysql_user} -p${mysql_pwd} -S /data/$ ...

  8. JAVA NIO 中的 zerocopy 技术提高IO性能

    关于一篇更详细更好的介绍 ZeroCopy技术的文章,可参考:JAVA IO 以及 NIO 理解 这篇文章介绍了 zerocopy技术来提高Linux平台上的IO密集型的JAVA应用程序的性能. ze ...

  9. JAVA迭代器学习--在JAVA中实现线性表的迭代器

    1,迭代器是能够对数据结构如集合(ADT的实现)进行遍历的对象.在遍历过程中,可以查看.修改.添加以及删除元素,这是它与一般的采用循环来遍历集合中的元素不同的地方.因为,通常用循环进行的遍历操作一般是 ...

  10. luogu P3674 小清新人渣的本愿

    传送门 毒瘤lxl 本质是莫队,关键是怎么处理询问 这里需要开两个bitset(记为\(b1,b2\)),分别存\(x\)和\(n-x\)是否出现 对于询问1,即\(x-y=z\),由于\(y=x-z ...