源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

Bootstrap CSS布局之列表

  • 时间:2022-05-09 19:06 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:Bootstrap CSS布局之列表
本文实例为大家分享了Bootstrap CSS布局中的列表布局,供大家参考,具体内容如下 [b]列表 [/b] 普通列表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” [img]http://files.jb51.net/file_images/article/201612/20161215133256428.jpg?2016111513335[/img]
@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;
 }
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部