Bootstrap页面布局9

列表：

　　无序列表(列表中项目内容没有固定的顺序),

　　有序列表(通常使用在一组有前后顺序的内容上),

　　描述列表(定义解释一组词汇)

无序列表：

　　<ul>

　　　　<li>Ueditor编辑器</li>

　　　　<li>TinyMCE编辑器</li>

　　　　<li>Kindeditor编辑器</li>

　　</ul>

如图：

有序列表：　

　　<ol>

　　　　<li>Ueditor编辑器</li>

　　　　<li>TinyMCE编辑器</li>

　　　　<li>Kindeditor编辑器</li>

　　</ol>

如图：

描述列表：

　　dt:要描述的词汇

　　dd:对这个词汇进行解释的句子

　　<dl>

　　　　<dt>Ueditor编辑器</dt>

　　　　<dd>Ueditor编辑器强大细致</dd>

　　　　<dt>TinyMCE编辑器</dt>

　　　　<dd>TinyMCE编辑器好像还不错</dd>

　　　　<dt>Kindeditor编辑器</dt>

　　　　<dd>Kindeditor编辑器非常好用</dd>

　　</dl>

如图：

BS为描述列表提供了类来更改描述列表的样式：

这里的样式应该是水平对齐，为什么这里没有水平对齐，找到bootstrap.css!!!

源文件中的

.dl-horizontal dt {
　　float: left;
　　clear: left;
　　width: 120px;
　　text-align: right;
}
.dl-horizontal dd {
　　margin-left: 130px;//这里的130px表示dd距离dt相差10个像素
}

不用修改源码，只需要在新的css文件或者页面style标签中重新定义.dl-horizontal dd的样式为：

.dl-horizontal dd {
　　margin-left: 10px;

　　float:left;

}

修改完成后，得到如图所示效果：

这个效果就正常了！（但我还是不确定，是不是这么修改...）

本人这里如果有问题，请留言，谢谢先。

巴特西

Bootstrap页面布局9 - BS列表

最新文章

热门文章