Bootstrap CSS布局之列表


Posted in Javascript onDecember 15, 2016

本文实例为大家分享了Bootstrap CSS布局中的列表布局,供大家参考,具体内容如下

列表
普通列表ul li
有序列表ol li
去点列表.list-unstyled
内联列表.list-inline
定义列表dl dt dd
水平定义列表dl-horizontal

ul,
ol {
 margin-top: 0;
 margin-bottom: 10px;
}
ul ul,
ol ul,
ul ol,
ol ol {
 margin-bottom: 0;
}

普通列表ul li
有序列表ol li
去点列表class=”list-unstyled”

//源码
.list-unstyled {
 padding-left: 0;
 list-style: none;
}

内联列表class=”list-inline”

//源码
.list-inline {
 padding-left: 0;
 margin-left: -5px;
 list-style: none;
}
.list-inline > li {
 display: inline-block;
 padding-right: 5px;
 padding-left: 5px;
}

定义列表dl dt dd

dl {
 margin-top: 0;
 margin-bottom: 20px;
}
dt,
dd {
 line-height: 1.42857143;
}
dt {
 font-weight: bold;
}
dd {
 margin-left: 0;
}

水平定义列表class=”dl-horizontal”

Bootstrap CSS布局之列表

@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;
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
屏蔽Flash右键信息的js代码
Jan 17 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
Jun 14 Javascript
Jquery倒计时源码分享
May 16 Javascript
JavaScript使用Replace进行字符串替换的方法
Apr 14 Javascript
微信小程序学习(4)-系统配置app.json详解
Jan 12 Javascript
原生JavaScript实现的简单放大镜效果示例
Feb 07 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
May 16 Javascript
vue图片上传本地预览组件使用详解
Feb 20 Javascript
Vue解析带html标签的字符串为dom的实例
Nov 13 Javascript
vue实现购物车选择功能
Jan 10 Javascript
JS实现分页导航效果
Feb 19 Javascript
JavaScript的Set数据结构详解
Feb 18 Javascript
BootStrap整体框架之基础布局组件
Dec 15 #Javascript
JS弹性运动实现方法分析
Dec 15 #Javascript
JS经典正则表达式笔试题汇总
Dec 15 #Javascript
javascript中闭包概念与用法深入理解
Dec 15 #Javascript
javascript读取文本节点方法小结
Dec 15 #Javascript
EditPlus中的正则表达式 实战(4)
Dec 15 #Javascript
jQuery validate插件功能与用法详解
Dec 15 #Javascript
You might like
日本因肺炎疫情影响,这几部动漫推延播放!
2020/03/03 日漫
CI框架源码阅读,系统常量文件constants.php的配置
2013/02/28 PHP
php生成静态页面的简单示例
2014/04/17 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(九)
2014/06/24 PHP
PHP中的闭包(匿名函数)浅析
2015/02/07 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
PHP日志LOG类定义与用法示例
2018/09/06 PHP
jquery获得option的值和对option进行操作
2013/12/13 Javascript
js 判断控件获得焦点的示例代码
2014/03/04 Javascript
JS实现具备延时功能的滑动门菜单效果
2015/09/17 Javascript
AngularJS基础 ng-include 指令示例讲解
2016/08/01 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
2016/09/29 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
2017/03/11 Javascript
jQuery输入框密码的显示隐藏【代码分享】
2017/04/29 jQuery
vue组件watch属性实例讲解
2017/11/07 Javascript
详解vue-cli中模拟数据的两种方法
2018/07/03 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
2020/09/11 Javascript
Vue+Java+Base64实现条码解析的示例
2020/09/23 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
2020/10/09 Javascript
[01:13]DOTA2群星解读国服召集令 一起说出回归的理由
2013/07/17 DOTA
[02:38]DOTA2 夜魇暗潮2020活动介绍官方视频
2020/11/04 DOTA
Python的subprocess模块总结
2014/11/07 Python
python生成式的send()方法(详解)
2017/05/08 Python
使用python在本地电脑上快速处理数据
2017/06/22 Python
windows下pycharm安装、创建文件、配置默认模板
2018/07/31 Python
Python实现快速排序的方法详解
2019/10/25 Python
python 已知一个字符,在一个list中找出近似值或相似值实现模糊匹配
2020/02/29 Python
解决python中import文件夹下面py文件报错问题
2020/06/01 Python
如何解决安装python3.6.1失败
2020/07/01 Python
Cinque网上商店:德国服装品牌
2019/03/17 全球购物
最新的小工具和卓越的产品设计:Oh That Tech!
2019/08/07 全球购物
工作违纪检讨书
2014/02/17 职场文书
英文请假条
2014/04/11 职场文书
会计人员演讲稿
2014/09/11 职场文书
2015年试用期工作总结范文
2015/05/28 职场文书
springboot应用服务启动事件的监听实现
2022/04/06 Java/Android