Bootstrap提供了六种列表效果

时间  2019-11-11
标签 bootstrap 提供 列表 效果 栏目 Bootstarp 繁體版
原文   原文链接

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

列表--简介

在HTML文档中，列表结构主要有三种：有序列表、无序列表和定义列表。具体使用的标签说明以下：
无序列表css

<ul>     <li>…</li> </ul>

有序列表html

<ol>     <li>…</li> </ol>

定义列表前端

<dl>     <dt>…</dt>     <dd>…</dd> </dl>

Bootstrap根据平时的使用情形提供了六种形式的列表：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; }

从示例中能够看出，除了项目编号以外，还将列表默认的左边内距也清０了。

<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”才具备水平定义列表效果。其实现主要方式：
一、将dt设置了一个左浮动，而且设置了一个宽度为160px
二、将dd设置一个margin-left的值为180px，达到水平的效果
三、当标题宽度超过160px时，将会显示三个省略号

其用法以下：

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

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

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程