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 相关文章推荐
Jquery 基础学习笔记
May 29 Javascript
奉献给JavaScript初学者的编写开发的七个细节
Jan 11 Javascript
Javascript中定义方法的另类写法(批量定义js对象的方法)
Feb 25 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
Nov 27 Javascript
jquery实现漂亮的二级下拉菜单代码
Aug 26 Javascript
jQuery动画效果实现图片无缝连续滚动
Jan 12 Javascript
js console.log打印对像与数组用法详解
Jan 21 Javascript
总结Javascript中的隐式类型转换
Aug 24 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
Feb 06 Javascript
Vue非父子组件通信详解
Jun 12 Javascript
JS运动特效之完美运动框架实例分析
Jan 24 Javascript
JS实现骰子3D旋转效果
Oct 24 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截取指定图片大小的方法
2014/12/10 PHP
php传值赋值和传地址赋值用法实例分析
2015/06/20 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
arguments对象
2006/11/20 Javascript
javascript 词法作用域和闭包分析说明
2010/08/12 Javascript
jquery事件preventDefault()方法用法实例
2015/01/16 Javascript
Jquery动态替换div内容及动态展示的方法
2015/01/23 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
2015/03/09 Javascript
学习JavaScript设计模式(代理模式)
2015/12/03 Javascript
jquery简单插件制作(fn.extend)完整实例
2016/05/24 Javascript
ES6概念 ymbol.for()方法
2016/12/25 Javascript
ES6概念 Symbol toString()方法
2016/12/25 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
2017/03/09 Javascript
js案例之鼠标跟随jquery版(实例讲解)
2017/07/21 jQuery
React中的refs的使用教程
2018/02/13 Javascript
[31:29]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第一场 12.20
2020/12/23 DOTA
浅谈Python中copy()方法的使用
2015/05/21 Python
Python3利用Dlib实现摄像头实时人脸检测和平铺显示示例
2019/02/21 Python
Python地图绘制实操详解
2019/03/04 Python
英国美发和美容产品商城:HQhair
2019/02/08 全球购物
企业统计员岗位职责
2013/12/13 职场文书
个人求职信范文分享
2014/01/06 职场文书
动漫专业高职生职业生涯规划书
2014/02/15 职场文书
农民工工资支付承诺函
2014/03/31 职场文书
青年志愿者先进事迹
2014/05/06 职场文书
井冈山红色之旅感想
2014/10/07 职场文书
停车场管理协议书范本
2014/10/08 职场文书
前台接待岗位职责范本
2015/04/03 职场文书
退伍军人感言
2015/08/01 职场文书
公司晚宴祝酒词
2015/08/11 职场文书
思想品德课教学反思
2016/02/24 职场文书
浅谈Mysql多表连接查询的执行细节
2021/04/24 MySQL
浅谈PostgreSQL表分区的三种方式
2021/06/29 PostgreSQL
ajax请求前端跨域问题原因及解决方案
2021/10/16 Javascript
Redis Stream类型的使用详解
2021/11/11 Redis
python实现会员信息管理系统(List)
2022/03/18 Python