1、list-unstyled :

在<ol>(有序列表)</ol><ul>(无序列表)</ul>中加入class="list-styled"将前面的数字和符号去掉,bootstrap样式为:

.list-unstyled

{

  padding-left: 0;

  list-style: none;

}

2、list-inline:

在<ol>(有序列表)</ol><ul>(无序列表)</ul>中加入class="list-inline"变为横向列表,主要用作导航栏,bootstrap样式为:

.list-inline

{

  padding-left: 0; margin-left: -5px; list-style: none;

}

.list-inline > li

{

  display: inline-block; padding-right: 5px; padding-left: 5px;

}

3、定义列表

dl
{
margin-top: 0;
margin-bottom: 20px;
}
dt,
dd
{
line-height: 1.42857143;
}
dt
{
font-weight: bold;
}
dd
{
margin-left: 0;
}
@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;
}
}
 

<dl class="dl-horizontal">

<dt>我来测试一个标题,我来测试一个标题(标题加粗)</dt>
<dd>我在写一个水平定义列表的效果,我在写一个水平定义列表的效果</dd>
</dl>

效果:

(1)将dt设置了一个左浮动,并且设置了一个宽度为160px
(2)将dd设置一个margin-left的值为180px,达到水平的效果
(3)当标题宽度超过160px时,将会显示三个省略号

3、预编译版本的Bootstrap将代码的样式单独提取出来:
(1)LESS版本,请查阅code.less文件
(2)Sass版本,请查阅_code.scss文件
编译出来的CSS代码请查阅bootstrap.css文件第688行~第730行,由于代码太长,此处不一一列举。

4、代码:&lt; 是小于号"<";  &gt;是大于号">"。

5、pre-scrollable:<ol><div><ul>等标签高度超过340px,Y轴就会出现滚动条。

.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}。

6、

关于bootstrap--列表(ol、ul)的更多相关文章

  1. HTML 列表 <ol><ul><li><dl><dt><dd>

    <ol>标签-有序列表 定义和用法: <ol>标签定义有序列表. HTML 与 XHTML 之间的差异 在 HTML 4.01 中,ol 元素的 "compact&q ...

  2. 关于css中列表(ul ol)存在默认间距的问题

    一.总结: 有时候我们要给列表(ul ol 本身就是属于块级元素)的上表框或下边框设置颜色,如下: 但是在给内联块级元素(inline-block)的上表框或下边框设置颜色的时候,就没有这么简单: 在 ...

  3. 有序列表ol,无序列表ul,定义列表dl

    ====================非常重要=================无序列表ul中有一个type属性四个属性值type="disc" 实心圆点(默认) type=&q ...

  4. html 列表 ol 、ul 、dl

    html的列表分為無序列表(ul).有序列表(ol).自定義列表(dl). 無序列表: 以<ul>開始,列表項以<li>開始: 列表項可以是段落.圖像.連接.換行符.列表等: ...

  5. 前端 HTML body标签相关内容 常用标签 列表标签 ul,ol,li

    列表标签 ul,ol,li ul.ol.li标签 都属于块级标签,独占一行 网站页面上一些列表相关的内容比如说物品列表.人名列表等等都可以使用列表标签来展示.通常后面跟<li>标签一起用, ...

  6. Bootstrap列表

    一.HTML的列表 在HTML文档中,列表结构主要有三种:有序列表.无序列表和定义列表.具体使用的标签说明如下: 1.无序列表 <ul> <li>…</li> &l ...

  7. Bootstrap列表组

    前面的话 列表组是Bootstrap框架新增的一个组件,可以用来制作列表清单.垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件.本文将详细介绍Bootstrap列表组 基础列表组 基础列表组,看 ...

  8. Bootstrap列表与代码样式(附源码)--Bootstrap

    给大家分享下Bootstrap框架中列表与代码样式相关的知识 1.列表 (1)无序列表 <ul> <li>CN217编程</li> </ul> 注意:u ...

  9. ol,ul,dl,table标签的基本语法

    ol,ul,dl,table标签的基本语法 有序列表: 无序列表:                                  自定义列表: <ol> <ul> < ...

  10. html系列教程--ol ul li

    <li> 标签:配合ol,ul实现有序,无序列表以及导航实现. demo: <ol>    <li>Coffee</li>    <li>T ...

随机推荐

  1. Mongodb 条件查询

    1.1 查询出所有数据的指定键(name ,age ,country) db.persons.find({},{name:1,age:1,country:1,_id:0}) 2.查询条件 2.查询条件 ...

  2. 关于IE8导航串行的问题

    1.概述: 作为一个前端人员,多浏览器兼容是必须必备的技能,现在一般要求是兼容IE8及以上,如果兼容IE6的话,会麻烦一些,这里介绍的是在IE8状态下我们导航条错位的问题. 2.导航错位代码 < ...

  3. [nagios监控] NRPE: Unable to read output 的原因及排除

    nrpe被监控端运行定义命令正常,监控端运行 #/usr/local/nagios/libexec/check_nrpe -H 117.121.9.200 -c check_oracle_tables ...

  4. 简单的通过NSFileManager 存储图片

    UIImage *image = [UIImage imageNamed:@"Default.png"]; NSData *data = UIImageJPEGRepresenta ...

  5. 一个C++基于boost简单实现的线程池

    xl_blocking_queue.h ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 ...

  6. MySQL数据库的双向加密方式

    如果你正在运行使用MySQL的Web应用程序,那么你把密码或者其他敏感信息保存在应用程序里的机会就很大.保护这些数据免受或者窥探者的获取 是一个令人关注的重要问题,因为您既不能让未经授权的人员使用或者 ...

  7. Java基础知识强化46:StringBuffer类之判断一个字符串是否对称案例

    1. 分析:判断一个字符串是否是一个对称的字符串,我们只需要把字符串的第1个字符和最后1个字符,第2个字符和倒数第2个字符,…… 比较的次数是长度除以2.  方法1:通过取取索引对应值来进行一一比对 ...

  8. linux wc命令

    Linux系统中的wc(Word Count)命令的功能为统计指定文件中的字节数.字数.行数,并将统计结果显示输出. 1.命令格式: wc [选项]文件... 2.命令功能: 统计指定文件中的字节数. ...

  9. mybatis 与 反射

    Mybatis是个优秀的ORM框架,所以它的反射层一定不会让我们失望 图比较大,可以开新页面查看 可以看到,Mybatis对这一块抽象的比较复杂,我们可以看到有几个比较主要的部分:Reflector. ...

  10. HTML5 Canvas前台压缩图片并上传到服务器

    1.前台代码: <input id="fileOne" type="file" /> <input id="btnOne" ...