bootstra提供了六种列表效果
列表--简介
在HTML文档中,列表结构主要有三种:有序列表、无序列表和定义列表。具体使用的标签说明如下:
无序列表
<ul>
<li>…</li>
</ul>
有序列表
<ol>
<li>…</li>
</ol>
定义列表
<dl>
<dt>…</dt>
<dd>…</dd>
</dl>
Bootstrap根据平时的使用情形提供了六种形式的列表:
☑ 普通列表
☑ 有序列表
☑ 去点列表
☑ 内联列表
☑ 描述列表
☑ 水平描述列表
接下来,我们一起来学习Bootstrap提供的这六种列表的使用方法
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>列表--简介</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<ul>
<li>无序列表信息1</li>
<li>无序列表信息2</li>
<li>无序列表信息3</li>
</ul>
<ol>
<li>有序列表信息1</li>
<li>有序列表信息2</li>
<li>有序列表信息3</li>
</ol>
<dl>
<dt>定义列表标题</dt>
<dd>定义列表信息1</dd>
<dd>定义列表信息2</dd>
</dl>
</body>
</html>
列表--无序列表、有序列表
无序列表
无序列表和有序列表使用方式和我们平时使用的一样(无序列表使用ul,有序列表使用ol标签),在样式方面,Bootstrap只是在此基础上做了一些细微的优化,源码请查看bootstrap.css文件的第569行~第579行:
ul,
ol {
margin-top: 0;
margin-bottom: 10px;
}
ul ul,
ol ul,
ul ol,
ol ol {
margin-bottom: 0;
}
从源码上我们可以得知,Bootstrap对于列表,只是在margin上做了一些调整。
列表嵌套
在Bootstrap中列表也是可以嵌套的。
<h5>普通列表</h5>
<ul>
<li>列表项目</li>
<li>列表项目</li>
<li>列表项目</li>
<li>列表项目</li>
<li>列表项目</li>
</ul>
<h5>有序列表</h5>
<ol>
<li>项目列表一</li>
<li>项目列表二</li>
<li>项目列表三</li>
</ol>
<h5>有序列表嵌套</h5>
<ol>
<li>有序列表</li>
<li>
有序列表
<ol>
<li>有序列表(2)</li>
<li>有序列表(2)</li>
</ol>
</li>
<li>有序列表</li>
</ol>
列表--去点列表
小伙伴们可以看到,在Bootstrap中默认情况下无序列表和有序列表是带有项目符号的,但在实际工作中很多时候,我们的列表是不需要这个编号的,比如说用无序列表做导航的时候。Bootstrap为众多开发者考虑的非常周道,通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。
/*源码请查看bootstrap.css文件第580行~第583行*/
.list-unstyled {
padding-left: 0;
list-style: none;
}
从示例中可以看出,除了项目编号之外,还将列表默认的左边内距也清0了。
<li>
项目列表
<ul class="list-unstyled">
<li>不带项目符号</li>
<li>不带项目符号</li>
</ul>
</li>
列表--内联列表
Bootstrap像去点列表一样,通过添加类名“.list-inline”来实现内联列表,简单点说就是把垂直列表换成水平列表,而且去掉项目符号(编号),保持水平显示。也可以说内联列表就是为制作水平导航而生。
/*源码查看bootstrap.css文件第584行~第593行*/
.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none;
}
.list-inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}
看个示例:
<ul class="list-inline">
<li>W3cplus</li>
<li>Blog</li>
<li>CSS3</li>
<li>jQuery</li>
<li>PHP</li>
</ul>
列表--定义列表
对于定义列表而言,Bootstrap并没有做太多的调整,只是调整了行间距,外边距和字体加粗效果。
/*源码请查看bootstrap.css文件第594行~第607行*/
dl {
margin-top: 0;
margin-bottom: 20px;
}
dt,
dd {
line-height: 1.42857143;
}
dt {
font-weight: bold;
}
dd {
margin-left: 0;
}
对于定义列表使用,其实很简单,与我们以前的使用定义列表的方法是相同的:
<dl>
<dt>W3cplus</dt>
<dd>一个致力于推广国内前端行业的技术博客</dd>
<dt>seashen.cn</dt>
<dd>一个真心在做HTML5教育的网站</dd>
</dl>
列表--水平定义列表
水平定义列表就像内联列表一样,Bootstrap可以给<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果。
/*源码请查看bootstrap.css文件第608行~第621行*/
@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;
}
}
此处添加了一个媒体查询。也就是说,只有屏幕大于768px的时候,添加类名“.dl-horizontal”才具有水平定义列表效果。其实现主要方式:
1、将dt设置了一个左浮动,并且设置了一个宽度为160px
2、将dd设置一个margin-left的值为180px,达到水平的效果
3、当标题宽度超过160px时,将会显示三个省略号
其用法如下:
<dl class="dl-horizontal">
<dt>W3cplus</dt>
<dd>一个致力于推广国内前端行业的技术博客。它以探索为己任,不断活跃在行业技术最前沿,努力提供高质量前端技术博文</dd>
<dt>seashen.cn</dt>
<dd>一个专业的HTML5网站</dd>
<dt>我来测试一个标题,我来测试一个标题</dt>
<dd>我在写一个水平定义列表的效果,我在写一个水平定义列表的效果</dd>
</dl>
当你缩小你的浏览器屏幕时,水平定义列表将回复到原始的状态。
bootstra提供了六种列表效果相关推荐
- PHP防QQ列表右划,react native 实现类似QQ的侧滑列表效果
如果列表行数据需要更多的操作,使用侧滑菜单是移动端比较常见的方式,也符合用户的操作习惯,对app的接受度自然会相对提高点.最近得空就把原来的react-native项目升级了侧滑操作,轻轻松松支持an ...
- 基于android的高仿抖音,Android仿抖音列表效果
本文实例为大家分享了Android仿抖音列表效果的具体代码,供大家参考,具体内容如下 当下抖音非常火热,是不是也很心动做一个类似的app吗? 那我们就用RecyclerView实现这个功能吧,关于内存 ...
- Android字母排序列表效果与开发实现
字母排序列表效果 字母列表的实际运用:提供根据字母排序列表,方便用户快速找到自己需要的内容. GitHub下载地址 https://github.com/sufadi/AlphabetList CSD ...
- android仿高德地图首页,Android BottomSheet 的使用(仿高德地图的列表效果)
最近项目中突然要实现高德地图中列表的效果,刚开始一筹莫展,以为是自定义控件还是通过手势进行判断 ,果断蒙了,百度谷歌了一下最后发现原来谷歌早就就出来了这样的效果--android.support.de ...
- AngularJS学习笔记(1)——MVC模式的清单列表效果
MVC模式的清单列表效果 使用WebStorm新建todo.html并链入bootstrap.css.bootstrap-theme.css.angular.js.要链入的相关css和js文件预先准备 ...
- android仿抖音礼物列表实现,Android仿抖音列表效果
本文实例为大家分享了Android仿抖音列表效果的具体代码,供大家参考,具体内容如下 当下抖音非常火热,是不是也很心动做一个类似的app吗? 那我们就用RecyclerView实现这个功能吧,关于内存 ...
- C语言界面列表的滑动效果,jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)...
本文实例讲述了jQuery+ajax实现滚动到页面底部自动加载图文列表效果.分享给大家供大家参考,具体如下: /p> "http://www.w3.org/TR/xhtml1/DTD/ ...
- Vue使用Bootstrap,axios和生命周期函数实现列表效果
Vue使用Bootstrap,axios和生命周期函数实现列表效果 1. 项目构建 1.1使用vist创建vue项目,导入bootstrap,axios包 1.2创建后台文件 2. 前台文件 2.1父 ...
- android仿抖音关注列表,Android仿抖音列表效果
本文实例为大家分享了Android仿抖音列表效果的具体代码,供大家参考,具体内容如下 当下抖音非常火热,是不是也很心动做一个类似的app吗? 那我们就用RecyclerView实现这个功能吧,关于内存 ...
最新文章
- puppet cert maintain
- 2018年中国人工智能100强研究报告
- Beginning Adaptive Layout Tutorial
- plsql连不上oracle6,是否遇到PLSQL Developer连不到oracle数据库呢
- 简单的加密/解密算法_/c++
- eclipse中open resource.不显示class文件
- kafka相关术语及消息分配策略
- 决策树系列(一)——基础知识回顾与总结
- [Python设计模式] 第25章 联合国维护世界和平——中介者模式
- 可以自学计算机考证吗
- 大批量IP查询和IP区域快速查询
- 文件截取\裁剪工具软件
- Java常见问题之Data too long for column 'orResponse' at row 1
- 量子力学科普书籍《见微知著》为什么值得读,看看目录就懂了
- 如何用Python从海量文本抽取主题?【转载:王树义】
- html页面设计参考文献英文,网页设计网站参考文献(国外英文资料).doc
- python2 unicode_python2 中列表中unicode转换为输出中文
- C语言实现一些算法或者函数以及一些经典问题的分析
- 目前学UI设计好就业吗?做UI设计还会有发展潜力?
- 运筹学 知识点总结 单元综合测试(一)
热门文章
- 2021年煤矿采煤机(掘进机)操作考试题及煤矿采煤机(掘进机)操作报名考试
- java写的麻将小游戏
- 利用EXCEL获取字段的拼音首字母
- 数藏行业周报(06.20-06.26)
- spring整合各种RPC框架(netty、dubbo、dubbox、gRPC、Motan)-续(Motan)
- 浏览器渲染中的相关概念
- win11鼠标双击变成重命名解决方法
- 在学术领域认为能展现出智能行为的计算机,2019人工智能与健康试题和答案.pdf...
- Android px、dip、sp
- git创建分支并推送到远程分支