列表:

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

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

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

无序列表:

  <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列表的更多相关文章

  1. Bootstrap页面布局3 - BS布局以及流动布局

    1. <h1 class='page-header'>布局<small> 使用bootstrap网格系统布局网页</small></h1> 得到如图所示 ...

  2. Bootstrap页面布局16 - BS导航菜单和其响应式布局以及导航中的下拉菜单

    代码: <div class='container-fluid'> <h2 class='page-header'>导航</h2> <!-- .navrbar ...

  3. Bootstrap页面布局18 - BS导航路径以及分页器

    导航路径:又叫“面包屑”,功能是让用户知道所处的位置. <!--面包屑--> <ul class='breadcrumb'> <li><a href='#'& ...

  4. Bootstrap页面布局17 - BS选项卡

    代码结构: <div class='container-fluid'> <h2 class='page-header'>Bootstrap 选项卡</h2> < ...

  5. Bootstrap页面布局24 - BS旋转木马功能

    代码: <div class='container-fluid'> <h3 class='page-header'>Bootstrap 旋转木马</h3> < ...

  6. Bootstrap页面布局23 - BS折叠内容

    <div class='container-fluid'> <h3 class='page-header'>Bootstrap 折叠内容</h3> <!--如 ...

  7. Bootstrap页面布局22 - BS工具提示

    当鼠标点击在一个a连接上时,显示提示文字的效果 ----------------  tooltip <div class='container-fluid'> <h3 class=' ...

  8. Bootstrap页面布局20 - BS缩略图

    <div class='container-fluid'> <h2 class='page-header'>Bootstrap 缩略图</h2> <ul cl ...

  9. Bootstrap页面布局19 - BS提示信息

    提示信息的设计 提示信息的类: .alert:提示信息类 .alert alert-danger: .alert alert-error: .alert alert-success: .alert a ...

随机推荐

  1. .Net Enum

    /// <summary> /// 将enum转换成List<Model.Models.SelectViewModels>,即html的select标签使用的数据 /// &l ...

  2. 最简单的Github入门基础

    起因是小伙伴分享给我github上的一个FQ工具,让我看实现过程.于是,就由关键字"github"搜索开始. 一言之,是个开源的SVN.和CVS.SVN类似,但是,里面有千千万万程 ...

  3. Java -- String、StringBuffer、StringBuilder

    原文:http://blog.csdn.net/kingzone_2008/article/details/9220691 String:不可变. StringBuffer(JDK1.0):可变,线程 ...

  4. Python笔记 001

    #python版本:3.5.2 #for循环 for letter in ("xuyingke"): #默认循环 print ("当前字母:",letter) ...

  5. Spring+C3P0数据库连接池配置

    一.xml文件读取.properties文件连接数据库 1.xml文件中的配置 <bean id="dataSourceLocal" name="dataSourc ...

  6. C#判断IP地址是否合法函数-使用正则表达式-2个 (转)

    public bool IsCorrenctIP(string ip){ string pattrn=@"(/d{1,2}|1/d/d|2[0-4]/d|25[0-5])/.(/d{1,2} ...

  7. [转载]如何重装Grub,使其可以引导双系统

    引言: GRUB是一个多重操作系统的启动管理器.用来引导不同的系统,如windows,Linux.一般来说要先装Windows,后装Linux,这样grub才能生效(grub存在于linux的安装中) ...

  8. linux主要目录的作用

    手动敲一遍.算是加强记忆吧~ /:文件系统的入口,也是最高一级的目录 /bin:最基本的且着急用户和普通用户都可以使用的命令放在此目录下,如:ls.cp等 /boot:存放Linux的内核及引导系统所 ...

  9. Selenium2Library关键字

    对Selenium2Library关键字的整理和翻译.英文不好,仅供参考. 1.Add Cookie [ name | value | path=None | domain=None | secure ...

  10. 平衡树 - 红黑树(JQuery+Js+Canvas版本的,帮助大家理解)

    红黑树 1.红黑树介绍 年写的一篇论文中获得的.它是复杂的,但它的操作有着良好的最坏情况运行时间,并且在实践中是高效的:它可以在O(log n)时间内做查找,插入和删除,这里的n是树中元素的数目. 2 ...