Shulou(Shulou.com)06/02 Report--

This article is to share with you the content of bootstrap supported list styles. Xiaobian thinks it is quite practical, so share it with everyone for reference. Let's follow Xiaobian and have a look.

bootstrap supports 6 list styles: 1. ul unordered list;2. ol ordered list;3. de-dotted list;4. inline list, which refers to replacing vertical list with horizontal list, removing bullet marks and keeping horizontal list;5. dl definition list;6. horizontal definition list.

Operating environment of this tutorial: Windows 7 system, bootsrap3.3.7 version, DELL G3 computer

List--Introduction

In HTML documents, there are three main types of list structures: ordered list, unordered list, and defined list. The specific labels used are described as follows: Unordered list

…

ordered list

…

definition list

… …

Bootstrap provides a list of six forms based on everyday use cases:

Disordered list

Ordered list

Go to point list

List

Definition list

List of horizontal definitions

Next, let's learn how to use these six lists provided by Bootstrap.

List--Introduction Disordered list information 1 Disordered list information 2 Disordered list information 3 Ordered list information 1 Ordered list information 2 Ordered list information 3 Definition List Title Definition list information 1 Definition list information 2 List--unordered list, ordered list

无序列表和有序列表使用方式和我们平时使用的一样（无序列表使用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中列表也是可以嵌套的。

列表--去点列表

小伙伴们可以看到，在Bootstrap中默认情况下无序列表和有序列表是带有项目符号的，但在实际工作中很多时候，我们的列表是不需要这个编号的，比如说用无序列表做导航的时候。Bootstrap为众多开发者考虑的非常周道，通过给无序列表添加一个类名".list-unstyled",这样就可以去除默认的列表样式的风格。 /*源码请查看bootstrap.css文件第580行~第583行*/

.list-unstyled {padding-left: 0;list-style: none;}

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

列表--内联列表

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;}

看个示例：

W3cplus Blog CSS3 jQuery PHP列表--定义列表

对于定义列表而言，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;}

对于定义列表使用，其实很简单，与我们以前的使用定义列表的方法是相同的：

W3cplus 一个致力于推广国内前端行业的技术博客 seashen.cn 一个真心在做HTML5教育的网站列表--水平定义列表

水平定义列表就像内联列表一样，Bootstrap可以给添加类名".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时，将会显示三个省略号

其用法如下：

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

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

感谢各位的阅读!关于"bootstrap支持的列表样式有哪些"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.