列表

在HTML文档中, 列表结构主要有三种:

无序列表<ul><li>...</li></ul>
有序列表<ol><li>..</li><ol>
定义列表<dl><dt>..</dt></dd>..</dd></dl>

在Bootstrap中

去点列表

class="list-unstyled"

<!--去点列表-->
    <ul class="list-unstyled">
        <li>无序项目列表1</li>
        <li>无序项目列表2</li>
    </ul>

内联列表

class="list-unstyled" , 把垂直列表换成水平列表, 而且去掉项目符号(编号), 保持水平显示.
可以说内联列表就是为制作水平导航而生

<!--内联列表-->
    <ul class="list-inline">
        <li>首页</li>
        <li>介绍</li>
        <li>留言</li>
    </ul>

定义列表

默认是垂直方向的, 如果要制作水平定义列表, 使用样式 class="dl-horizontal"标题宽度超过160px时, 将会显示三个省略号

<!--定义列表-->
    <dl>
        <dt>HTML</dt>
        <dd>超文本标记语言</dd>
        <dt>CSS</dt>
        <dd>层叠样式表是一种样式表语言</dd>
    </dl>
    <dl class="dl-horizontal">
        <dt>HTML</dt>
        <dd>超文本标记语言</dd>
        <dt>CSS</dt>
        <dd>层叠样式表是一种样式表语言</dd>
    </dl>
最后修改:2022 年 08 月 03 日
如果觉得我的文章对你有用,请随意赞赏