本文实例为大家分享了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”
@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;
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持北冥有鱼。
您可能感兴趣的文章:
- Bootstrap源码解读媒体对象、列表组和面板（10）
- Bootstrap基本组件学习笔记之列表组(11)
- 基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
- BootStrap实现邮件列表的分页和模态框添加邮件的功能
- bootstrap下拉列表与输入框组结合的样式调整
- jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
- Knockout结合Bootstrap创建动态UI实现产品列表管理
- 利用ASP.NET MVC和Bootstrap快速搭建个人博客之后台dataTable数据列表
- 深入浅析Bootstrap列表组组件
- Bootstrap列表组学习使用
