Bootstrap CSS布局之列表

Bootstrap CSS布局之列表

本文实例为大家分享了Bootstrap css布局中的列表布局，供大家参考，具体内容如下

列表

普通列表ul li

有序列表ol li

去点列表.list-unstyled

内联列表.list-inline

yjgsRDc定义列表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: nohttp://ne;

}

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

}

}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。