Bootstrap CSS布局之列表
更新时间：2016年12月15日 13:29:38 作者：github_34514750
这篇文章主要为大家详细介绍了Bootstrap CSS布局之列表的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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列表组学习使用
相关文章
这篇文章主要介绍了JSON.parse处理非标准Json数据出错的解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了JS对象数组中如何匹配某个属性值，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
用js控制select的方法，大家可以参考下2008-06-06
表单验证在很多地方都可以用到，本文详细的介绍了javascript表单是否为空验证方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要为大家详细介绍了微信小程序实现canvas分享朋友圈海报，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
微信小程序的云开发功能刚刚上线，这篇文章主要介绍了小程序云开发部署攻略(图文教程)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
这篇文章主要为大家详细介绍了bootstrap multiselect下拉列表功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
这篇文章主要为大家介绍了babel插件去除console示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
本文主要介绍了使用javascript实现简单的选项卡切换的效果，代码非常的简单，兼容性十分棒，这里推荐给小伙伴们。2015-01-01
谷歌浏览器不支持showModalDialog模态对话框的解决方法
谷歌浏览器不支持showModalDialog模态对话框和无法返回returnValue，这个问题，想必很多朋友都有遇到过吧，解决方法很简单，下面的思路，大家可以看看2014-09-09
最新评论