bootstrap 列表--水平定义列表
水平定义列表就像内联列表一样,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 列表--水平定义列表的更多相关文章
- bootstrap实现去点列表、内联列表、水平定义列表
内联列表:通过添加类名“.list-inline”来实现内联列表,简单点说就是把垂直列表换成水平列表,而且去掉项目符号(编号),保持水平显示. 去点列表:通过给无序列表添加一个类名“.list-uns ...
- bootstrap -- css -- 文字、列表
文字 <small></small>:呈现小号字体效果. <big></big>:程序大号字体效果 <abbr></abbr>: ...
- 前端 HTML body标签相关内容 常用标签 定义列表<dl>
定义列表<dl> 定义列表的作用非常大. <dl>英文单词:definition list,没有属性.dl的子元素只能是dt和dd. <dt>:definition ...
- 前端学习 -- Css -- 有序列表和无序列表
列表就相当于去超市购物时的那个购物清单, 在HTML也可以创建列表,在网页中一共有三种列表: 1.无序列表 2.有序列表 3.定义列表 无序列表 - 使用ul标签来创建一个无序列表 - 使用li在ul ...
- 基于bootstrap的jQuery多级列表树插件 treeview
http://www.cnblogs.com/mfc-itblog/p/5233453.html http://www.htmleaf.com/jQuery/Menu-Navigation/20150 ...
- 基于bootstrap的jQuery多级列表树插件
简要教程 bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件.该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一 ...
- SharePoint 2013 图文开发系列之代码定义列表
在SharePoint的开发中,用Visual Studio自定义列表是经常会用到的,因为很多时候,我们并不会手动创建列表,而手动创建列表在测试服务器和正式机之间同步字段,也很麻烦,所以我们经常用代码 ...
- activiti自定义流程之Spring整合activiti-modeler5.16实例(五):流程定义列表
注:(1)环境搭建:activiti自定义流程之Spring整合activiti-modeler5.16实例(一):环境搭建 (2)创建流程模型:activiti自定义流程之Spring ...
- CURL 宏定义列表
摘自http://blog.csdn.net/msda/article/details/38047809/ CURL 宏定义列表 列表CURL库一共有17个函数 curl_close:关闭CURL会话 ...
随机推荐
- JDBC中的那些设计模式
一.单例模式获取数据库连接 1.关于单例模式的定义 保证一个类仅有一个实例,并提供访问它的全局访问点.Java里面实现的单例是一个虚拟机的范围.因为装载类的功能时虚拟机,所以一个虚拟机在听过自己的Cl ...
- ChunkDisappearImage-一个以矩形为单位的图片消失分解效果
效果 使用 1.将ChunkDisappearImage挂在一个空GameObject上. 2.将ChunkDisappearImage的Material设为ChunkDisappearImageMa ...
- buildroot构建项目(七)--- u-boot 2017.11 适配开发板修改 4 ---- 系统启动初始化之四
设置完寄存器控制器后,则跳出cpu_init_crit,进入_main 函数.即进入crt0.S (arch\arm\lib) 跟着代码流程慢慢走 一.crt0.S 1.1 第一步执行代码 /* 预 ...
- 20155220 2016-2017-2 《Java程序设计》第七周学习总结
20155220 2016-2017-2 <Java程序设计>第七周学习总结 教材学习内容总结 Lambda 如果使用JDK8的话,可以使用Lambda特性去除重复的信息. 在只有Lamb ...
- android 简单的画图片
layout: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns: ...
- Java SE之String,字符串和子字符串的存储与区别
理解String 是怎么占用内存的 来看一个每个String对象的各个属性,一个String包括如下的属性: 一个char数组(是个独立的对象用来存储字符串中的字符) 一个int 的off ...
- c#中富文本编辑器Simditor带图片上传的全部过程(项目不是mvc架构)
描述:最近c#项目中使用富文本编辑器Simditor,记录一下以便以后查看. 注:此项目不是MVC架构的. 1.引用文件 项目中引用相应的css和js文件,注意顺序不能打乱,否则富文本编辑器不会正常显 ...
- json转对象-对象转json
我们经常会用到json,所以在c#里就会经常有对象or对象数组转json,json转对象or对象数组. ps:对象或者json可能是{}or[],也就是json属性or json数组形式,或者json ...
- tidb 架构 ~Tidb学习系列(5)
一 简介:今天我们继续学习tidb的增量传输 二 说明: tidb高度兼容mysql,可以仿照mysql的主从同步复制机制实现mysql->tidb的增量传输 三 实验: 1 下载tidb官方工 ...
- CXF2.7整合spring发布webservice,返回值类型是Map和List<Map>类型
在昨天研究了发布CXF发布webservice之后想着将以前的项目发布webservice接口,可是怎么也发布不起来,服务启动失败,原来是自己的接口有返回值类型是Map. 研究了一番之后,发现: we ...