列表:

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

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

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

无序列表:

  <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. 获取http请求响应头

    一直都是在给服务器端发送请求的时候可能会出现设置头文件的情况,但这次获取HTTP 返回的头文件,着实让我纠结一番,但最终还是实现了,总结一下.(PS:其实最后方法很简单,只是分享一下纠结过程) 先看一 ...

  2. MyEclipse中的重命名

    我们要重命名一个函数或变量时,如果手工改会很耗时而且可能会有些遗漏,造成编译错误.这个时候可以在变量或函数定义处,按下MyEclipse的Alter + SHIF + R 重命名,然后按下Enter键 ...

  3. Codeforces Beta Round #80 (Div. 1 Only) D. Time to Raid Cowavans 离线+分块

    题目链接: http://codeforces.com/contest/103/problem/D D. Time to Raid Cowavans time limit per test:4 sec ...

  4. 通过ApplicationContextAwareSpring实现手工加载配置的javabean

    在做一个多线程的数据采集器实现的过程中,由于框架是集成srping,因此希望统一使用原有的数据库配置信息,但是需要手工获取数据库配置bean.我们可以通过继承ApplicationContextAwa ...

  5. CentOS6.5 x86_64 配置Broadcom 43XX系列 无线网卡驱动

    from: http://wiki.centos.org/HowTos/Laptops/Wireless/Broadcom?action=show In order to install Broadc ...

  6. HDU1695-GCD(数论-欧拉函数-容斥)

    GCD Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submis ...

  7. Python定制类

    https://docs.python.org/3/reference/datamodel.html#special-method-names

  8. 1.6部署到CentOS「深入浅出ASP.NET Core系列」

    希望给你3-5分钟的碎片化学习,可能是坐地铁.等公交,积少成多,水滴石穿,谢谢关注. 安装.NET Core 官方安装地址: https://www.microsoft.com/net/learn/d ...

  9. java基础(四)-----抽象类与接口

    抽象类与接口是java语言中对抽象概念进行定义的两种机制,正是由于他们的存在才赋予java强大的面向对象的能力.他们两者之间对抽象概念的支持有很大的相似,甚至可以互换,但是也有区别. 一.抽象类 我们 ...

  10. Python3 tkinter基础 Menubutton 点击按钮出现下拉菜单

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...