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 相关文章推荐
五段实用的js高级技巧
Dec 20 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
May 08 Javascript
JavaScript父子窗体间的调用方法
Mar 31 Javascript
javascript中attachEvent用法实例分析
May 14 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
Sep 04 Javascript
使用JS正则表达式 替换括号,尖括号等
Nov 29 Javascript
Angular的事件和表单详解
Dec 26 Javascript
vuejs绑定class和style样式
Apr 11 Javascript
VUE重点问题总结
Mar 19 Javascript
node实现分片下载的示例代码
Oct 17 Javascript
配置eslint规范项目代码风格
Mar 11 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
Jun 04 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
PHPMYADMIN导入数据最大为2M的解决方法
2012/04/23 PHP
ThinkPHP3.1新特性之多数据库操作更加完善
2014/06/19 PHP
Laravel学习教程之IOC容器的介绍与用例
2017/08/15 PHP
PHP的微信支付接口使用方法讲解
2019/03/08 PHP
Javascript 汉字字节判断
2009/08/01 Javascript
NodeJs中的非阻塞方法介绍
2012/06/05 NodeJs
JS实现从顶部下拉显示的带动画QQ客服特效代码
2015/10/24 Javascript
深入理解jquery跨域请求方法
2016/05/18 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
2016/06/08 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
2016/11/25 Javascript
COM组件中调用JavaScript函数详解及实例
2017/02/23 Javascript
Bootstrap笔记—折叠实例代码
2017/03/13 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
2018/01/03 Javascript
angular基于ng-alain定义自己的select组件示例
2018/02/23 Javascript
Vue实现自定义下拉菜单功能
2018/07/16 Javascript
webstrom Debug 调试vue项目的方法步骤
2018/07/17 Javascript
详解微信小程序调用支付接口支付
2019/04/28 Javascript
JavaScript实现图片放大镜效果
2019/06/27 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
2020/05/09 Javascript
JS寄快递地址智能解析的实现代码
2020/07/16 Javascript
Python实现TCP/IP协议下的端口转发及重定向示例
2016/06/14 Python
TensorFlow实现iris数据集线性回归
2018/09/07 Python
Pandas之MultiIndex对象的示例详解
2019/06/25 Python
检测tensorflow是否使用gpu进行计算的方式
2020/02/03 Python
用Python做一个久坐提醒小助手的示例代码
2020/02/10 Python
Python3.9又更新了:dict内置新功能
2020/02/28 Python
性能服装:HYLETE
2018/08/14 全球购物
Kappa英国官方在线商店:服装和运动器材
2020/11/22 全球购物
教师自荐书
2013/10/08 职场文书
中层干部岗位职责
2013/12/18 职场文书
管理失职检讨书
2014/02/12 职场文书
会员活动策划方案
2014/08/19 职场文书
考试作弊检讨书
2015/01/27 职场文书
地道战观后感
2015/06/04 职场文书
2016年班主任培训心得体会
2016/01/07 职场文书
2016大学生国家助学贷款承诺书
2016/03/25 职场文书