关于bootstrap--列表(ol、ul)
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、代码:< 是小于号"<"; >是大于号">"。
。
5、pre-scrollable:<ol><div><ul>等标签高度超过340px,Y轴就会出现滚动条。
.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}。
6、
关于bootstrap--列表(ol、ul)的更多相关文章
- HTML 列表 <ol><ul><li><dl><dt><dd>
<ol>标签-有序列表 定义和用法: <ol>标签定义有序列表. HTML 与 XHTML 之间的差异 在 HTML 4.01 中,ol 元素的 "compact&q ...
- 关于css中列表(ul ol)存在默认间距的问题
一.总结: 有时候我们要给列表(ul ol 本身就是属于块级元素)的上表框或下边框设置颜色,如下: 但是在给内联块级元素(inline-block)的上表框或下边框设置颜色的时候,就没有这么简单: 在 ...
- 有序列表ol,无序列表ul,定义列表dl
====================非常重要=================无序列表ul中有一个type属性四个属性值type="disc" 实心圆点(默认) type=&q ...
- html 列表 ol 、ul 、dl
html的列表分為無序列表(ul).有序列表(ol).自定義列表(dl). 無序列表: 以<ul>開始,列表項以<li>開始: 列表項可以是段落.圖像.連接.換行符.列表等: ...
- 前端 HTML body标签相关内容 常用标签 列表标签 ul,ol,li
列表标签 ul,ol,li ul.ol.li标签 都属于块级标签,独占一行 网站页面上一些列表相关的内容比如说物品列表.人名列表等等都可以使用列表标签来展示.通常后面跟<li>标签一起用, ...
- Bootstrap列表
一.HTML的列表 在HTML文档中,列表结构主要有三种:有序列表.无序列表和定义列表.具体使用的标签说明如下: 1.无序列表 <ul> <li>…</li> &l ...
- Bootstrap列表组
前面的话 列表组是Bootstrap框架新增的一个组件,可以用来制作列表清单.垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件.本文将详细介绍Bootstrap列表组 基础列表组 基础列表组,看 ...
- Bootstrap列表与代码样式(附源码)--Bootstrap
给大家分享下Bootstrap框架中列表与代码样式相关的知识 1.列表 (1)无序列表 <ul> <li>CN217编程</li> </ul> 注意:u ...
- ol,ul,dl,table标签的基本语法
ol,ul,dl,table标签的基本语法 有序列表: 无序列表: 自定义列表: <ol> <ul> < ...
- html系列教程--ol ul li
<li> 标签:配合ol,ul实现有序,无序列表以及导航实现. demo: <ol> <li>Coffee</li> <li>T ...
随机推荐
- C++编程规范之18:尽可能局部地声明变量
摘要: 避免作用域膨胀,对于需求如此,对于变量也是如此.变量将引入状态,而我们应该尽可能少地处理状态,变量的生存期也是越短越好. 变量的生存期超过必需的长度时会产生以下几个缺点: 1. 它们 ...
- Python Cookbook笔记
字符串:s.strip() 删除字符串开始和结尾的空白字符. s.lstrip() 删除左边的,s.rstrip() 删除右边的. 随机数:random.random() 生成0-1之间的数. ...
- java\C#\php主流语言实现FMS流媒体传输协议RTMP的开源组件
java:bladeDS http://sourceforge.net/adobe/blazeds/wiki/Home/ .net:FlourinceFX http://www.fluorinefx. ...
- SOAP 简单对象访问协议
webService三要素 SOAP.WSDL(WebServicesDescriptionLanguage).UDDI(UniversalDescriptionDiscovery andIntegr ...
- linux内存机制
~# free -m total used free shared buffers cachedMem: 16086 8579 7507 0 152 800 ...
- 开发日志_Jan.9
今天主要工作为修改昨天的碰撞引擎不符合预期的部分. 经过了昨天的工作,碰撞算法已经初见雏形.但是主要有两个问题: 碰撞反弹的方向与预期不符合 碰撞后球与机器人存在一个"黏在一起"的 ...
- params关键字载入空值的陷阱
在编写方法时,不确定这个方法要传入多少个参数,或者随着程序的开发速度,该方法的参数会发生很大变化,在C#中引入了params关键字,使用params修饰object类型的数组并作为方法的参数类型,可以 ...
- 用ueditor上传图片、文件等到七牛云存储
ueditor上传文件,是用数据流的形式上传的. 而七牛云存储官方文档中,只提供了文件路径上传的方式. 但是,仅仅是在官方文档中写了这一种方式. 事实上,利用VS的对象管理器,打开Qiniu的dll, ...
- UIButton上图片和文字的位置调整
UIButton 上默认是图片在左文字在右,而大多数情况这样默认的的显示形式都不能满足我们的需求,接下来我就这个问题分享一下我的心得. 默认情况下,不设置的效果,都是居中实现 UIButton *bu ...
- JQ简单图片轮播
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...