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;
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • js实现简单扫雷

    js实现简单扫雷

    这篇文章主要为大家详细介绍了js实现简单扫雷,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • javascript iframe内的函数调用实现方法

    javascript iframe内的函数调用实现方法

    用下面的方法可以调用iframe中的函数,实现一些比较特殊的效果,不过能跨域的。
    2009-07-07
  • 微信小程序实现action-sheet弹出底部菜单功能【附源码下载】

    微信小程序实现action-sheet弹出底部菜单功能【附源码下载】

    这篇文章主要介绍了微信小程序实现action-sheet弹出底部菜单功能,结合实例形式分析了action-sheet组件弹出菜单的使用技巧,包括元素遍历、事件响应及属性设置等操作方法,并附带源码供读者下载参考,需要的朋友可以参考下
    2017-12-12
  • Django使用多数据库的方法

    Django使用多数据库的方法

    有些项目可能涉及到使用多个数据库的情况,方法很简单。接下来通过本文给大家介绍Django使用多数据库的方法,需要的朋友参考下吧
    2017-09-09
  • JS实现的仿QQ空间图片弹出效果代码

    JS实现的仿QQ空间图片弹出效果代码

    这篇文章主要介绍了JS实现的仿QQ空间图片弹出效果代码,涉及JavaScript响应鼠标事件动态生成弹出层的相关技巧,需要的朋友可以参考下
    2016-02-02
  • JS检测移动端横竖屏的代码

    JS检测移动端横竖屏的代码

    这篇文章主要介绍了JS检测移动端横竖屏的代码,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-05-05
  • js判断所有表单项不为空则提交表单的实现方法

    js判断所有表单项不为空则提交表单的实现方法

    下面小编就为大家带来一篇js判断所有表单项不为空则提交表单的实现方法。小编觉得挺不错的, 现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • 在webstorm中配置less的方法详解

    在webstorm中配置less的方法详解

    这篇文章主要介绍了在webstorm中配置less的方法,本文通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2020-09-09
  • js处理包含中文的字符串实例

    js处理包含中文的字符串实例

    下面小编就为大家带来一篇js处理包含中文的字符串实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • JsonServer安装及启动过程图解

    JsonServer安装及启动过程图解

    这篇文章主要介绍了JsonServer安装及启动过程图解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-02-02

最新评论