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 相关文章推荐
优化javascript的执行速度
Jan 23 Javascript
将string解析为json的几种方式小结
Nov 11 Javascript
javascript:json数据的页面绑定示例代码
Jan 26 Javascript
JS获得选取checkbox整行数据的方法
Jan 28 Javascript
JavaScript数据类型学习笔记
Jan 25 Javascript
Vue.js双向绑定操作技巧(初级入门)
Dec 27 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
Oct 30 Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
Dec 14 Javascript
vue-cli中vue本地实现跨域调试接口
Jan 16 Javascript
webpack.DefinePlugin与cross-env区别详解
Feb 23 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
Mar 11 Javascript
swiper实现导航滚动效果
Dec 13 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
php实现12306余票查询、价格查询示例
2014/04/17 PHP
PHP入门之常量简介和系统常量
2014/05/12 PHP
前端必学之PHP语法基础
2016/01/01 PHP
thinkPHP5框架闭包函数与子查询传参用法示例
2018/08/02 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
如何简单地用YUI做JavaScript动画
2007/03/10 Javascript
默认让页面的第一个控件选中的javascript代码
2009/12/26 Javascript
jQuery 学习入门篇附实例代码
2010/03/16 Javascript
JavaScript调试技巧之console.log()详解
2014/03/19 Javascript
简单实现js选项卡切换效果
2016/02/03 Javascript
论JavaScript模块化编程
2016/03/07 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
2016/05/05 Javascript
web.js.字符串与正则表达式操作
2017/05/13 Javascript
nodejs利用ajax实现网页无刷新上传图片实例代码
2017/06/06 NodeJs
js推箱子小游戏步骤代码解析
2018/01/10 Javascript
vue通过路由实现页面刷新的方法
2018/01/25 Javascript
vue axios登录请求拦截器
2018/04/02 Javascript
Vuex 单状态库与多模块状态库详解
2018/12/11 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
2019/09/20 Javascript
Python对象的深拷贝和浅拷贝详解
2014/08/25 Python
5个很好的Python面试题问题答案及分析
2018/01/19 Python
python 编写简单网页服务器的实例
2018/06/01 Python
python tkinter图形界面代码统计工具
2019/09/18 Python
python 使用pygame工具包实现贪吃蛇游戏(多彩版)
2019/10/30 Python
python小白学习包管理器pip安装
2020/06/09 Python
Unix如何在一行中运行多个命令
2015/05/29 面试题
在校生党员自我评价
2013/09/25 职场文书
入学申请自荐信范文
2014/02/26 职场文书
考核评语大全
2014/04/29 职场文书
献爱心活动总结
2014/05/07 职场文书
房产授权委托书范本
2014/09/22 职场文书
党的群众路线教育实践活动组织生活会发言材料
2014/10/17 职场文书
2014年保管员工作总结
2014/11/18 职场文书
店铺转让协议书
2015/01/29 职场文书
2015年食品安全工作总结
2015/05/15 职场文书
刑事附带民事上诉状
2015/05/23 职场文书