bootstrap 列表--水平定义列表
2016-04-09 13:47
651 查看
水平定义列表就像内联列表一样,Bootstrap可以给<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果。
只有屏幕大于768px的时候,添加类名“.dl-horizontal”才具有水平定义列表效果。其实现主要方式:
1、将dt设置了一个左浮动,并且设置了一个宽度为160px
2、将dd设置一个margin-left的值为180px,达到水平的效果
3、当标题宽度超过160px时,将会显示三个省略号
@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模态窗口Modal中使用Kindeditor或UEditor编辑器第二次无法加载的问题
- 2016 最好的Bootstrap 管理模板
- bootstrap 文本对齐风格
- bootstrap 强调相关的类
- bootstrap导航栏中的按钮
- bootstrap 全局样式设置
- 基于bootstrap的基本模板
- 文件上传下载样式 --- bootstrap
- bootstrap 下拉菜单精简版
- Bootstrap学习笔记—关于Glyphicons 字体图标
- Bootstrap学习笔记—学习制作轮播
- 在幼儿园管理系统中使用BootStrap的时候,如何快速找到合适的图标!
- html中的表格 bootstrap-table
- bootstrap鼠标经过下拉
- bootstrap自适应栅格系统布局
- Bootstrap模态框 及 判断选中checkbox的个数
- bootstrap插件学习
- Java NIO框架Netty教程(四) – ServerBootStrap启动流程源码分析
- bootstrap组件学习
- bootstrap全局CSS样式学习