bootstrap支持几种列表样式
bootstrap支持6种列表样式：1、ul无序列表；2、ol有序列表；3、去点列表；4、内联列表，是指把垂直列表换成水平列表，且去掉项目符号，保持水平显示的列表；5、dl定义列表；6、水平定义列表。
本教程操作环境：Windows7系统、bootsrap3.3.7版、DELL G3电脑
列表--简介
在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中列表也是可以嵌套的。
列表--去点列表
小伙伴们可以看到，在Bootstrap中默认情况下无序列表和有序列表是带有项目符号的，但在实际工作中很多时候，我们的列表是不需要这个编号的，比如说用无序列表做导航的时候。Bootstrap为众多开发者考虑的非常周道，通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。 /*源码请查看bootstrap.css文件第580行~第583行*/
.list-unstyled {
padding-left: 0;
list-style: none;
}从示例中可以看出，除了项目编号之外，还将列表默认的左边内距也清０了。
列表--内联列表
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-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>当你缩小你的浏览器屏幕时，水平定义列表将回复到原始的状态。
推荐学习：《bootstrap使用教程》
以上是bootstrap支持几种列表样式的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
bootstrap怎么引入Eclipse
Apr 05, 2024 am 02:30 AM
通过以下五步在 Eclipse 中引入 Bootstrap：下载 Bootstrap 文件并解压缩。导入 Bootstrap 文件夹到项目中。添加 Bootstrap 依赖项。在 HTML 文件中加载 Bootstrap CSS 和 JS。开始使用 Bootstrap 增强用户界面。
bootstrap怎么引入idea
Apr 05, 2024 am 02:33 AM
在 IntelliJ IDEA 中引入 Bootstrap 的步骤：创建新项目并选择 "Web Application"。添加 "Bootstrap" Maven 依赖项。创建 HTML 文件并添加 Bootstrap 引用。替换为 Bootstrap CSS 文件的实际路径。运行 HTML 文件以使用 Bootstrap 样式。提示：可使用 CDN 引入 Bootstrap 或自定义 HTML 文件模板。
bootstrap中介效应检验结果怎么看stata
Apr 05, 2024 am 01:48 AM
Bootstrap中介效应检验在Stata中的解读步骤：检查系数符号：确定中介效应的正负向。检验p值：小于0.05表示中介效应显着。检查置信区间：不包含零表明中介效应显着。比较中值p值：小于0.05进一步支持中介效应的显着性。
大模型一对一战斗75万轮，GPT-4夺冠，Llama 3位列第五
Apr 23, 2024 pm 03:28 PM
关于Llama3，又有测试结果新鲜出炉——大模型评测社区LMSYS发布了一份大模型排行榜单，Llama3位列第五，英文单项与GPT-4并列第一。图片不同于其他Benchmark，这份榜单的依据是模型一对一battle，由全网测评者自行命题并打分。最终，Llama3取得了榜单中的第五名，排在前面的是GPT-4的三个不同版本，以及Claude3超大杯Opus。而在英文单项榜单中，Llama3反超了Claude，与GPT-4打成了平手。对于这一结果，Meta的首席科学家LeCun十分高兴，转发了推文并
怎么用bootstrap检验中介效应
Apr 05, 2024 am 03:57 AM
Bootstrap检验采用重抽样技术评估统计检验的可靠性，用于证明中介效应的显着性：首先计算直接效应、间接效应和调解效应的置信区间；其次根据Baron和Kenny或Sobel方法计算调解类型的显着性；最后估计自然间接效应的置信区间。
bootstrap中介检验结果怎么看
Apr 05, 2024 am 03:30 AM
Bootstrap 中介检验通过多次重新抽样数据来评估调解效应：间接效应置信区间：表示调解效应估计范围，如果区间不含零，则效应显着。 p 值：评估置信区间不含零的概率，小于 0.05 表示显着。样本量：用于分析的数据样本数量。 Bootstrap 次采样次数：重复抽样的次数（500-2000 次）。若置信区间不含零且 p 值小于 0.05，则调解效应显着，表明中介变量解释了自变量和因变量之间的关系。
bootstrap和springboot有什么区别
Apr 05, 2024 am 04:00 AM
Bootstrap 和 Spring Boot 的主要区别在于：Bootstrap 是一个轻量级 CSS 框架，用于网站样式，而 Spring Boot 是一个强大、开箱即用的后端框架，用于 Java web 应用程序开发。Bootstrap 基于 CSS 和 HTML，而 Spring Boot 基于 Java 和 Spring 框架。Bootstrap 专注于创建网站外观，而 Spring Boot 专注于后端功能。Spring Boot 可与 Bootstrap 集成，以创建功能齐全、美观
bootstrap检验中介效应stata命令结果怎么导出来
Apr 05, 2024 am 03:39 AM
在 Stata 中导出 Bootstrap 中介效应检验的结果：保存结果：bootstrap post创建变量列表：local vars: coef se ci导出结果（CSV）：export delimited results.csv, varlist(`vars') replace comma nolabel
