文档章节

Bootstrap提供了六种列表效果

9
 9秒教育
发布于 2015/12/03 10:18
字数 1342
阅读 361
收藏 2

u=2721599714,2937226223&fm=21&gp=0

列表--简介

在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>
<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>     <dt>W3cplus</dt>     <dd>一个致力于推广国内前端行业的技术博客。它以探索为己任,不断活跃在行业技术最前沿,努力提供高质量前端技术博文</dd>     <dt>seashen.cn</dt>     <dd>一个专业的HTML5网站</dd>     <dt>我来测试一个标题,我来测试一个标题</dt>     <dd>我在写一个水平定义列表的效果,我在写一个水平定义列表的效果</dd> </dl>

当你缩小你的浏览器屏幕时,水平定义列表将回复到原始的状态。


© 著作权归作者所有

共有 人打赏支持
9
粉丝 2
博文 24
码字总数 32297
作品 0
东城
私信 提问
Bootstrap列表组listgroup

列表组 列表组是Bootstrap框架新增的一个组件,可以用来制作列表清单、垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件。由于其在Bootstrap是一个独立的组件,所以也对应有自己独立...

老胡不胖
2015/11/27
6.2K
0
Bootstrap不同级别标题

Bootstrap和普通的HTML页面一样,定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式,使用其在所有浏览器下显示的效果一样,具体定义的规则可以如下表所示: 通过比较可以发...

9秒教育
2015/11/27
672
0
Bootstrap中的媒体对象

媒体对象 在Web页面或者说移动页面制作中,常常看到这样的效果,左边居左(或居右),内容居右(或居左)排列,如下图所示: 我们常常把这样的效果称为媒体对象。可以说他是一种抽像的样式,...

9秒教育
2015/12/01
26
0
Bootstrap响应式前端框架笔记十一——分页与标签

Bootstrap响应式前端框架笔记十一——分页与标签 在开发搜索结果页、列表页时通常会使用到分页器控件,Bootstrap中提供了方便的类来进行分页器的创建,示例如下: 效果如下: 为li元素添加d...

珲少
2016/12/13
58
0
widyphp 0.3 版本发布,开源社区系统

widyphp 0.3 发布,0.3 版本相对于以前版本,做了如下较大的改动: 1 前台完全采用bootstrap v3.0, 界面简单清晰(但不支持IE6,对于老掉牙的浏览器不计划做兼容)。 2 数据库主键全部改为I...

widyphp
2014/05/14
1K
9

没有更多内容

加载失败,请刷新页面

加载更多

FinderWeb2.4.9 程序员的看日志利器

FinderWeb2.4.9 程序员的看日志利器 使用方法:管理员登录,分配对应用户的的主机和文件权限即可。 部署方式: 下载并解压到webapps目录即可 http://www.finderweb.net/download/finder-web...

吴伟祥
36分钟前
3
0
PHP的pcntl进程控制教程一(pcntl_fork)

pcntl 简介 PHP的进程控制支持实现了Unix方式的进程创建, 程序执行, 信号处理以及进程的中断。 进程控制不能被应用在Web服务器环境,当其被用于Web服务环境时可能会带来意外的结果。 这份文档...

hansonwong
41分钟前
2
0
php扩展模块安装

11月21日任务 11.32 php扩展模块装安装 /usr/local/php/bin/php -m //查看模块 下面安装一个redis的模块 cd /usr/local/src/ wget https://codeload.github.com/phpredis/phpredis/zip/deve......

zgxlinux
41分钟前
3
0
windows下使用IDEA创建VUE项目

1.环境搭建 1.1检测是否安装好nodejs和npm 检测命令 node -v npm -v 如果没有安装需要先安装 nodejs的下载路径:https://nodejs.org/en/download/ 在Windows上安装时务必选择全部组件,包括勾...

文文1
49分钟前
3
0
Mybatis插件plugin应用测试,替换查询sql

1、新建插件 import org.apache.ibatis.executor.CachingExecutor;import org.apache.ibatis.executor.Executor;import org.apache.ibatis.executor.parameter.ParameterHandler;im......

jcc_codingBoy
53分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部